@font-face {
    font-family: "Roboto";
    src: url("./Roboto-Regular.ttf") format("truetype");
}

body{
    overflow: hidden;
    margin:0;
    padding:0;
}
#page-wrapper{
    height:100%;
    width:100%;
    margin:0px;
    padding:0px;
}
#head1{
    margin:10px;
    text-transform: capitalize;
}
#head2{
    margin:10px;
}
#head-wrapper{
    text-align: center;
    width:100%;
    height:100%;
    display:flex;
    justify-content:center;
    align-items: center;
    flex-flow: column;
    font-family: Roboto;
    font-size: 20px;
    opacity:1;
    transition:2s;
}
.rock{
    top:0;
    left:0;
    width:20px;
    height:20px;
    position:absolute;
}
.paper{
    top:0;
    left:0;
    width:20px;
    height:20px;
    position:absolute;
}
.scissors{
    top:0;
    left:0;
    width:20px;
    height:20px;
    position:absolute;
}
#button{
    font-size: 30px;
    margin:10px;
    border-radius: 25px;
    padding:12px;
    background-color: #333333;
    color:white;
    cursor: pointer;
    transition: 200ms;
}
#button:hover{
    transform: scale(1.05);
}
#currentBest{
    height:200px;
    width: 200px;
    opacity: 0.5;
}
#currentBest-wrapper{
    z-index:-1;
    position: absolute;
    top:0;
    left:0;
    display:flex;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}