*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Press Start 2P', cursive;
    background: linear-gradient(to bottom, #9929EA 0%, #CC66DA 50%, #FAEB92 100%);
}

header{
    background-color: none;
    color: none;
    height: auto;
    text-align: center;
    padding: 0vmin;
}
.container{
    border-radius: 10px;
    padding: 0px;
    height: 60vmin;
    width: 100vmin;
    margin: 0px auto;
    margin-bottom: 0%;
    display: flex;
    flex-direction: column; 
    align-items: center;
    justify-content: center;
    margin-top: 0%;
}
.game{
    display: flex;
    flex-direction: column;
    align-items: center;
    width: 100%;
}
.choices-container{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 0;
    width: 100%;
    height: 32vmin;
    position: relative;
}   
button{
    border: none;
    border-radius: 50%;
    padding: 0;
    font-size: 3vmin;
    cursor: pointer;
    width: 20vmin;
    height: 20vmin;
    background: linear-gradient(145deg, #9929EA 0%, #CC66DA 60%, #FAEB92 100%);
    box-shadow: 0 6px 16px rgba(153,41,234,0.25), 0 2px 4px rgba(204,102,218,0.15), 0 1.5px 0 #FAEB92 inset;
    transition: box-shadow 0.2s, transform 0.2s;
    grid-column: span 1;
    grid-row: span 1;
}
button:active {
    box-shadow: 0 2px 6px rgba(40,44,52,0.18), 0 1px 0 #3a8ec7 inset;
    transform: translateY(2px);
}
button .fa-solid {
    width: 100%;
    height: 100%;
    font-size: 6vmin; 
    display: flex;
    align-items: center;
    justify-content: center;
}
button#rock {
    grid-column: 2;
    grid-row: 1;
    justify-self: center;
    align-self: end;
}
button#paper {
    grid-column: 1;
    grid-row: 2;
    justify-self: start;
    align-self: start;
}
button#scissors {
    grid-column: 3;
    grid-row: 2;
    justify-self: end;
    align-self: start;
}
.score {
    display: flex;
    justify-content: center;
    align-items: center;
    height: auto;
    width: 60vmin;
    margin: auto;
    background: none;
    color: #FAEB92;
    font-size: 2.5vmin;
    padding: 1.5vmin 3vmin;
    border-radius: 2vmin;
    box-shadow: 0 2px 8px rgba(153,41,234,0.15);
}  
.score-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 18vmin;
    background: transparent;
    margin: 0%;
    margin-top: 0%;
}
.score-container h2 {
    margin: 0%;
    color: #000000;
    font-size: 4vmin;
    width: 100%;
    height: 20vmin;
    margin-top: 0%;
}
.player-score {
    align-self: flex-start;
    text-align: left;
    color: #000000;
    font-size: 2.5vmin;
    margin-right: auto;
}
.computer-score {
    align-self: flex-end;
    text-align: right;
    color: #000000;
    font-size: 2.5vmin;
    margin-left: auto;
}
.reset {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 10vmin;
    margin-top: 2vmin;
}
.reset-button {
    background-color: #9929EA;
    color: #000000;
    font-size: 2.5vmin;
    padding: 1vmin 2vmin;
    height: 10vmin;
    border: none;
    font-family: 'Press Start 2P', cursive;
    border-radius: 5px;
    cursor: pointer;
    box-shadow: 0 4px 8px rgba(153,41,234,0.25);
    transition: background-color 0.3s, transform 0.2s;
}