/* FONTS */
@font-face {
    font-family: LemonMilk;
    src: url(../../fonts/LemonMilk/LEMONMILK-Regular.otf);
}
@font-face {
    font-family: LemonPro;
    src: url(../../fonts/LemonMilkPro/Lemon\ Milk\ Pro\ Regular.otf);
}
@font-face {
    font-family: Beyonders;
    src: url(../../fonts/Beyonders/Beyonders.otf);
}


/* NAVIGATION */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  background: rgb(0, 0, 0);
  font-family: Beyonders;
}

/* NAV BAR CONTAINER */
.navbar {
  display: flex;
  align-items: center;
  justify-content: space-between;

  padding: 20px 30px;
  margin: 20px;
}

/* NAV BUTTONS */
.nav-btn {
  position: relative;

  color: white;
  text-decoration: none;
  font-size: 10px;
  font-family: Beyonders;

  padding: 8px 18px;
  border-radius: 999px;          /* pill */

  background: black;             /* inner fill */
  z-index: 0;
}

/* GRADIENT FRAME */
.nav-btn::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 999px;

  background: linear-gradient(
    to top,
    #FFFF80,
    #80FFFF
  );

  z-index: -2;
}

/* CUT OUT THE CENTER */
.nav-btn::after {
  content: "";
  position: absolute;
  inset: 3px;                    /* frame thickness */
  border-radius: 999px;

  background: black;
  z-index: -1;
}

/* HOVER */
.nav-btn:hover {
  background-color: rgb(0, 10, 39);
  box-shadow:
    0 0 13px #8dbfff,
    inset 0 0 6px #fad763;

  filter: hue-rotate(40deg) brightness(1.2);
}

/* LOGO */
.logo {
  height: 48px;
  width: auto;
  padding: 0 30px;
}

/* COMING SOON */
/* RESET */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    height: 100%;
    overflow: hidden;
    background: #000;
}

/* BACKGROUNDS */

.backgrounds {
    position: fixed;
    inset: 0;
    z-index: 1;
}

.bg {
    position: absolute;
    inset: 0;

    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    opacity: 0;
}

/* DESKTOP IMAGES */

.bg-pink {
    background-image: url("images/LOADING/BGPINK.png");
    animation:
        bgPink 45s infinite,
        bgMove 38s ease-in-out infinite,
        glitchFlash 8s infinite;
}

.bg-silver {
    background-image: url("images/LOADING/BGSILVER.png");
    animation:
        bgSilver 45s infinite,
        bgMove 43s ease-in-out infinite,
        glitchFlash 8s infinite;
}

.bg-yellow {
    background-image: url("images/LOADING/BGYELLOW.png");
    animation:
        bgYellow 45s infinite,
        bgMove 47s ease-in-out infinite,
        glitchFlash 8s infinite;
}

/* IMAGE SWITCHING */

@keyframes bgPink {

    0%, 30% {
        opacity: 1;
    }

    32% {
        opacity: .3;
    }

    34% {
        opacity: 1;
    }

    36%, 100% {
        opacity: 0;
    }
}

@keyframes bgSilver {

    0%, 30% {
        opacity: 0;
    }

    33%, 63% {
        opacity: 1;
    }

    65% {
        opacity: .3;
    }

    67% {
        opacity: 1;
    }

    69%, 100% {
        opacity: 0;
    }
}

@keyframes bgYellow {

    0%, 63% {
        opacity: 0;
    }

    66%, 96% {
        opacity: 1;
    }

    98% {
        opacity: .3;
    }

    100% {
        opacity: 1;
    }
}

/* SUBTLE GLITCH FLICKER */

@keyframes glitchFlash {

    0%, 95%, 100% {
        filter: brightness(1);
    }

    96% {
        filter: brightness(1.15);
    }

    97% {
        filter: brightness(0.85);
    }

    98% {
        filter: brightness(1.1);
    }

    99% {
        filter: brightness(1);
    }
}

/* SCANLINES */

.scanlines {
    position: fixed;
    inset: 0;

    z-index: 9999;
    pointer-events: none;

    background: repeating-linear-gradient(
        to bottom,
  rgba(96, 8, 104, 0.5) 0px,
        rgba(116, 15, 119, 0.5) 1px,

        rgba(12, 93, 160, 0.363) 2px,
        rgba(60, 196, 48, 0.2) 3px,
        transparent 4px,
        transparent 8px
    );

    background-size: 100% 8px;

    animation: scanMove 20s linear infinite;
}
@keyframes scanMove {
    from {
        background-position-y: 0px;
    }

    to {
        background-position-y: 80px;
    }
}

@keyframes scanner {
    from {
        transform: translateY(-150px);
    }

    to {
        transform: translateY(100vh);
    }
}


/* MOBILE IMAGES */

@media (max-width: 768px) {

    .bg-pink {
        background-image: url("images/LOADING/MOBILEBGPINK.png");
    }

    .bg-silver {
        background-image: url("images/LOADING/MOBILEBGSILVER.png");
    }

    .bg-yellow {
        background-image: url("images/LOADING/MOBILEBGYELLOW.png");
    }

}