html, body {
    height: 100%;            
    margin: 0;              
}

body {
    background-color: #0d0c10;
    color: #f0f8ff;
    display: grid;         
    place-items: center;     
}

.rps-game-container {
    border: 0.2rem solid rgba(137, 43, 226, 0.77);
    box-shadow: 0.1rem 0.1rem 3rem 0.2rem rgba(154, 51, 250, 0.254);
    border-radius: 15vh;
    width: 75vw;
    background-color: #111014;
    padding: 2vh;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;

}

.header-instructions {
    font-family: 'Courier New', Courier, monospace;

}

.header-instructions h1 {
    font-size: 4rem;
    margin-bottom: 1px;
}

.paper-btn, .rock-btn, .scissor-btn {
    width: 7.5vw;
    aspect-ratio: 1 / 1; 
    background: none;    
    border: none;      
    padding: 0;        
    cursor: pointer;
    filter: drop-shadow(0.2rem 0.2rem 1rem rgba(154, 51, 250, 0.175)); 
    display: inline-flex;
    justify-content: center;
    align-items: center;
}

.player-choice button img {
    width: 100%;
    height: 100%;
    object-fit: contain; 
}


.paper-result, .rock-result, .scissor-result {
    width: 15vw;
    cursor: pointer;
}

.result-display {
    font-family: 'Courier New', Courier, monospace;
    font-size: 3rem;
    font-weight: bold;
}

.paper-result, .rock-result, .scissor-result {
    display: none;
}

.show {
    display: inline-block;
}

.score-display {
    font-size: 1.75rem;
}
.greenText, #player-score-display {
    color: chartreuse;
}

.redText, #computer-score-display {
    color: crimson;
}
.tieText {
    color: rgb(106, 182, 248);
}