body{
  font-family: AmaticSC;
  background-image: url(img/radio4-1.gif) !important;
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-position: center; 
  background-size: auto;
  background-color: #9a5669;
  margin: 0;
  height: 100%;
  }

@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
*{
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
.noSleepButton{
  padding:4px;
  font-family: AmaticSC;
   font-size: 22px;
   border-radius: 10px;
  box-shadow: 0 0 8px -2px #FF0000;
  margin-top: 10px;
  background-color: #d5dbdb;
  border: none;
}

a{
  text-decoration: none
}
#indexPage
{
background-image: none !important;
  background-color: #E0E0E0;

}
#indexPage h2{
   font-size: 140px;
   color: #ffef96;
   text-align: center;

}
#headline-img-small{
  display: none;
}
#landing-headline{
  width: 100%;
  margin-top: 30px;
}

#landing-headline img{
  width: 100%;
}

@font-face 
 {  font-family: myFirstFont;
   src: url(font/ALTERNATIVEROCK-Border.ttf);
}

@font-face {
   font-family: AmaticSC;
   src: url(font/AmaticSC-Bold.ttf);
}

a{
  font-size: 30px;
}
h2{
  text-align: center;
  font-size: 45px;

}

svg {
  fill: currentColor;
  height: auto;
  transform-origin: center;
  width: 100%;
}

.largeScreen{
  visibility: hidden;
}

.active{
  color: #ffef96 !important;
}

.main-headline, .main-headline1 , .main-headline-xl, .main-headline1-xl{
position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 420px;
  max-width: 420px;
  opacity: .9;
}

.main-headline1{
  width: 230px;
}

.main-headline1-xl{
  width: 360px;
   display: none;
}

.main-headline-xl{
  width: 640px;
  max-width: 640px;
}
.main-headline textPath , .main-headline-xl textPath{
  text-align: center;
  font-size: 14px;
  color: #ffef96;
  text-shadow: 1px 1px 2px black, 0 0 1em red, 0 0 0.2em black;
  font-family: myFirstFont;
}
.main-headline1 textPath, .main-headline1-xl textPath{
  font-size: 21px;
  font-family: myFirstFont;
  color: #051425;
  text-align: right !important;
  text-shadow:0 0 .2em #ffef96
}
.main-headline1-xl textPath{
  font-size: 21px;
}
.main-headline-xl{
  display: none
}

#opis{
  display: none;
}
.list{
  position: fixed;
  bottom: 20px;
  width: 100%;
  visibility: hidden;
}
.list h2{
color: #3B3131;
text-shadow: 1px 1px #ffef96;
}

.listXl{
position: fixed;
left: 30px;
bottom: 50px;
}
.list-Slow{
  bottom: 150px ; 
}
.list-Slow h2{
  font-size: 41px !important;

}
.list-New{
  bottom: 100px ; 
}
.listXl h2{
  color: #404040;
  text-shadow: 1px 1px #ffef96;
  font-family: AmaticSC;
  font-size: 45px;
}
#loadButton{
  position: absolute;
  left: 20px;
  top: 20px; 
  display: none;
  z-index: 10;
}
#loadButton h1{
  margin-right: 20px;
  color: black;
}

.loading{
  width: 25px;
  cursor: pointer;
  display: none;
}

.loading img{
  width: 48px;
  transition: .5s;
}
.loading img:hover{
  width: 59px;
}

.loadMore li{
  list-style-type: none;
}
.loadMore li a{
  font-size: 38px;
  text-decoration: none;
  color:white;
  text-shadow: 1px 1px red;

}

#unload{
  display: block;
}
.loadMore{
  display: none;
  margin-left: 20px;
  margin-top: 0px;

}
 input[type=checkbox]{
    display: none;
}


.radio-player {
  background: rgba(255, 255, 255, 0.6);
  height: 63px;
  width: 100%;
  margin: auto;
  position: fixed;
  bottom: 0px;
  left: 0px;

}

.button {
  vertical-align: middle;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  border: none;
  background-color:black;
  color: #fff;
  border-radius: 100%;
}
.play-pause-button {
  width: 50px;
  height: 50px;
  font-size: 23px;
  margin-right: 24px;
  position: fixed;
  bottom: 7px;
  right: 220px;
}
.mute-button {
  width: 30px;
  height: 30px;
  margin-right: 12px;
}

.player-controls {
  display: inline-block;
  width: 100%;
}
.currently-playing {
 color: #995669;
position: fixed;
 bottom: 7px;
 left: 10px;
}
.volume-controls {
  display: flex;
  align-items: center;
  position: fixed;
  bottom: 10px;
  right: 10px;
}

.currently-playing-title {
    font-size: 42px;
    /*background: rgba(236, 240, 241,0.8);*/  
}

.volume {
  -webkit-appearance: none;
  appearance: none;
  border: 1px solid #000;
  border-radius: 50px;
  overflow: hidden; /* This will help with styling the thumb */
}

