.attribution { 
  font-size: 18px; 
  text-align: center; 
  color: hsl(237, 49%, 10%);
  height: 30px;
  margin: 0;
  background-color: white;
  border-top: black solid 2px;
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
}
.attribution a { 
  color: hsl(228, 45%, 44%); 
  text-decoration: none;
  font-weight: 700;
}

body{
  font-family: 'Barlow Semi Condensed', sans-serif;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;

  margin: 0;
  background-color: hsl(237, 49%, 10%) ;
}
h1,p, h2{
  margin: 0;
  padding: 0;
}
.paper:hover,.rock:hover,.scissors:hover {
  cursor: pointer;
  filter: brightness(1.1);
  box-shadow: 0 0 15px white;
  transition: .3s;
}
/* ------------------------------*/

#game {
  display: flex;
  justify-content: center;
  align-items: center;

  position: relative;

  
  width: 510px;
  height: 418px;

}
#choosing .scissors {
  position: absolute;
  top: 0px;
  right: 50px;

  display: flex;
  justify-content: center;
  align-items: center;

  height: 180px;
  width: 180px;
  background: radial-gradient(hsl(39, 89%, 49%),hsl(40, 84%, 53%));
  border-radius: 100px;
  
}
#choosing .paper {
  position: absolute;
  top: 0px;
  left: 50px;

  display: flex;
  justify-content: center;
  align-items: center;

  height: 180px;
  width: 180px;
  background: radial-gradient(hsl(230, 89%, 62%) , hsl(230, 89%, 65%));
  border-radius: 100px;

}
#choosing .rock {
  position: absolute;
  bottom: 40px;
  right: 165px;

  display: flex;
  justify-content: center;
  align-items: center;

  height: 180px;
  width: 180px;
  background: radial-gradient(hsl(349, 71%, 52%),hsl(349, 70%, 56%));
  border-radius: 100px;
}
.holder{

  display: flex; 
  justify-content: center; 
  align-items: center;
  background-color: white; 
  height: 136px; 
  width: 136px; 
  border-radius: 68px;

}
#result{
  display: none;
  justify-content: space-between;
  padding-left: 30px;
  align-items: flex-start;
  flex-direction: row;

  color: white;

  width: 510px;
  height: 418px;

  position: relative;
}

#left-choice {
  position: absolute;
  bottom: 120px;
  left: 0px;

  display: flex;
  justify-content: center;
  align-items: center;

  scale: calc(1.5);

  height: 180px;
  width: 180px;
  background: radial-gradient(hsl(349, 71%, 52%),hsl(349, 70%, 56%));
  border-radius: 100px;
}
#right-choice {
  position: absolute;
  bottom: 120px;
  right: 0px;

  display: flex;
  justify-content: center;
  align-items: center;

  scale: calc(1.5);

  height: 180px;
  width: 180px;
  background: gray;
  border-radius: 100px;

}
#userpick{
  position: absolute;
  bottom: 400px;
  left: 32px;
}
#comppick{
  position: absolute;
  bottom: 400px;
  right: 0px;
}
#play-again{
  display: none;
  justify-content: center;
  align-items: center;

  position: absolute;
  bottom: 180px;
  left: 208px;
  

  height: 40px;
  width: 140px;
  background: white;
  color: hsl(229, 25%, 31%);
  border-radius: 5px;
  letter-spacing: 3px;
  font-size: 13px;
  transition: 3ms;
}
#play-again:hover{
  cursor: pointer;
  opacity: .7;
}
#resultText{
  display: none;

  position: absolute;
  bottom: 230px;
  left: 208px;
  text-align: center;
  font-size: 35px;
}
/*-------------------------*/

main {
  width: 1366px;
  height: 768px;
  background: radial-gradient(hsl(214, 47%, 23%), hsl(237, 49%, 15%));

  display: grid;
  grid-template-rows: 250px 448px 50px;
  row-gap: 0;

  justify-items: center;
  align-items: center;

  box-shadow: 0 0 50px black;

  position: relative;
}
#upper-box{
  width: 40%;
  height: 100px;
  display:flex;
  flex-direction: row;
  justify-content: space-between;

  border: hsl(217, 16%, 45%) solid 3px;
  border-radius: 10px;

  margin: 0;
  padding: 10px 20px 10px 20px;

}
#upper-box h1{
  font-size: 30px;
  color: white;
  font-weight: 700;
  line-height: 1;
}

#scoreboard{
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;

  height: 100%;
  width: 120px;

  border-radius: 10px;

  background: rgb(255, 255, 255);
}
#scoreboard p {
  color: hsl(229, 64%, 46%);
}
#scoreboard h2{
  font-size: 50px;
  line-height: 1;
}
#rules{
  justify-self: end;
  margin-right: 20px;
  align-self: end;

  height: 30px;
  width: 100px;

  display: flex;
  justify-content: center;
  align-items: center;

  font-size: 12px;
  color: white;

  border: hsl(217, 16%, 45%) solid 3px;
  border-radius: 8px;
}
#rules:hover{
  cursor: pointer;
  opacity: 0.8;
}
#rules-screen {
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;

  width: 100%;
  height: 100%;

  display: none;
  justify-content: center;
  align-items: center;

  background-color: rgba(128, 128, 128, .3);

  position: absolute;
  z-index: 1;
}
#rules-screen-div{
  height: 400px;
  width: 400px;
  background: white;

  display: flex;
  justify-content: space-around;
  align-items: center;

  border-radius: 15px;

  flex-direction: column;
}
#rules-screen-title{
  display: flex;
  justify-content: space-between;
  align-items: center;

  color: hsl(229, 25%, 31%);
  font-size: 25px;

  width: 350px;
  
}
#rules-screen button{
  border: 0;
  background: white;
  font-size: 30px;
  font-weight: 700;
  color: rgb(182,185,201);
  margin: 0;
  padding: 0;
  transition: .3s;
}
#rules-screen button:hover{
  cursor: pointer;
  filter: brightness(1.2);
}

@media (min-width: 500px) and (max-width: 780px) {
  #upper-box{
    scale: calc(1);
    
    width: 400px;
  }
  #game{
    scale: calc(1);
  }
  #result{
    scale: calc(.7);
  }
  #rules-screen-div{
    scale: calc(.7);
  }
}
@media (max-width: 500px){
  #upper-box{
    scale: calc(.7);
    width: 400px;
  }
  #game{
    scale: calc(.7);
  }
  #result{
    scale: calc(.4);
  }
  #rules-screen-div{
    scale: calc(.4);
  }
  #rules{
    justify-self: center;
  }
  .attribution{
    font-size: 12px;
  }
}
@media (min-width: 2400px){
  main{
    scale: calc(1.4);
  }
  .attribution{
    font-size: 26px;
  }
}