*,*::before,*::after{
    box-sizing: border-box;
}
body{
    margin: 0;
    font-family: "Open Sans", sans-serif;
    background-color: rgba(0, 0, 0, 0.822);
    color:aliceblue;
}

.container{
    width:80%;
    margin:0 auto;
    max-width: 900px;
    text-align: center;
}

details{
    border:5px solid rgb(2, 183, 255);
    background-color: rgb(38, 85, 151);
    color:rgb(255, 255, 255);
    border-radius: 10px;
  
}
details summary{
    font-size: 1.6rem;
    cursor: pointer;
    padding:12px
}
details p,details ul {
    font-size: 1.3rem;
}

ul li{
    list-style: none;
}

.score-container{
    display: flex;
    margin-top: 20px;
    justify-content: space-between;
}
.score-container p{
    font-size: 1.2rem;
    font-weight: bold;
}

.btn-container button,.results-container button{
    padding:.65em 1em;
    margin:12px;
    border-radius:5px;
    border:none;
    color:rgba(0, 0, 0, 0.822);
    font-size: 1.2rem;
    cursor: pointer;
    background-color:rgb(2, 183, 255);
}

button:hover{
    opacity: .75;
}

.results-container button{
    background-color: rgb(51, 118, 212);
    color:white;
    font-size: 1.3rem;
    margin:0 auto;
    display: none;

}

.results-container p {
    color:white;
    font-size: 1.3rem;
    
}

@media (max-width:650px) {
   .container h1 {
    font-size: 1.1rem;
   }
   details summary{
    font-size: 1rem;
   }
}