input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  appearance: none;

  height: 15px;
  width: 15px;

  cursor: ew-resize;
  background:#000000  ;
  box-shadow: -400px 0 0 390px #C0C0C0;
  border-radius: 50%;
}
input[type="range"]::-moz-range-thumb {
  /* same as above */
}
input[type="range"]::-ms-thumb {
  /* same as above */
}
input[type="range"]:focus {
  border-radius: 50px;
  box-shadow: 0 0 15px -4px #FF0000;
}

#playlist{
  display: none;
}
#next{
  width: 35px;
  border-radius: 100%;
  margin-left: 10px;
  position: relative;
  top: 2px;
}
#next img{
  width: 100%
}

.main-headline svg , .main-headline-xl svg{
  -webkit-animation:spin  14s linear infinite, opa 14s linear infinite;;
    -moz-animation:spin 14s linear infinite,opa 14s linear infinite;;
    animation:spin 14s linear infinite, opa 14s linear infinite;;
}
 .main-headline1 svg, .main-headline1-xl svg{
  -webkit-animation:spinContra  14s linear infinite, opa 14s linear infinite;;
    -moz-animation:spinContra 14s linear infinite,opa 14s linear infinite;;
    animation:spinContra 14s linear infinite, opa 14s linear infinite;;
}


@-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }
.main-headline svg,{
  width: 100%;
}
@-moz-keyframes spin { 100% { -moz-transform: rotate(-360deg); } }
@-webkit-keyframes spin { 100% { -webkit-transform: rotate(-360deg); } }
@keyframes spin { 100% { -webkit-transform: rotate(-360deg); transform:rotate(-360deg); } }
.main-headline-xl svg,{
  width: 100%;
}


@-moz-keyframes spinContra { 100% { -moz-transform: rotate(360deg); } }
@-webkit-keyframes spinContra { 100% { -webkit-transform: rotate(360deg); } }
@keyframes spinContra { 100% { -webkit-transform: rotate(360deg); transform:rotate(360deg); } }
 
 .main-headline1 svg{
  width: 100%;
}

/*@keyframes opa {
 
  20%   { opacity: 1; }
  80%   { opacity: 0; }
  100%  { opacity: 1; }
}*/

.mask {
   position: absolute;
    height: 100%;
    width: 100%;
    background-image: radial-gradient(
        circle,
        transparent 180px,
        rgba(0, 0, 0, 0.7) 270px,
        rgba(0, 0, 0, 0.9) 360px
    );
}

.landing-page {
  position: relative;
  margin: 0 auto;
  width: 1500px;
  margin-top: 60px;
    
}
.landing-page img {
  margin: 15px;
  --s: 10px;  /* size of the frame */
  --b: 1px;   /* border thickness */
  --w: 465px; /* width of the image */
  --c: #404040;
  width: var(--w);
  aspect-ratio: 1;
  padding: calc(2*var(--s));
  --_g: var(--c) var(--b),#0000 0 calc(100% - var(--b)),var(--c) 0;
  background:
    linear-gradient(      var(--_g)) 50%/100% var(--_i,100%) no-repeat,
    linear-gradient(90deg,var(--_g)) 50%/var(--_i,100%) 100% no-repeat;
  outline: calc(var(--w)/2) solid #0009;
  outline-offset: calc(var(--w)/-2 - 2*var(--s));
  transition: .4s;
  cursor: pointer;
}
.landing-page img:hover {
  outline: var(--b) solid var(--c);
  outline-offset: calc(var(--s)/-2);
  --_i: calc(100% - 2*var(--s));
}

.mask h3{
  font-family: AmaticSC;
  color: white;
  opacity: .8;
  font-size: 25px;
  display: none;
}
.headline1{
  position: absolute;
  top: 200px;
  left: 1%;
  transform: rotate(20deg);
}
.headline2{
  position: absolute;
  top: 50px;
  left: 10%;
}
.headline3{
  position: absolute;
  top: 350px;
  left: 15%;
  transform: rotate(-20deg);

}

.headline4{
  position: absolute;
  top: 100px;
  right: 12%;
  transform: rotate(-20deg);
}
.headline5{
  position: absolute;
  top: 200px;
  right:10%;
}
.headline6{
  position: absolute;
  top: 350px;
  right: 14%;
  transform: rotate(20deg);

}

@media screen and (min-width : 601px) and (max-width : 950px){
.currently-playing-title {
    font-size: 30px;
    /*background: rgba(236, 240, 241,0.8);*/  
 }
 .currently-playing{
  bottom: 13px
 }

 .landing-page {
  margin: auto;
  width: 600px;
    
}
.landing-page img {
  margin: 5px;
  --s: 0px;  /* size of the frame */
  --w: 180px; /* width of the image */
 
}

#indexPage h2{
  margin-top: 20px;
}

}
@media screen and (max-width : 600px){

  body{
    background-image: url(img/radio1-1.gif) !important;
     color:white;

}


body#page1 .player-controls{
  padding-bottom: 5px;
  padding-top: 5px;
  background: rgba(0, 0, 0, 0.7);

}
h2{
  font-size: 32px;

}
#landing-headline{
  width: 95%;
  margin: 0 auto;
}
#headline-img-small{
  display: block;
  margin-top: 30px;
}
#headline-img-big{
  display: none;
}
.landing-page{
  width: 99%;
  margin-top: 10px;
}

