html { box-sizing: border-box; }
*, *:before, *:after { box-sizing: inherit; }


body  { 
        margin:0;
        padding:0;
        width:100%;
        height:100%;
        background-color: #9badc1;
        color: #FFFFFF;
        font-family: open_sansregular;
      }


.no_select { -webkit-user-select: none;
             -khtml-user-select: none;
             -moz-user-select: none;
             -o-user-select: none;
             user-select: none;
           }
.no_drag { -webkit-user-drag: none;
           -khtml-user-drag: none;
           -moz-user-drag: none;
           -o-user-drag: none;
           user-drag: none;
         }


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
/* Container  */

#container { width: 100%;
             height: 100%;
             display: flex;
             justify-content: center;
             align-items: center;
         
           }

#backcolor { position: absolute;
              width: 100%;
              height: 100%;
              background: rgb(14,112,167);
              background: linear-gradient(315deg, rgba(14,112,167,1) 10%, rgba(28,163,182,1) 35%, rgba(0,212,255,1) 65%, rgba(234,251,252,1) 90%);
              animation: gradient 20s ease infinite;
              background-size: 400% 400%;
              background-attachment: fixed;
          }
#backlight {position: absolute;
              width: 100%;
              height: 100%;
              opacity: 0.5;
              box-shadow: inset 0 0 4em 2em #000;
}

@keyframes gradient {
    0% {
        background-position: 0% 0%;
    }
    50% {
        background-position: 100% 100%;
    }
    100% {
        background-position: 0% 0%;
    }
}


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
/* Logo  */

#logo { width: 60vw;
        height: 34vw; 
        user-select: none;
        user-drag: none;
        animation: float 6s ease-in-out infinite;
        background-image: url("../assets/rtko.png");
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center;
      }


@keyframes float {
  0% {
    -webkit-filter: drop-shadow(10px -10px 5px #00000066);
    filter:         drop-shadow(10px -10px 5px #00000066);     
    transform: translatey(0px);
  }
  50% {
    -webkit-filter: drop-shadow(10px 10px 5px #00000066);
    filter:         drop-shadow(10px 10px 5px #00000066); 
    transform: translatey(-20px);
  }
  100% {
    -webkit-filter: drop-shadow(10px -10px 5px #00000066);
    filter:         drop-shadow(10px -10px 5px #00000066); 
    transform: translatey(0px);
  }
}      


/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
/* Wave  - thanks to Bárbara Rodríguez https://codepen.io/baarbaracrr/pen/KKovmGb */

.wave {
    background: rgb(255 255 255 / 25%);
    border-radius: 1000% 1000% 0 0;
    position: fixed;
    width: 200%;
    height: 20vh;
    animation: wave 10s -3s linear infinite;
    transform: translate3d(0, 0, 0);
    opacity: 0.8;
    bottom: 0;
    left: 0;
    
}

.wave:nth-of-type(2) {
    bottom: -1.25vw;
    animation: wave 18s linear reverse infinite;
    opacity: 0.8;
}

.wave:nth-of-type(3) {
    bottom: -2.5vw;
    animation: wave 20s -1s reverse infinite;
    opacity: 0.9;
}

@keyframes wave {
    2% {
        transform: translateX(1);
    }

    25% {
        transform: translateX(-25%);
    }

    50% {
        transform: translateX(-50%);
    }

    75% {
        transform: translateX(-25%);
    }

    100% {
        transform: translateX(1);
    }
}

/* - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - - -  */
/* Noise  - thanks to Robin Selmer https://codepen.io/robinselmer/pen/vJjbOZ */


#noise { 
         position: absolute;
         width: 100%;
         height: 100%;
         background-image: url(../assets/static_noise.gif);
         left: 0;
         top: 0;
         background-repeat: no-repeat;
         background-size: cover;
         opacity: 0.025;
         animation: noiseforce 20s ease infinite;

       }

@keyframes noiseforce {
    0%   { opacity: 0.025; }
    10%  { opacity: 0.025; }
    20%  { opacity: 0.055; }
    30%  { opacity: 0.025; }
    60%  { opacity: 0.025; }
    70%  { opacity: 0.055; }
    80%  { opacity: 0.025; }
    100% { opacity: 0.025; }
}

#overlay {
  pointer-events: none;
  position: absolute;
  width: 100%;
  height: 100%;
  background:
      repeating-linear-gradient(
      180deg,
      rgba(0, 0, 0, 0) 0,
      rgba(0, 0, 0, 0.3) 50%,
      rgba(0, 0, 0, 0) 100%);
  background-size: auto 4px;
  left: 0;
  top: 0;

}       

#overlay::before {
  content: "";
  pointer-events: none;
  position: absolute;
  display: block;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: 100%;
  background-image: linear-gradient(
      0deg,
      transparent 0%,
      rgba(14,112,167, 0.1) 2%,
      rgba(14,112,167, 0.2) 4%,
      rgba(14,112,167, 0.1) 6%,
      transparent 100%);
  background-repeat: no-repeat;
  animation: scan 7.5s linear 0s infinite;
}

@keyframes scan {
  0%        { background-position: 0 -100vh; }
  55%, 100% { background-position: 0 100vh; }
}