@font-face {
    
  font-family: sf pro display;
    font-style: normal;
    font-weight: 400;
    src: local('SF Pro Display'), url(./fonts/SFPRODISPLAYREGULAR.woff) format('woff');
}
@font-face {
    font-family: sf pro display;
    font-style: italic;
    font-weight: 100;
    src: local('SF Pro Display'), url(./fonts/SFPRODISPLAYULTRALIGHTITALIC.woff) format('woff');
}
@font-face {
    font-family: sf pro display;
    font-style: italic;
    font-weight: 200;
    src: local('SF Pro Display'), url(./fonts/SFPRODISPLAYTHINITALIC.woff) format('woff');
}
@font-face {
    font-family: sf pro display;
    font-style: italic;
    font-weight: 300;
    src: local('SF Pro Display'), url(./fonts/SFPRODISPLAYLIGHTITALIC.woff) format('woff');
}
@font-face {
    font-family: sf pro display;
    font-style: normal;
    font-weight: 500;
    src: local('SF Pro Display'), url(./fonts/SFPRODISPLAYMEDIUM.woff) format('woff');
}
@font-face {
    font-family: sf pro display;
    font-style: italic;
    font-weight: 600;
    src: local('SF Pro Display'), url(./fonts/SFPRODISPLAYSEMIBOLDITALIC.woff) format('woff');
}
@font-face {
    font-family: sf pro display;
    font-style: normal;
    font-weight: 700;
    src: local('SF Pro Display'), url(./fonts/SFPRODISPLAYBOLD.woff) format('woff');
}
@font-face {
    font-family: sf pro display;
    font-style: italic;
    font-weight: 800;
    src: local('SF Pro Display'), url(./fonts/SFPRODISPLAYHEAVYITALIC.woff) format('woff');
}
@font-face {
    font-family: sf pro display;
    font-style: italic;
    font-weight: 900;
    src: local('SF Pro Display'), url(./fonts/SFPRODISPLAYBLACKITALIC.woff) format('woff');
}

body  {
  display: grid;
  justify-items: center;
  padding: 0;
  margin: 0;
}
/* #bg {
  background-image: url(./bgn.jpg);
  background-position: center center;
  background-size: cover;
  width: 100vw;
  height: 100%;
  overflow: hidden;
  position: fixed;
  z-index: -1;
  opacity: 1;
} */
#bg {
  background-position: center center;
  background-size: 35%;
  width: 100vw;
  height: 100lvh;
  overflow: hidden;
  position: fixed;
  z-index: -1;
  opacity: 0.9;
  background-repeat: no-repeat;
}
@media screen and (max-width: 500px) {
  #bg {
    background-size: 100%;
  }
}

#bg2 {
  width: 100vw;
  height: 100lvh;
  overflow: hidden;
  position: fixed;
  z-index: -1;
 }
#bg2 video {
  width: 100vw;
  height: 100lvh;
  object-position: center center;
  object-fit: contain;
}

#header {
  width: 100%;
  box-sizing: border-box;
  padding: 0.5em 0.5em;
  display: flex;
  justify-content: space-between;
  margin: 0 0 25%;
  }
@media screen and (max-width: 500px) {
  #header span:last-child {
    text-align: right;
  }
}
#onair {
  background: red;
  color: white;
  border-radius: 5px;
  padding: 0.5em;
  box-shadow: 0px 0px 10px red;
  text-transform: uppercase;
}
#offline {
  border-radius: 5px;
  padding: 0.5em;
  text-transform: uppercase;
  border: 1px solid white;
  background: black;
  position: relative;
}
h1 {
  color: #BFFF00;
  mix-blend-mode: exclusion;
  text-transform: uppercase;
  font-style: italic;
  font-weight: 800;
  position: sticky;
  top: 5%;
  text-align: center;
  font-size: 3em;
  animation-name: fadein;
  animation-duration: 5s;
  animation-iteration-count: 1;
  animation-fill-mode: forwards;
  opacity: 0;
}

