@media screen and (max-width: 1344px) {
  html {
    font-size: 56.25%;
  }
  .main {
    max-width: 85%;
    margin: 3.6rem auto;
  }
  .container {
    max-width: 50%;
    margin: 0 auto;
  }

  .reset-btn {
    font-size: 2.2rem;
  }

  .scoreboard {
    padding: 0 4.8rem 1.6rem 4.8rem;
  }

  .score-bg {
    width: 16rem;
    font-size: 2.6rem;
  }

  .message {
    padding-bottom: 2.4rem;
  }

  .selected-img {
    margin-bottom: 4.8rem;
  }

  .game-options {
    display: flex;
  }
  .img-size {
    width: 34rem;
    height: 22rem;
  }
}

@media screen and (max-width: 1024px) {
  html {
    font-size: 50%;
  }
  .main {
    max-width: 80%;
    max-height: 20%;
    margin: 4.5rem auto;
  }
  .scoreboard {
    padding: 0 4.8rem 1.8rem 4.8rem;
  }

  .message {
    padding-bottom: 3.6rem;
  }

  .selected-img {
    /* padding-bottom: 6.4rem; */
    gap: 10.4rem;
  }

  .img-size {
    width: 40rem;
    height: 26rem;
  }

  .reset-btn {
    font-size: 2rem;
  }
  .game-options {
    margin: 1.2rem 0 2.4rem 0;
  }
}

@media screen and (max-width: 912px) {
  html {
    font-size: 50%;
  }
  .main {
    max-width: 80%;
    max-height: 20%;
    margin: 4.5rem auto;
  }
  .scoreboard {
    padding: 0 4.8rem 1.8rem 4.8rem;
  }

  .message {
    padding-bottom: 3.6rem;
  }

  .selected-img {
    /* padding-bottom: 6.4rem; */
    gap: 7.4rem;
  }

  .img-size {
    width: 40rem;
    height: 26rem;
  }

  .reset-btn {
    font-size: 2rem;
  }
  .game-options {
    margin: 1.2rem 0 2.4rem 0;
  }
}

@media screen and (max-width: 804px) {
  html {
    font-size: 50%;
  }

  .scoreboard {
    padding: 0 4.8rem 1.8rem 4.8rem;
  }

  .message {
    padding-bottom: 3.6rem;
  }

  .selected-img {
    /* padding-bottom: 6.4rem; */
    gap: 7.4rem;
  }

  .img-size {
    width: 40rem;
    height: 26rem;
  }

  .reset-btn {
    font-size: 2rem;
  }
  .game-options {
    margin: 1.2rem 0 2.4rem 0;
  }
}

@media screen and (max-width: 768px) {
  .main {
    max-width: 90%;
    margin: 3rem auto;
  }
  .head {
    flex-direction: column;
  }
  .logo {
    font-size: 3.6rem;
    margin-bottom: 0.8rem;
  }
  .scoreboard {
    padding: 0 6.8rem 2.4rem 6.8rem;
  }

  .message {
    padding: 0 0 4.8rem 0;
  }

  .img-size {
    width: 32rem;
    height: 22rem;
  }
}

@media screen and (max-width: 448px) {
  .head {
    flex-direction: column;
  }

  .logo {
    font-size: 2.4rem;
    margin-bottom: 1.6rem;
    letter-spacing: none;
    word-spacing: none;
  }
  .l-rock::first-letter {
    font-size: 3.8rem;
  }
  .l-paper::first-letter {
    font-size: 3.8rem;
  }
  .l-scissors::first-letter {
    font-size: 3.8rem;
  }
  .reset-btn {
    font-size: 1.8rem;
    padding: 0.8rem 1.6rem;
    border-radius: 4px;
  }

  .scoreboard {
    padding: 0 9.8rem 4.2rem 9.8rem;
    gap: 3.2rem;
  }
  .score-bg {
    width: 13rem;
    font-size: 2.2rem;
  }
  .player-score {
    font-size: 2.2rem;
  }

  .computer-score {
    font-size: 2.2rem;
  }

  .message {
    padding: 0 4.8rem 4.8rem 4.8rem;
    font-size: 2.2rem;
  }
  .selected-img {
    flex-direction: column;
    gap: 2.4rem;
  }
  .game-options {
    margin: 2.4rem auto;
  }
  .option {
    width: 11rem;
    padding: 1.6rem 3.2rem;
  }
}

@media screen and (max-width: 368px) {
  .head {
    flex-direction: column;
  }
  .logo {
    font-size: 2.2rem;
    margin-bottom: 1.6rem;
    letter-spacing: none;
    word-spacing: none;
  }
  .l-rock::first-letter {
    font-size: 3.6rem;
  }
  .l-paper::first-letter {
    font-size: 3.6rem;
  }
  .l-scissors::first-letter {
    font-size: 3.6rem;
  }

  .reset-btn {
    font-size: 1.6rem;
    padding: 0.8rem 1.6rem;
    border-radius: 4px;
  }

  .scoreboard {
    gap: 2.2rem;
  }
  .score-bg {
    width: 12rem;
    font-size: 1.8rem;
  }
  .player-score {
    font-size: 1.8rem;
  }

  .computer-score {
    font-size: 1.8rem;
  }

  .message {
    padding: 0 4.8rem 4.8rem 4.8rem;
    font-size: 2rem;
  }
  .selected-img {
    margin-bottom: 0 0 2.4rem 0;
    flex-direction: column;
    gap: 1.8rem;
  }
  .img-size {
    width: 26rem;
    height: 16rem;
  }

  .game-options {
    margin: 1.6rem auto;
  }
  .option {
    width: 10rem;
    padding: 1.2rem 2.4rem;
  }
}