@font-face { font-family: 'boll-vcr'; src: url('res/boll-vcr-regular.woff2') format('woff2'), url('res/boll-vcr-regular.woff') format('woff'); font-weight: normal; font-style: normal; font-display: swap; }
* { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; }
html {font-family: 'boll-vcr'; text-rendering: geometricPrecision; font-size: 10px; }
body {display: flex; height: 100vh; height: 100dvh; background-color: #000000; color: #ffffff; margin: 0; }

h1, h2, h3, h4, h5 { margin: 0; font-weight: normal; }
.show { display: block !important; }
.hide { display: none !important; }
.invisible { opacity: 0 !important; }
.visible { opacity: 1 !important; }

#player { position: absolute; width: 100%; height: 100%; height: 100dvh; }
#visual { position: absolute; width: 100%; height: 100%; height: 100dvh; }
#jingle { width: 100%; height: 100%; height: 100dvh; display: flex; background: #000000; opacity: 1; z-index: 1; }
#jingle:has(.endcard) { transition: 0.5s linear;  }
#jingle video { width: 100%; height: 100%; height: 100dvh; }

#mask { position: absolute; width: 100%; height: 100%; height: 100dvh; border-width: 0px; border-style: solid; border-color: #000000; transition: 2s; transition-delay: 3s; box-sizing: border-box; }
#mask.on { border-width: 60px 0; transition: 0s; }

#osd { opacity: 0; cursor: none; position: absolute; width: 100%; height: 100%; height: 100dvh; background-color: rgba(0, 0, 0, 0.7); z-index: 2; }
#osd.visible { cursor: auto; }
#osd.info { opacity: 1; }
body:has(#osd.info) #volume { display: none; }
body:has(#osd.info) #fullscreen { display: none; }

#channel { opacity: 0; transition: opacity 0s 2s; position: absolute; top: 50px; left: 50px; font-size: 10rem; z-index: 3; }
#channel.visible { transition: 0s; }
body:has(#channel.visible) #videotext { top: 140px; transition: 0s; }

#videotext { position: absolute; transition: top 0.5s ease 2s; width: 75%; top: 50px; left: 50px; display: flex; flex-direction: column; gap: 10px; }
#videotext section { display: flex; flex-direction: column; gap: 5px; }
#videotext h1 { font-size: 6rem; }
#videotext h2 { font-size: 5rem; }
#videotext h3 { font-size: 4rem; }
#videotext h4 { font-size: 3rem; }
#videotext h5 { font-size: 2rem; line-height: 1em; }

#switch { visibility: hidden; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); display: flex; gap: 10px; font-size: 12rem;}
body:has(#osd.visible) #switch { visibility: visible; }
#switch span { cursor: pointer; }
#volume { display: none; position: absolute; bottom: 50px; left: 50px; z-index: 3; }
body:has(#osd.visible) #volume { display: block; }
#volume.mute { display: block !important; z-index: 11;}
#volume.mute span { font-size: 14rem; cursor: pointer; }
#volume div { font-size: 5rem; width: fit-content; cursor: pointer; }
#volume span { font-size: 6rem; cursor: pointer; }
#fullscreen { position: absolute; bottom: 50px; right: 50px; font-size: 6rem; cursor: pointer; }

#noise { display: none; position: absolute; background-color: #000000; pointer-events: none; z-index: 10; }

@media (max-width: 992px) {
  html { font-size: 5px; }
  #channel { top: 10px; left: 10px; }
  body:has(#channel.visible) #videotext { top: 55px; }
  #volume { display: none !important; }
  #volume.mute { position: absolute; height: 100%; height: 100dvh; width: 100%; left: unset; bottom: unset; display: flex !important; align-items: center; justify-content: center; }
  #volume.mute span { font-size: 30rem; }
  #fullscreen { display: none; }
  #videotext { width: 100%; top: 10px; left: 10px; gap: 5px; }
  #switch { top: unset; bottom: 0px; font-size: 11rem; }
}