.landing-page img{

  display: block;
  margin-left: auto;
  margin-right: auto;
--s: 0px;  /* size of the frame */
  --b:none;   /* border thickness */
  --w: 65%; /* width of the image */

}
.list{
  bottom: 100px;
  visibility: visible;
}

.list h2{
  font-family: AmaticSC;
  font-size: 48px;
}
#listFastMob h2{
  color: #050102;
}
.listXl{
  visibility: hidden;
}
.main-headline{
  width: 280px;
}
.main-headline1{
 visibility: hidden;
}

.main-headline textPath{
  
  font-size: 18px;
  text-shadow: 4px 4px black;

}
.mediumScreen{
  visibility: hidden;
}
.loading img{
  width: 42px;
}

#loadButton{
  
  left: 25px;
  top: 165px; 
}

.loadMore{
  margin-top: 5px;
  margin-left: 20px;
}

.linkBackground a{
  background: rgba(0, 0, 0, 0.6);
  padding-left: 5px;
  padding-right: 5px;

}

.button{
  background-color:white;
  color: black;
}

.player-controls  {
  background: rgba(0, 0, 0, 0.6);
  padding: 5px;
  max-width: 99%;

}
  .radio-player {
  margin: 0;
  top: 0px;
  left: 0px;
 height: 0px;
 
}
.currently-playing{
  position: relative;
  bottom: 0px;
  left: -5px;
}
.currently-playing-label {
    font-size: 27px;
    font-weight: 800;

}
.currently-playing-title {
    font-size: 36px;
    background: none;
    color: white;
    
  }

.play-pause-button{
  left: 30px;
  bottom: 30px;

}
.volume-controls {
  bottom: 30px;
  right: 45px;
}

#next{
  top: 5px;
}

.mask {
  
    background-image: radial-gradient(
        circle,
        transparent 110px,
        rgba(0, 0, 0, 0.7) 220px,
        rgba(0, 0, 0, 0.9) 330px
    );
}

.mask h3{
  display: none;
}




}

@media screen and (min-width : 1900px){

body{
  background-image: url(img/radio4.gif) !important;
 
  }

.main-headline1-xl{
 display: block;
}
  .main-headline1 {
   display: none
  }

.main-headline textPath{
  font-size: 23px;
  
}
.main-headline1 textPath{
  font-size: 24px;
  
}
.main-headline-xl{
  display: block;
}
.main-headline{
 display: none;
}

.largeScreen{
  visibility: visible
}
.mediumScreen{
  visibility: hidden;
}

.mask {
  
    background-image: radial-gradient(
        circle,
        transparent 210px,
        rgba(0, 0, 0, 0.7) 340px,
        rgba(0, 0, 0, 0.9) 500px
    );
}
.mask h3{
  font-size: 35px;
}

.headline1{
 visibility: hidden;
}
.headline2{
  visibility: hidden;

}
.headline3{
  visibility: hidden;


}

.headline1XL{
top: 300px;
  left: 300px;
    visibility: visible;
}

.headline2XL{
  top: 100px;
  left: 500px;
    visibility: visible;
}

.headline3XL{
  top: 700px;
  left: 200px;
    visibility: visible;
}
.headline4XL{
top: 600px;
  right: 200px;
    visibility: visible;
}

.headline5XL{
  top: 200px;
  right: 400px;
    visibility: visible;
}

.headline6XL{
  top: 400px;
  right: 300px;
    visibility: visible;
}

#loadButton{
  left: 110px;
  top: 80px; 
  
}

.listXl{
 
left: 220px;
bottom: 180px;

}
.listXl h2{
  font-size: 69px;
}

.list-Slow{
  bottom: 210px ; 
}
.list-Slow h2{
  font-size: 74px !important;

}
.listFast{
  bottom: 130px;
}
.listFast h2{
   font-size: 61px ;
}

.play-pause-button{
 
  bottom: 7px;

}

#indexPage h2{
   font-size: 120px;
   margin-top: 50px;
}

}

@media screen and (min-width : 1200px) and (max-width : 1850px){
#indexPage h2{
   font-size: 100px;
   margin-top: 20px;
}
.landing-page {
  width: 1100px;
  margin: auto;
  margin-top: 30px;
}
.landing-page img {
  margin: 15px;
  --s: 10px;  /* size of the frame */
  --b: 1px;   /* border thickness */
  --w: 330px; /* width of the image */
  --c: #404040;
  }
}