*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'Poppins';
}

body {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(to right bottom, rgb(0,31,131),rgb(192,0,189));
}

/*Now style the wrapper in the body*/
.wrapper{
    background-color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2.5em; /*gap between each line*/
    border: 3px solid rgb(201,201,201);
    border-radius: 2em; /*round the corners*/
    padding: 5em 3em; /* top and bottom 5em spacing, sides are 3em spacing*/
}
h1{
    font-size: 3em;
}
h3{
    color: #C8A2C8;
    font-size: 2em;
}

/*style the choices div*/
#choices{
    display: flex;
    gap: 1em;
}
#choices button{
    padding: 0.5em 1.2em;
    border-radius: 0.5em;
    font-size: 3em;
    border: 3px solid transparent;
    transition: 0.3s ease-in-out; /*transition buttons in and out when refresh*/
    cursor: pointer;
}
/*make the hover effect*/
#choices button:hover{
    background-color: white;
    border: 3px solid #C8A2C8;
    transform: scale(1.05);
}

/*style both player choice and compute choice*/
#player-choice, #computer-choice{
    font-size: 1.8em;
    font-width: 600;
}

#resultDisplay{
    font-size: 3.5em;
    border: 3px solid #C8A2C8;
    border-radius: 0.5em;
    padding: 10px 50px;
}