@font-face{
font-family: Haru;
src: url(fonts/Harukaze.ttf);
}
@font-face{
  font-family: Kashima;
  src: url(fonts/Kashima\ Demo.ttf);
}

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

body{
  font-family:Haru;
  background-color:#2d2d2d;
}
p{
  color: white;
  text-shadow: 0px 10px 10px rgba(0,0,0,0.5);
}

.page{
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.container{
  margin: 0;
  position: relative;
}
/* Header*/
.header-text{
  text-align: center;
  padding-top:20px;
  font-size:200px;
}
/* Main */
.main-content{
  text-align: center;
  max-width: 1080px;  
  margin: 0 auto;
}

.main-titles{
  font-size:120px;
  margin-top:100px;
  display:flex;
  justify-content: space-evenly;
  position: relative;
  left: 15px;
}

/* Avatar Images */
.main-body{
  display: flex;
  justify-content: space-evenly;

}

.main-body img{
  width:288px;
  height:288px;
}
.main-body p{
  font-size: 200px;
  padding-top:80px;
  margin:5px;
}

.main-avatar{
  filter: drop-shadow(0px 4px 4px rgba(0,0,0,0.5));
  transform: translatey(0px);
  animation: float 6s ease-in-out infinite;

}
@keyframes float{
  0%{
    filter: drop-shadow(0px 4px 4px rgba(0,0,0,0.5));
    transform: translatey(0px);
  }
  50%{
    filter: drop-shadow(0px 4px 4px rgba(0,0,0,0.5));
    transform: translatey(-20px);
  }
  100%{
    filter: drop-shadow(0px 4px 4px rgba(0,0,0,0.5));
    transform: translatey(0px);
  }
}

.main-enemy{
  filter: drop-shadow(0px 4px 4px rgba(0,0,0,0.5));
  transform: translatey(0px);
  animation: float 6s ease-in-out infinite;

}
@keyframes float{
  0%{
    filter: drop-shadow(0px 4px 4px rgba(0,0,0,0.5));
    transform: translatey(0px);
  }
  50%{
    filter: drop-shadow(0px 4px 4px rgba(0,0,0,0.5));
    transform: translatey(-20px);
  }
  100%{
    filter: drop-shadow(0px 4px 4px rgba(0,0,0,0.5));
    transform: translatey(0px);
  }
}


/* Rock-Paper-Scissors Selection*/
.main-controls{
  display:flex; 
  flex-direction: row;
  justify-content: space-evenly;
  margin:auto;  
}
/* Player Selection */
.player-controls{
  background: #c4c4c4;
  box-shadow: 0px 4px 10px rgba(0,0,0,0.5);
  width: 254px;
  height: 89px;
  padding-top: 15px;
  border-radius: 15px;
  display: flex;
  justify-content: space-evenly;
}
button{
  background-color: transparent;
  background-repeat: no-repeat;
  border:none;
  cursor: pointer;
  overflow: hidden;
  outline: none;
  padding-bottom: 10px;
  padding-right: 5px;
}
button:hover{
  filter: drop-shadow(0px 4px 4px rgba(0,0,0,0.5));
  transform: scale(1.02);
}
.player-controls img{
  width: 64px;
  height: 64px;
}

/* Score Tally */
.main-score{
  font-family: Kashima;
  font-size: 200px;
  position: relative;
  bottom:60px;
}
/* Computer Selection */
.computer-controls{
  background: #c4c4c4;
  box-shadow: 0px 4px 10px rgba(0,0,0,0.5);
  width: 254px;
  height: 89px;
  padding-top: 15px;
  border-radius: 15px;
  display: flex;
  justify-content: space-evenly;
}
.computer-controls img{
  width: 64px;
  height: 64px; 
}
.round-results{
  justify-content: space-evenly;
  position: absolute;
  font-family:Haru;
  align-items: center;
  margin-top:120px;
  color: white;
  font-size:170px;
  text-shadow: 0px 10px 10px rgba(0,0,0,0.5);
}
.reset-btn{
  background: #c4c4c4;
  box-shadow: 0px 4px 10px rgba(0,0,0,0.5);
  text-shadow: 0px 10px 10px rgba(0,0,0,0.5);
  font-family: haru;
  font-size:50px;
  color:white;
  width: 80px;
  height: 50px;
  padding-top: 15px;
  border-radius: 15px;
  margin-left: 30px;
  margin-bottom:10px;
  position: relative;
  left:10px;
  bottom:5px;
  
}


.social-icon img{
  filter: drop-shadow(0px 4px 4px rgba(0,0,0,0.25));
}
.social-icon{
  position: fixed;
  right:0;
  bottom: 0;
}
.social-icon:hover{
  filter: drop-shadow(0px 4px 4px rgba(0,0,0,0.5));
  transform: scale(1.02); 
}

/* Media Queries */


@media (max-width:812px){
  .header-text{
    font-size: 100px;
  }
  .main-titles{
    font-size:60px;
    padding-bottom:10px;
  }
  .main-body img{
    width:144px;
    height:144px;
  }
  .main-body p{
    font-size:70px;
    padding-top:20px;
  }
  .main-controls{
    padding:10px;
    margin-bottom: 80px;
    position: relative;
  }
  .player-controls{
    width:168px;
    height:61px;
  }
  .computer-controls{
    width:168px;
    height:61px; 
  }
  .main-controls img{
    width:43px;
    height:44px;
  }
  .main-controls button{
    position: relative;
    bottom:5px;
  }
  .computer-controls img{
    position: relative;
    bottom:5px;
  }
  .main-score{
    position: absolute;
    font-size: 70px;
    padding-top:40px;
  }
  .round-results{
    font-size:70px;
    margin-top:70px;
    
  }
  .reset-btn{
    position: absolute;
    top:0px;
    margin-top:5px;
  }
  .social-icon img{
    width:45px;
    height:45px;
  }
}