h1 span, .float span {
  position: relative;
  display: inline-block;
  animation-name: wavy;
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}
h1 span:before {
  position: absolute;
  mix-blend-mode: exclusion;
  content: attr(data-content);
  transform: rotate(-5deg) translate(-5px, 3px);  
  animation-duration: 10s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  color: #fff;
}
.new {
  position: relative;
}
.new:before {
  content: "NEW!";
  top: -0.5em;
  left: -0.55em;
  position: absolute;
  mix-blend-mode: exclusion;
  color: white;
  transform:rotate(-20deg);
  font-size: 1.6em;
  animation: blink 1.5s linear infinite;
}
@keyframes blink {
  0% { 
    opacity: 1;
  }
  27% {
    opacity: 1;
  }
  30% {
    opacity: 0;
  }
  40% {
    opacity: 0
  }
  43%{
    opacity: 1;
  }
  
}
.sans, .sans a, .sans p { 
  font-family: 'SF Pro Display', sans-serif !important;
}
p, table {
  font-family:'Times New Roman', Times, serif;
} 
.descr {
  text-transform: lowercase;
  text-align: center;
}
.archive .sendung:nth-child(odd) {
  /*background:var(--color);*/
  color: var(--bgcolor);
  backdrop-filter: invert(255) blur(4px);
}
.archive .sendung:nth-child(odd) .pointer p, .archive .sendung:nth-child(odd) .button.play {
  border: 1px solid var(--bgcolor) !important;
}
.sendung {
  display: grid;
  grid-template-areas: 
  'id   id  id'
  'date pic archive';
  grid-template-columns: 26ch 4ch 1fr;
  grid-row-gap: 0.5em;
  padding: 0.5em;
  backdrop-filter: blur(4px);
}
.sendung p {
  margin: 0 0.5em;
  display: flex;
  align-items: center;
}
.sendung div:first-child {
  grid-area: date;
}
.sendung div:nth-child(2) {
  grid-area: pic;
}
.sendung div:nth-child(3) {
  grid-area: archive;
}
.sendung div:nth-child(4) {
  grid-area: id;
}

table {
  table-layout: auto; 
  width: 100%;
}
table, tr, td {
  padding: 0.25em;
}
td {
  margin: 0.25em;
  display: inline-block;
}
tr:nth-child(4n+1), tr:nth-child(4n+2) {
  background: white;
  color: black;
}
img {
  max-width: 90vw;
  height: auto;
}
.footer {
  display: grid;
  justify-items: center;
  border-radius: 5px;
  text-align: center;
}

.width {
  width: clamp(45ch, 50%, 75ch);

}
.margin {
  margin-top: 10lvh;
}
.padding {
  padding: 0.25em 0.75em;
}
a {
  display: inline-block;
  text-decoration: none;
}

.section {
  min-height: 100lvh;
  display: grid;
  justify-items: center;
  align-content: center;;
}
#intro {
  min-height: 50lvh;
  align-content: start;
}
#intro p:first-child {
  margin: 0 0 3em 0;
}
.slogan {
  max-width: 100%;
  min-width: max-content;
  text-align: center;
  min-height: 3em;
  padding: 0.5em;
  border-radius: 5px;
  display: flex;
  align-items: center;
  justify-content: center;
  backdrop-filter: invert(255) blur(4px);
  color: var(--bgcolor);
}
.footer.padding.margin.wonb.sans.access {
  backdrop-filter: blur(4px);
}
.slogan:not(:first-child) {
  display: none;
}
.pointer {
  cursor: pointer;
}
.pointer p, .button.play {
  border: 1px solid var(--color);
}
.pointer p {
  padding: 1px;
}
.button.play  {
  padding: 2px;
  border-radius: 2px;
}
.uppercase {
  text-transform: uppercase;
}
.lowercase {
  text-transform: lowercase;
}
.button {
  background: none;
	color: inherit;
	border: none;
	padding: 0;
	font: inherit;
	cursor: pointer;
	outline: inherit;
}
.doublebutton {
  display: grid; 
  grid-auto-flow: column; 
  grid-gap: 2em;
}
@media screen and (max-width: 500px) {
  .doublebutton {
    grid-auto-flow: row; 
    grid-gap: 0em;
  }  
}
/* ANIMATIONS */
@keyframes wavyold {
  0% {
    transform: translate(1px, 2px);}
  33% {  transform: translate(-3px, 0px);}
  45% {  transform: translate(-2px, 1px);}
    66% {
    transform: translate(3px, 4px);}
    79% {
      transform: translate(3px, 4px);}
  100% {
        transform: translate(1px, 2px);}
  }

  @keyframes wavy {
    0% {
      transform: translate(1px, 2px);
      /* color: #BFFF00; */
    }
    33% {  
      transform: translate(-3px, 0px);
      /*color: #009FFF;*/
    }
    45% {  
      transform: translate(-2px, 1px);
      /*color: #0800FF;*/
    }
      66% {
      transform: translate(3px, 4px);
      /*color: #FF00E3*/
    }
      79% {
        transform: translate(3px, 4px);
        /*color: #FF7800*/
      }
    100% {
        transform: translate(1px, 2px); 
        /*color: #fff700;*/
      }
    }


    @keyframes fadein {
      0% {
        color: #000;
        opacity: 0;
      }
      30% {
        color: #000;
        opacity: 1;
      }
      100% {
        color: #BFFF00;
        opacity: 1;
      }
    }

