.floating{ background-color: var(--back-color); border-color: var(--main-color); border-style: solid; border-radius: 7.77px; border-width: thin thick thin thin; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; box-sizing: border-box; overflow: hidden; color: var(--main-color); h1{ width: 100%; height: 33px; background-color: var(--main-color); font-family: 'lineal'; text-transform: uppercase; font-size: 27px; color: var(--back-color); padding: 3.33px; padding-left: 13.12px; cursor: move; position: relative; z-index: 3; pointer-events: all; box-sizing: border-box; } } .solid{ background-color: var(--back-color); border-color: var(--main-color); border-style: solid; border-radius: 0; color: var(--main-color); } .iconBtn{ background-color: var(--back-color); border-color: var(--main-color); border-style: solid; border-radius: 22px; border-width: thin thin thick thin; color: var(--main-color); display: flex; align-items: center; justify-content: space-around; .icon{ fill: currentColor; height: 50%; width: auto; pointer-events: none; } } .textBtn{ background-color: var(--back-color); border-color: var(--main-color); border-style: solid; border-radius: 22px; border-width: thin thin thick thin; color: var(--main-color); font-family: 'velvelyne'; font-weight: bold; text-transform: uppercase; font-size: 22px; display: flex; align-items: center; justify-content: space-around; animation: none; } .textBtn:hover{ color: var(--back-color); animation: blinkBack 1.61s infinite; } .floating[data-window="selected"]{ z-index: 333 !important; border-color: var(--accent-color); h1{ background-color: var(--accent-color); } .iconBtn{ border-color: var(--accent-color); color: var(--accent-color); } }