@import url('https://fonts.googleapis.com/css?family=Fira+Code&display=swap'); body { position: relative; font-family: sans-serif; overflow: hidden; top: 0; padding: 0; margin: 0; } .container { height: 100vh; display:none; } .radio-container { position: absolute; bottom: -56vh; right: 5vh; } .radio { width: 32vh; -moz-user-select: -moz-none; -khtml-user-select: none; -webkit-user-select: none; -o-user-select: none; user-select: none; } #submit { position: absolute; width: 3.5vh; height: 1.9vh; bottom: 45.8vh; left: 5.5vh; border-radius: 5px; transition: all 0.1s linear; } #submit:hover::before { content: attr(title); display: block; position:relative; top:-20px; font-size:12px; color:white; background-color:rgb(255 0 0 / 0%); padding:2px; } #disconnect { position: absolute; width: 2.5vh; height: 4.0vh; bottom: 44.3vh; left: 9.5vh; border-radius: 5px; transition: all 0.1s linear; } #disconnect:hover::before { content: attr(title); display: block; position:relative; top:-20px; font-size:12px; color:white; background-color:rgba(0, 0, 0, 0); padding:2px; } #volumeUp { position: absolute; width: 2.5vh; height: 4.0vh; bottom: 46.0vh; left: 13.0vh; border-radius: 5px; transition: all 0.1s linear; } #volumeUp:hover::before { content: attr(title); display: block; position:relative; top:-20px; font-size:12px; color:white; background-color:rgba(0, 0, 0, 0); padding:2px; } #volumeDown { position: absolute; width: 2.5vh; height: 4.0vh; bottom: 46.0vh; left: 17.0vh; border-radius: 5px; transition: all 0.1s linear; } #volumeDown:hover::before { content: attr(title); display: block; position:relative; top:-20px; font-size:12px; color:white; background-color:rgba(0, 0, 0, 0); padding:2px; } #increaseradiochannel { position: absolute; width: 3.5vh; height: 1.9vh; bottom: 15.2vh; left: 14.3vh; border-radius: 5px; transition: all 0.1s linear; } #increaseradiochannel:hover::before { content: attr(title); display: block; position:relative; top:-20px; font-size:12px; color:white; background-color:rgba(0, 0, 0, 0); padding:2px; } #decreaseradiochannel { position: absolute; width: 3.5vh; height: 1.9vh; bottom: 11.2vh; left: 14.5vh; border-radius: 5px; transition: all 0.1s linear; } #decreaseradiochannel:hover::before { content: attr(title); display: block; position:relative; top:-20px; font-size:12px; color:white; background-color:rgba(0, 0, 0, 0); padding:2px; } #poweredOff { position: absolute; width: 3.5vh; height: 2.9vh; bottom: 16.5vh; left: 19vh; border-radius: 5px; transition: all 0.1s linear; } #poweredOff:hover::before { content: attr(title); display: block; position:relative; top:-20px; font-size:12px; color:white; background-color:rgba(0, 0, 0, 0); padding:2px; } .onoff button { padding: 40px 55px; opacity: .0; } .channel { position: absolute; bottom: 24vh; left: 11.2vh; background: none; } ::-webkit-input-placeholder { color: rgba(0, 0, 0, 0.5); } .channel span { text-align: center; color: rgba(0, 0, 0, 0.75); } .channel input { text-align: center; border: none; font-size: 30px; background: none; outline: none; font-family: 'Fira Code', monospace; width: 5vw; } ::-webkit-inner-spin-button { display: none; }