@import url('https://fonts.googleapis.com/css2?family=Caveat:wght@400;700&family=Indie+Flower&family=Satisfy&display=swap');

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box; 
    font-family: 'Caveat', cursive;
}

body {
    background-image: url(bcc.jpg);
    background-position: top;
    background-repeat: no-repeat;
    background-size:cover;
}

#input {
    position: absolute;
    top: 60%;
    left: 50%;
    transform: translate(-50%,-50%);  
    width: 25%;
    border-radius: 5px;
    border-style: none;
    box-shadow: 0  3px 20px rgb(150, 147, 147);
    text-align: center;
    padding: .6rem;
    font-size: 2rem;
    transition: 0.5s; 
    outline: none;
    text-transform: lowercase;
}

input[type=text]:focus {
    background-color: rgb(235, 226, 233);
}

#submit {
    position: absolute;
    bottom: 24%;
    left: 50%;
    transform: translateX(-50%);
    width: 10rem;
    padding: .75rem;
    border-style: none;
    cursor: pointer;
    font-weight: bold;
    color: rgb(59, 59, 59);
    font-size: 1.5rem;
    border-radius: 5px;

}

#submit:hover {
    background-color: rgb(238, 189, 238);
}

#submit:focus {
    border: 3px solid rgb(94, 90, 90);
    border-radius: 5px;    
}

#show {
    position: absolute;
    width: 30%;
    height: 8rem;
    bottom: 30px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 3rem;
    font-weight: bolder;
    text-shadow: 0 0 2px #f83636;
    text-align: center;
}


#question {
    /* border-radius: 50%; */
    position: absolute;
    left: 50%;
    top: 2rem;
    transform: translateX(-50%);
    width: 10rem;
    font-size: 4rem;
    border:double 10px rgb(247, 230, 230);
    padding: .7rem;
    background-color: rgb(15, 14, 14);
    color: blanchedalmond;
    text-align: center;

}

.lable {
    position: absolute;
    right: 6rem;
    top: 2.5rem;
    font-size: 2rem;
}
.score {
    position: absolute;
    right: 5rem;
    top: 5rem;
    width: 6rem;
    height: 6rem;
    font-size: 3rem;
    border:double 10px rgb(247, 230, 230);
    background-color: rgb(15, 14, 14);
    color: blanchedalmond;
    text-align: center;
    border-radius: 50%;
}