style.css

/* "Icon 'rock-paper-scissors copy.png' created by https://www.freepik.com" */
/* Background SVG created by Matt Lipman at "https://www.svgbackgrounds.com/#flat-mountains" */
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+JP:wght@700&family=Satisfy&display=swap');

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

body {
  margin: 0;
  min-height: 100vh;
  background-color:   #a7ded6;
  font-family: Noto Sans JP, sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #ffffff;
  background-attachment: fixed;
  background-size: cover;
  background-image: linear-gradient(
    to bottom, 
    #eff5ed0f, 
    #e4e4e423), 
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1600 900'%3E%3Cpolygon fill='%23cb669c' points='957 450 539 900 1396 900'/%3E%3Cpolygon fill='%23db4849' points='957 450 872.9 900 1396 900'/%3E%3Cpolygon fill='%23be679c' points='-60 900 398 662 816 900'/%3E%3Cpolygon fill='%23cd6c82' points='337 900 398 662 816 900'/%3E%3Cpolygon fill='%23b05ca7' points='1203 546 1552 900 876 900'/%3E%3Cpolygon fill='%23c09098' points='1203 546 1552 900 1162 900'/%3E%3Cpolygon fill='%23a559a9' points='641 695 886 900 367 900'/%3E%3Cpolygon fill='%23b3a5b2' points='587 900 641 695 886 900'/%3E%3Cpolygon fill='%239156ac' points='1710 900 1401 632 1096 900'/%3E%3Cpolygon fill='%23a8b8c7' points='1710 900 1401 632 1365 900'/%3E%3Cpolygon fill='%237d52b0' points='1210 900 971 687 725 900'/%3E%3Cpolygon fill='%2398ddd5' points='943 900 1210 900 971 687'/%3E%3C/svg%3E");
    position: relative;
    z-index: -1;
}

.header {
  width: 1280px;
  position: absolute;
  top: 0px;
  font-family: Satisfy, Sans-Serif;
  font-size: 25px;
  text-align: center;
}

h2 {
  margin: 20px 50px;
  font-size: 25px;
}

.game-container {
  width: 1280px;
  height: 572px;
  margin-top: 140px;
  padding: 0px;
}

#playercomputercontainer {
  display: flex;
  flex-flow: row nowrap;
  justify-content: center;  
}

.player-container {
  width: 585.33px;
  margin: 20px 0px 50px 220px;
  order: 1;
  flex-grow: 1;
}

#playerScore, #computerScore {
  background-color: #88e1d8;
  font-family: Noto Sans JP, sans-serif;
  color: #fcfcfc;
  padding: 15px 30px;
  margin: 10px;
  border: #fefefe solid 2px;
  border-radius: 50px;
}

.icon-container {
  max-width: 405.33px;
  max-height: 132px;
}

.fas {
  color: #f1fffa;
  font-size: 60px;
  margin: 21.3px;
  padding: 4.1px;
  User-select: none;
}

#player .fas:hover {
  cursor: pointer;
  filter: brightness(102%);
}

.selected {
  color: #f7fefd!important;
  font-size: 100px;
}

#player .choice, #computer .choice {
  color: #fcfcfc !important;
  font-style: italic;
  font-size: 30px;
  font-family: Satisfy, Sans-Serif;
}

.computer-container {
  width: 585.33px;
  margin: 20px 50px 20px 0px;
  order: 2;
  flex-grow: 1;
}

.resultsReset-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

#resultText {
  order: 1;
  flex-grow: 1;
  font-size: 50px;
  margin: 0px 0px 5px;
  text-align: center;
  color: rgb(254, 254, 254);
}

.btn:link, .btn:visited {
  order: 2;
  text-transform: uppercase;
  text-decoration: none;
  padding: 10px 30px;
  display: inline-block;
  border-radius: 100px;
  transition: all .2s;
  position: relative; 
}

.btn:hover {
  transform: translateY(-3px);
  filter: brightness(102%);
  box-shadow: 0 5px 10px rgba(0,0,0,.2);
}

.btn:active {
  transform: translateY(-1px);
}

.btn-white {
  background-color: #a9baba;
  font-family: Noto Sans JP, sans-serif;
  color: #fefefe;
  border: #fcfcfc solid 3px;
}

.btn::after {
  content: "";
  display: inline-block;
  height: 100%;
  width: 100%;
  border-radius: 100px;
  position: absolute;
  top: 0;
  left: 0;
  z-index: -1;
  transition: all .4s; 
}

/* Media Query: Large Smartphone (Vertical) */
@media screen and (max-width: 600px) {
  .header{
    width: 100%;
    font-size: 15px;   
  }

  .game-container {
    width: 100%;
    height: 0%;
    margin-top: 0px;
  }

  #playercomputercontainer{
    flex-flow: column nowrap;
  }
  
  .player-container h2 {
    margin: 20px 20px;
    font-size: 30px;
  }
  
  .computer-container h2{
    margin: 20px 20px 20px 10px;
    font-size: 27px;
  }
  
  .selected{
    font-size: 70px;
  }
  
  button{
    margin: 20px;
  }
  

  .player-container {
    width: 411px;
    margin: 20px 0px 50px 20px;
  }

  .computer-container{
    width: 411px;
    margin: 20px 50px 20px 0px;
  }

  #resultText{
    font-size: 30px;
  }
  
}

/* Media Query: iPhone (Vertical) */
@media screen and (max-width: 376px) {
  .header{
    width: 90%;
    position: absolute;
    font-size: 20px;
  } 

  .game-container {
    width: 376px;
    height: 500px;
    margin-top: 0px;
  }

  .player-container h2 {
    margin: 20px 30px;
    font-size: 30px;
  }
  
  .computer-container h2{
    margin: 20px 10px;
    font-size: 27px;
  }

  .player-container{
    width: 374px;
    margin: 20px 0px 40px;
  }

  .computer-container{
    width: 374px;
    margin: 20px 0px;
  }
  .selected{
    font-size: 80px;
  }
  
  .resultsReset-container{
    width: 376px;
  }

  #resultText{
    font-size: 30px;
  }
}