/*
dark mode - #151515
rock- 48b8d0
paper- c14953
scissor- 7a6563

font - heading : e5e8b6
*/

*{
    margin:0px;
    padding:0px;
}
body{
    background-color: #151515;
}
h1{
    text-align: center;
    color:#e5e8b6;
    margin-top:20px;
    font-size:50px;
    font-variant: small-caps;
}
.game-buttons{
    padding:20px;
    border-radius: 100%;
    height:225px;
    width: 225px;
    margin: 25px 100px;
    border:none
}
#button-container{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.game-buttons:hover {
    border: 10px solid white;
}
.game-buttons:focus {
    border: 10px solid white;
}
#rock{
    background-image: url(./assets/fist.png);
    background-size: contain;
    width:150px;
    height: 150px;
}
#rock-button{
    background-color: #f40000;
    display: flex;
    align-items: center;
    justify-content: center;
}
#paper{
    background-image: url(./assets/paper.png);
    background-size: contain;
    width:150px;
    height: 150px;
}
#paper-button{
    background-color: #9ae19d;
    display: flex;
    align-items: center;
    justify-content: center;
}
#scissor{
    background-image: url(./assets/scissor.png);
    background-size: contain;
    width:150px;
    height: 150px;
}
#scissor-button{
    background-color: #f8f32b;
    display: flex;
    align-items: center;
    justify-content: center;
}
#score-container {
    display: flex;
    flex-direction: row;
    justify-content: space-evenly;
}
.score-box {
    height:100px;
    width: 100px;
    background-color: white;
    border:5px solid white;
}
#playerscore,#pcscore{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}
.score-head {
    margin-top:20px;
    font-size:30px;
    font-variant: small-caps;
    color:#e5e8b6;
}
#player-box,#pc-box{
    font-size:75px;
    text-align: center;
    color:#f40000;
}
#pick{
    text-align: center;
    margin-top:60px;
}
#text{
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: center;
}
#text-box{
    width:500px;
    height:50px;
    text-align: center;
    justify-content: center;
    font-size: 20px;
    color:#e5e8b6;
    
}
#pick-button{
    padding:15px;
    font-size: 35px;
    font-variant: small-caps;
    font-weight: bold;
    background-color: #dbe4ee;
    border:none;
    color:#211a1d;
    border-radius: 10px;
}
#pick-button:hover{
    outline: 5px solid white;
}

#new-button{
    padding:15px;
    font-size: 35px;
    font-variant: small-caps;
    font-weight: bold;
    background-color: #dbe4ee;
    border:none;
    color:#211a1d;
    border-radius: 10px;
}
#new-button:hover{
    outline: 5px solid white;
}

@media only screen and (max-width:620px){
    #button-container{
        display: grid;
        grid-template-columns:auto auto;
        column-gap: 0px;
    }
    .game-buttons{
        padding:20px;
        border-radius: 100%;
        height:140px;
        width: 140px;
        margin: 25px;
        border:none;
    }
    #rock{
        background-image: url(./assets/fist.png);
        background-size: contain;
        width:80px;
        height: 80px;
    }
    #rock-button{
        background-color: #f40000;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #paper{
        background-image: url(./assets/paper.png);
        background-size: contain;
        width:80px;
        height: 80px;
    }
    #paper-button{
        background-color: #9ae19d;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    #scissor{
        background-image: url(./assets/scissor.png);
        background-size: contain;
        width:80px;
        height: 80px;
    }
    #scissor-button{
        background-color: #f8f32b;
        position:relative;
        left:50%;
    }
    #pick-button{
        padding:15px;
        font-size: 35px;
        font-variant: small-caps;
        font-weight: bold;
        background-color: #dbe4ee;
        border:none;
        color:#211a1d;
        border-radius: 10px;
    }
    #new-button{
        padding:15px;
        font-size: 35px;
        font-variant: small-caps;
        font-weight: bold;
        background-color: #dbe4ee;
        border:none;
        color:#211a1d;
        border-radius: 10px;
        margin:40px 0px;
    }
}