ai-invasion.scss

@font-face {
  font-family: 'calculator-font';
  src: url('./calculator-font.woff2') format('woff2'),
    url('./calculator-font.woff') format('woff'),
    url('./calculator-font.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}

/* Text animations for flashing neon lights */

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

html {
  background-color: #0b0014;
}

header {
  display: grid;
  grid-template-columns: 1fr 2fr 1fr;
  grid-template-rows: 1fr;
  background-color: #0b0014;
  height: 15vh;
  width: 100vw;
  font-family: Orbitron;

  #discard {
    background-color: red;
    animation: flash 0.125s 2;
  }

  #keep {
    background-color: yellowgreen;
    animation: flash 0.125s 2;
  }

  div {
    padding: 2% 5% 2% 10%;
    text-align: center;
    height: 100%;
    width: 100%;
    background-color: inhert;

    font-size: 3vmin;
    color: whitesmoke;
  }
}

main {
  height: 77vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
  align-items: center;

  #timer {
    font-family: calculator-font;
    color: yellowgreen;
    font-size: 4vmin;
  }

  section {
    text-align: center;
    position: relative;
    height: 90%;
    width: 90%;
    border: 1px #0b0014 solid;
    background-color: #0b0014;
    font-size: 7vmin;

    span {
      font-family: sans-serif;
      position: absolute;
      width: max-content;
      height: max-content;
      font-size: unset;
      border-radius: 3em;
      animation: blink 3.5s infinite;
    }
  }
}

.jumbotron {
  position: fixed;
  top: 5%;
  left: 0;
  height: 75vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;

  #logo {
    height: 30%;
    width: 40%;
    background-image: url(https://media.giphy.com/media/10tkf2u5HFDGWk/giphy.gif);
    background-size: contain;
    background-position: center;
    background-repeat: no-repeat;
    margin: 15px 0;
  }

  h2 {
    font-size: 8vmin;
    font-family: calculator-font;
    color: red;
  }

  .instructions {
    font-family: 'Orbitron';
    font-size: 3vmin;
    padding: 0 5%;
    color: whitesmoke;
    line-height: 2.5em;
  }
}

footer {
  display: grid;
  grid-template-columns: 1fr 0.3fr 0.7fr 1fr;
  grid-template-rows: 1fr;
  background-color: #0b0014;
  height: 8vh;
  width: 100vw;

  div {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    width: 100%;
    background-color: inherit;
    font-size: 5vmin;
    font-family: calculator-font;
    color: whitesmoke;
  }

  div#player-score {
    font-size: 6vmin;
    text-shadow: 0px 0px 50px red;
  }
}

button,
input {
  font-size: 3vmin;
  border: 0;
  border-radius: 0;
  font-family: orbitron;
  border-radius: 2em;

  &:focus {
    outline: none;
  }
}

@media screen and (max-width: 1080px) {
  main {
    height: 67vh;
  }
}

@keyframes blink {
  0% {
    color: transparent;
  }

  10% {
    color: fuchsia;
  }

  20% {
    color: transparent;
  }

  30% {
    color: #cf0;
  }

  40% {
    color: transparent;
  }

  50% {
    color: red;
  }

  60% {
    color: transparent;
  }

  70% {
    color: #ff8d03;
  }

  80% {
    color: transparent;
  }

  90% {
    color: white;
  }

  100% {
    color: transparent;
  }
}

@keyframes flash {
  0% {
    opacity: 0%;
  }

  5% {
    opacity: 10%;
  }

  10% {
    opacity: 20%;
  }

  15% {
    opacity: 30%;
  }

  20% {
    opacity: 40%;
  }

  25% {
    opacity: 50%;
  }

  30% {
    opacity: 60%;
  }

  35% {
    opacity: 70%;
  }

  40% {
    opacity: 80%;
  }

  45% {
    opacity: 90%;
  }

  50% {
    opacity: 100%;
  }

  55% {
    opacity: 90%;
  }

  60% {
    opacity: 80%;
  }

  65% {
    opacity: 70%;
  }

  70% {
    opacity: 60%;
  }

  75% {
    opacity: 50%;
  }

  80% {
    opacity: 40%;
  }

  85% {
    opacity: 30%;
  }

  90% {
    opacity: 20%;
  }

  95% {
    opacity: 10%;
  }
  100% {
    opacity: 0%;
  }
}