style.css

/*                                                                                              ROOT  */

* {
  user-select:none;
  -webkit-user-select:none;
  -webkit-touch-callout:none
  }
  
.bodys {
    position:relative;
    top:650px;
    opacity:1;
    transition:all .2s;
    -webkit-animation:bubble .4s forwards;
    animation:bubble .48s forwards;
    
}

body {
    transition:all .4;
    overflow-x:hidden
}
      
html {
    font-family:"M PLUS Rounded 1c",sans-serif;
    -webkit-tap-highlight-color:transparent;
    user-select:none;
    -webkit-user-select:none;
    -webkit-touch-callout:none
}


/*                                                                           SHORTS */

.fila {
  fill:#fff
}
.muted {
  opacity:.4
}

.nott {
  display:none
}

.animated {
  animation:radigre 0.4s forwards
}

.buta{
  animation: buttons 0.3s ease forwards;
}

.radian{
  animation: mmma 0.3s ease forwards; opacity: 0;
}

.radia{
  animation: mmm 0.3s ease forwards;
}

.animated2 {
  animation:radwiom 0.4s forwards
}

.showw {
  opacity:1!important;
  display:block;
}

.zvok {
  display:none
}

.rig {
  right:10%!important;
  left:25% !important;
}

.hide {
  display:none
}

.radii:active:not(.favorite) span {
font-size: 50px;
bottom: 150%;
left: 110%;
}

img:not(.radioan ):not(.ggg):not(.favorite):active {
 border-top-right-radius: 0px !important;
 border-bottom-right-radius: 0px !important;
}





/*                                                                                                   Keyframes  */

@keyframes buttons {
  0%{bottom: -300px; opacity: .7;}
  100%{bottom: -10px; opacity: 1;}
}

@keyframes mmma {
  0%{opacity: 0; transform: scale(.7);}
  100%{opacity: 1 ;transform: scale(1);}
}

@keyframes mmm {
  0%{opacity: 0; transform: scale(.9);}
  100%{opacity: 1 ;transform: scale(1);}
}

@keyframes bubble {
  0% {opacity:0}
  100% {opacity:1}
}

@keyframes radigre {
  0% {opacity:1;  transform:scale(1)}
  100% {opacity:0;transform:scale(.8)}
}

@keyframes radwiom {
  0% {opacity:0;transform:scale(.8)}
  100% {opacity:1;transform:scale(1)}
}

@keyframes rotatse {
    0% {transform:rotate(0deg); }
    100% {transform:rotate(360deg); }
}
    
@keyframes mymove {
  0% {background-position:center}
  16% {background-position:left top}
  32% {background-position:right top}
  48% {background-position:center}
  64% {background-position:right bottom}
  80% {background-position:left bottom}
  96% {background-position:center}
  100% {background-position:center}
}
/*                                                                                                  DARK  */

@media (prefers-color-scheme: dark) {

  img:not(.radioan ):not(.favorite):not(.isci) {
    filter: brightness(70%);
  }

  .radioano {
    background-color:#071636
  }
  
.isci {
    filter: invert(100%);
  }
  img.radioan {
    background-color:transparent;
    box-shadow:transparent;
    filter: invert(100%) brightness(70%);
  }

  .toper {
    background-color:#071636;
  }
  
  body {
    background-color:#071636
  }
  
  .radii {
    background-color:#071636;
    background-color:rgba(255, 255, 255, 0.03);
    border-color:#fff;
  }
  
  p {
    color:#fff;
    transition: all .4s;
    background-color:transparent;
  }
  
  span {
    color:#fff
  }
  
  html {
    text-shadow:2px 2px 30px #14398f
  }

  .bottom {
    width:100%;
    height:130px;
    background-color:#071636;
    position:fixed;
    bottom:-1px;
    color:#fff
  }
  
  .favorite {
    filter:invert(100%)
  }
  
  .loader {
    background-color:#071636
  }
}

/*                                                                                                                     LIGHT  */