/* RADIO */
#playerbar {
  width: min-content;
  background-color: var(--color);
  color: var(--bgcolor);
  position: fixed;
  bottom: 0;
  z-index: 100;
  padding: 0.25em;
  grid-gap: 0.3em;
  grid-template-columns: max-content max-content 1fr max-content;
}
#playerbar.live {
  display: grid !important;
}
#playerbar.live #trackProgressBar {
  display: none;
}
#playerbar, #playerbar #live, #playerbar.live #totalDuration, #playerbar.live #divider, #playerbar.live #currentDuration {
  display: none;
}
#playerbar.live #live {
  display: inline-block;
  color: red;
}
#playerbar .text-controls span:first-child {
  margin: 0 0.25em 0 0;
}
#playerbar .text-controls p {
  display: grid;
  grid-auto-flow: column;
}
#playerbar p {
  margin: 0;
  overflow: hidden;
  padding: 0 0 0 5px;
}
#playerbar img:first-child {
  margin-left: 0.4em;
}
#playerbar img:last-child {
  margin-right: 0.4em;
}
.text-controls 
{
  display: grid;
  grid-auto-flow: column;
  align-items: center;
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  cursor: default;
}

.text-controls span {
  color: var(--bgcolor);;
  font-size: 1rem;
  padding: 0 0.1em;  
  display: flex;
  align-items: center;
}
.text-controls #currentDuration {
  width: 7ch;
}
.text-controls span.txt-btn:hover {
  color: var(--color);;
  background-color: var(--bgcolor);
  cursor: pointer;
}
#trackProgressBar {
  width: 20ch;
  margin: 0;
}
audio#audioPlayer {
  width: 100%;
  display: none;
}
input[type=range]#trackProgressBar {
  -webkit-appearance: none;
  width: 20ch;
  height: 20px;
  border: 1px solid var(--bgcolor);
}
@media screen and (max-width: 500px) {

  input[type=range]#trackProgressBar {
    width: 10ch;
  }
}

input[type=range]#trackProgressBar:focus {
  outline: none;
  border: 1px solid var(--bgcolor);
}

input[type=range]#trackProgressBar::-webkit-slider-runnable-track {
  width: 100%;
  height: 2px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: none;
  background: var(--color);
  border: 10px solid var(--color);
  border-right: none;
  border-left: none;
}

input[type=range]#trackProgressBar::-webkit-slider-thumb {
  box-shadow: none;
  border: none;
  height: 20px;
  width: 10px;
  border-radius: 0px;
  background: var(--bgcolor);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -10px;
}

input[type=range]#trackProgressBar:focus::-webkit-slider-runnable-track {
  background: var(--bgcolor);
}

input[type=range]#trackProgressBar::-moz-range-track {
  width: 100%;
  height: 0px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: none;
  background: var(--bgcolor);
  border: 1px solid var(--color);
  border-right: none;
  border-left: none;
}
body.inverse input[type=range]#trackProgressBar {
  background: black !important;
} 

input[type=range]#trackProgressBar::-moz-range-thumb {
  box-shadow: none;
  border: none;
  height: 20px;
  width: 10px;
  border-radius: 0px;
  background: var(--bgcolor);
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -10px;
}

input[type=range]#trackProgressBar::-ms-track {
  width: 100%;
  height: 0px;
  cursor: pointer;
  animate: 0.2s;
  background: var(--color);
  border-color: var(--color);
  border-width: 10px 0;
  color: transparent;
}

input[type=range]#trackProgressBar::-ms-fill-lower {
  background: var(--color);
  border: none;
  border-radius: 0px;
  box-shadow: none;
}

input[type=range]#trackProgressBar::-ms-fill-upper {
  background: var(--color);
  border: none;
  border-radius: 0px;
  box-shadow: none;
}

input[type=range]#trackProgressBar::-ms-thumb {
  box-shadow: none;
  border: none;
  height: 20px;
  width: 5px;
  border-radius: 0px;
  background: var(--vgcolor);
  cursor: pointer;
  margin-top: 0px;
}

input[type=range]#trackProgressBar:focus::-ms-fill-lower {
  background: var(--color);
}

input[type=range]#trackProgressBar:focus::-ms-fill-upper {
  background: var(--color);
}
.icon  {
  width: auto; 
  display: inline-block;
}
.access {
  border: 1px solid var(--color);
}

/* COLOR SCHEME */
body {
  background: #000;
  --color: #fff;
  --bgcolor: #000;
}
.bonw {
  background-color: #fff;
  color: #000;
}
.wonb, .wonb a, a.wonb {
  color: #fff;
}
.bonw a, a.bonw  {
  color: #000;
}
body .filt {
  filter: invert(255);
}
/* COLOR SCHEME INVERSE */
body.inverse {
  background: #fff;
  --color: #000;
  --bgcolor: #fff;
}
body.inverse .bonw {
  background-color: #000;
  color: #fff;
}
body.inverse.wonb, body.inverse .wonb, body.inverse .wonb a, body.inverse a.wonb {
  color: #000;
}
body.inverse .bonw a, body.inverse a.bonw  {
  color: #fff;
}
body.inverse .filtinverse {
  filter: invert(255);
}
body.inverse .filt {
  filter: none;
}