*{
    font-family: 'Times New Roman', Times, serif;
    margin: 0;
    padding: 0;
}

body{
    background-color: #508991;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    align-items: center;
    gap: 2.2rem;
}

header{
    display: flex;
    justify-content: center;
    align-items: center;
}

#heading{
    margin-top: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 4rem;
    width: 30rem;
    background-color: #581908;
    color: #E8F0FF;
    border-radius: 1.25rem;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    border:none;
}

.choices{
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    background-color: #F6E27F;
    height: 12rem;
    width: 50vw;
    border-radius: 1.25rem;
    gap: 4.5rem;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

.choice{
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black;
    height: 8rem;
    width: 8rem;
    border-radius: 50%;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

.pic1{
    background-image: url("../images/rock.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 7.5rem;
    width: 7.5rem;
    border-radius: 50%;
}

.pic2{
    background-image: url("../images/paper.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 7.5rem;
    width: 7.5rem;
    border-radius: 50%;
}

.pic3{
    background-image: url("../images/scissors.png");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    height: 7.5rem;
    width: 7.5rem;
    border-radius: 50%;
}

.score-board{
    height: 10rem;
    display: flex;
    width: 40vw;
    font-size: 3.5vmin;
    justify-content: center;
    align-items: center;
    gap: 10rem;
    color: #E8F0FF;
    background-color: #1C3144;
    border-radius: 1.25rem;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

.score-board ul{
    list-style-type: none;
}

.score-board li{
    margin-top: 1rem;
    margin-bottom: 1rem;
    margin-left: 1rem;
}

.number{
    font-size: 3.5rem;
    margin-left: 1.2rem;
}

#msg, .default-msg{
    padding: 1.5rem;
    font-size: 1.5rem;
    font-weight: bold;
    border-radius: 1.25rem;
    background-color: #581908;
    color: #E8F0FF;
    border: none;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
}

.win{
    padding: 1.5rem;
    font-size: 1.5rem;
    font-weight: bold;
    border-radius: 1.25rem;
    background-color: #279c2b;
    color: #E8F0FF;
    border: none;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease-in-out;
}

.lose{
    padding: 1.5rem;
    font-size: 1.5rem;
    font-weight: bold;
    border-radius: 1.25rem;
    background-color: #c03a3a;
    color: #E8F0FF;
    border: none;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    transition: background-color 0.3s ease-in-out;
}

button{
    cursor: pointer;
}

.choice:hover{
    transform: translateY(-0.5rem);
    box-shadow: 10px 10px 8px rgba(0, 0, 0, 0.5);
}

.choice:active {
    transform: scale(0.9);
    transition: transform 0.1s ease-in-out;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    animation: shake 0.2s ease-in-out;
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    25% { transform: translateX(-5px); }
    50% { transform: translateX(5px); }
    75% { transform: translateX(-5px); }
}


button:active {
    transform: scale(0.9);
    transition: transform 0.1s ease-in-out;
}

#reset {
    padding: 1rem;
    font-size: 1.5rem;
    font-weight: bold;
    border-radius: 1rem;
    background-color: #F6E27F;
    color: black;
    border: none;
    box-shadow: 5px 5px 10px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: background-color 0.2s ease-in-out;
}

#reset:hover {
    background-color: #f2cd16;
}

#reset:active {
    transform: scale(0.95);
}

.comp-selected {
    border: 5px solid red; /* Gold glow */
    box-shadow: 0 0 15px rgba(255, 0, 0, 0.8);
    transition: border 0.2s ease-in-out, box-shadow 0.2s ease-in-out;
}