@media (prefers-color-scheme: light) {
  
  .loader {
    background-color: #9f4901;
    box-shadow:transparent;
    filter: invert(100%);
  }

  img.radioan {
 
    
    filter:brightness(100%) !important;
  }
  
  .toper {
    background-color:#57b3ff;

  }
  
  body {
    background-color:#57b3ff
  }
  
  .radii {
    background-color:#57b3ff;
    border-color:#000;
    opacity: 0;
    background-color:rgba(0,0,0,.1);
  }

  span {
    color:#000
  }
  
  p {
    color:#000;
    background-color:transparent;
  }
  
  html {
    text-shadow:2px 2px 30px #000
  }
  
  .bottom {
    opacity: 0;
    width:100%;
    height:130px;
    background-color:#57b3ff;
    position:fixed;
    bottom:-1px;
    color:#000
  }
  
  .radioano {
    background-color:#57b3ff
  }
}

/*                                                                                 /*  PORTRAIT  */

@media (orientation: portrait) {
  .isci{
    width: 90px;
  height: 90px;
 right:60px;
 z-index: 202;
 position: sticky;
 top: 360px;
margin-left: 800px;
 margin-bottom: -100px;
}
  .loader {
    width:100%;
    height:330px;
    z-index:110;
    position:fixed;
    top:0;
    left:0;
    border-radius:100px;
    opacity:0;
    margin-top: 10px;
  }

  .isciradio{
    overscroll-behavior: none;
    font-family:"M PLUS Rounded 1c",sans-serif;
    width:75%;
    height: 110px;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 40px;
    display: block;
    background-color: rgba(250, 250, 250, 0.2);
    border-radius: 100px;
    font-size: 70px;
    padding-left: 30px;
    padding-right: 130px;
    color: #fff;
    border-width: 0;
    opacity: 0;
    position: sticky;
    top: 350px;
    z-index: 200;
  }
  img.radioan {
    margin-top: 25px;
    margin-right: auto !important; 
    margin-left: auto !important; 
    overflow:hidden;
    position:fixed;
    left:0;
    right:0;
    top:0;
    height:600px;
    z-index:50;
    transition:.4s;
    transition:all 0s;
    overscroll-behavior: none;
  }
    
  .toper {
    overscroll-behavior: none;
    overflow:hidden;
    will-change:contents;
    position:fixed;
    left:0;
    right:40%;
    padding-top:30px;
    top:-2px;
    width:100%;
    height:500px;
    z-index:10;
    backdrop-filter:blur(8px);
    -webkit-backdrop-filter:blur(10px);
    transition:all .2s
  }

  .radii {
    opacity: 1;
    margin:auto;
    border-style:solid;
    border-width:10px;
    will-change:scroll-position;
    border-radius:60px;
    height:40%;
    width:75%;
    -webkit-transition:all .5s;
    padding-bottom:-5px;
    display:block;
    margin-bottom:15px;
    position:relative;
    transition: all .2s;
    transition-timing-function: ease;
  }
  p {
    transition:all .4;
    background-color:transparent;
    text-align:center;
    font-size:100px;
    margin-top:0;
    margin-bottom: 40px;
    margin-left: 10px;
    margin-right: 10px;
  }
}

 /*                                                                              /*  LANDSCAPE  */

