style.scss

@import url("https://use.typekit.net/qmn8uyu.css");

$red: #BF3F3F;
$blue: #314A59;
$yellow: #D9A23D;
$white: #fff;
$black: #000;

html {
  box-sizing: border-box;
}

body {
  margin: 0;
  min-height: 100vh;

  font-family: puffin-arcade-liquid,sans-serif;
  font-weight: 800;
  font-style: normal;
  display: flex;
  justify-content: center;
  align-items: center;
}

.fa-regular {
  font-size: 60px;
  margin: 0 30px;
  User-select: none;
}

h2 {
  margin-left: 30px;
  margin-bottom: 20px;
}

.game-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 2px solid $blue;
  background-image: linear-gradient(to right bottom, rgba(191, 63, 63, 0.3), rgba(173, 59, 99, 0.3), rgba(140, 68, 122, 0.3), rgba(99, 77, 128, 0.3), rgba(64, 79, 117, 0.3), rgba(39, 89, 122, 0.3), rgba(10, 98, 120, 0.3), rgba(13, 105, 111, 0.3), rgba(28, 127, 106, 0.3), rgba(83, 146, 86, 0.3), rgba(146, 159, 63, 0.3), rgba(217, 162, 61, 0.3));
  box-shadow: rgba(0, 0, 0, 0.45) 0px 25px 20px -20px;
  .header {
    background: $blue;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1rem 3rem;
    h1 {
      font-size: 40px;
      color: $yellow;
      letter-spacing: 2px;;
    }
  }
  .footer {
    margin-top: 20px;
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    width: 100%;
    padding: 2rem 1rem;
    background-color: $blue;
    box-sizing: border-box;
    .fa-solid {
      font-size: 34px;
      color: $yellow;
      cursor: pointer;
      text-align: left;
      &:hover {
        color: $red;
      }
    }    
    .result-container {
      .result-text {
        font-size: 40px;
        color: $yellow;
        margin: unset;
      }
    }
  }
}

.player-container {
  margin: 50px;
  .choice {
    color: $red;
  }
  .fa-regular {
    color: $red;
    cursor: pointer;
    &:hover {
      color: $yellow;
    }
  }
}

.computer-container {
  margin: 50px;
  .choice {
    color: $blue;
  }
  .fa-regular {
    color: $blue;
    transform: scaleX(-1);
  }
}

canvas {
  position: absolute;
}

.selected {
  color: $white !important;
}

/* Media Query: Large Smartphone (Vertical) */
@media screen and (max-width: 768px) {
  .game-container {
    .header {
      box-sizing: border-box;
      width: 100%;
      h1 {
        font-size: 24px;
        text-align: center;
      }
    }
    .footer {
      .result-container {
        .result-text {
          font-size: 28px;
        }
      }
    }
  }

  .player-container, .computer-container {
    margin: 30px;
    text-align: center;
  }

  .fa-regular {
    margin: 30px;
  }


}

/* Media Query: iPhone (Vertical) */
@media screen and (max-width: 410px) {
  .fa-regular {
    font-size: 50px;
    margin: 20px;
  }
}