@media (orientation: landscape) {
  #noresults{
    transition:all .4;
    background-color:transparent;
    text-align:center;
    font-size:90px;
    margin-top:0;
    position:fixed;
    right:-20%;
    bottom:10%
  }
  .isci{
    width: 90px;
    height: 90px;
    right: -930px;
    z-index: 202;
    position: relative;
    top: -600px;
    margin-left: 850px;
    margin-bottom: -100px;
}
  .isciradio{
    overscroll-behavior: none;
    font-family:"M PLUS Rounded 1c",sans-serif;
    width: 70%;
    height: 110px;
    margin-bottom: 60px;
    display: block;
    background-color: rgba(250, 250, 250, 0.2);
    border-radius: 100px;
    font-size: 70px;
    padding-left: 30px;
    padding-right: 130px;
    color: #fff;
    border-width: 0;
    opacity: 0;
    z-index:330;
    right: -72%;
    position: relative;
    top:-600px;
  }
  .radii {
    right: -80%;
    border-style:solid;
    border-width:10px;
    will-change:scroll-position;
    border-radius:60px;
    height:25%;
    width: 70%;
    margin-right:20px;
    padding-bottom:-5px;
    display:block;
    margin-bottom:15px;
    position:relative;
    transition:all .2s;
    -webkit-transition:all .2s;
    top:-600px;
    opacity: 0;
  }
  p {
    transition:all .4;
    background-color:transparent;
    text-align:center;
    font-size:90px;
    margin-top:0;
    position:fixed;
    left:13%;
    bottom:-10%
  }
  img.radioan {
    overflow-y:hidden;
    overflow:hidden;
    will-change:contents;
    top: 10%;
    transform:translateY(-50%);
    width:700px;
    height:700px;
    z-index:10;
    margin-left:70px !important;
    position:fixed;
    transition:.2s
  }
  .loader {
    width:30%;
    height:330px;
    z-index:11;
    position:fixed;
    top:35%;
    left:7%;
    border-radius:100px;
    opacity:0;
    margin-top: 10px;
  }
  
}
    
/*                                                                                            /*  OTHER  */

.scrool{position: absolute; bottom:-500px;}

.isciradio:focus{  border-width: 0;   outline-width: 0;}

#noresults{display: none;}
#nofavi{display: none;}
.mansi{font-size: smaller;}
#isci{display: none;}
#iscilupa{opacity: 0; z-index: 201;}
.screensaver {
  position:fixed;
  width:100%;
  height:100%;
  z-index:301;
  top:0;
  left:0;
  background-color:#000;
  background-image:url(./assets/sloradiobel.svg);
  opacity:0;
  z-index:-5;
  background-repeat:no-repeat;
  transition:all .5s;
  animation:mymove 70s infinite;
  animation-timing-function: ease;
  background-size: 30%;
  overflow-y: hidden;
}

.butt {
  width:30%;
  left:10%;
  height:100px;
  background-color:#fff;
  position:relative;
  bottom:-10%;
  opacity:0;
  backdrop-filter:blur(2px);
  border-radius:60px;
  font-size:60px;
  border-width:0;
  text-decoration:none;
}

img.radioan{
 
  will-change: contents; 
  opacity: 0;

  border-radius: 30px;
}

.top {
  width:100%;
  height:70px;
  position:fixed;
  top:0;
  background-color:#57b3ff;
  z-index:2;
  display:none
}

img:not(.radioan ):not(.ggg):not(.favorite):not(.isci) {
  margin-left:-51px;
 border-radius: 50px;
  z-index:0;
  max-height:60%;
  margin-bottom:-7px;
  margin-top:-1px;
  transition: all .5s;
}

 span {
  -webkit-text-size-adjust:none;
  font-size:80px;
  position:absolute;
  bottom:100%;
  left:100%;
  transition: all .2s;
}

img:not(.radioan ):not(.ggg):not(.favorite):not(.batt):not(.isci) { 
  height: 290px;
  width: 290px;
}

.screen {
  filter:  brightness(10%);
  opacity:1;
  transition:all .5s;
  z-index:301
}

img.ggg {
  height:220px;
  animation-name:rotatse;
  animation-duration:1s;
  animation-iteration-count:infinite;
  display:block;
  margin-left:auto;
  margin-right:auto;
  margin-top:50px;
}


.radioano {
  margin-top: 25px;
  width:100%
}

a {
  position:relative;
  padding:20px;
  margin:30px;
margin-right: -30px;
  transition: all .5s;
  -webkit-tap-highlight-color:transparent
}

.radio {
  margin-right:30px;
  padding-bottom:230px;
  opacity: 0;
}

.favorite {
  position:absolute;
  top:10px;
  right:20px;
  width: 86px;
  height: auto;
  opacity: 1;
transition: all .4s;
}

.favorite:active{transform: scale(.6);}