*{
    font-family: monospace;
}

body {
    background-image: url('bg-image.png');
    background-position: cover;
    height:100vh;
    width:100vw;
    display: flex;
    align-items: center;
    justify-content: center;
    margin:0;
    padding:0;
    flex-direction: column;
}


#flames{
    width:40vw;
    height:40vh;
    backdrop-filter: blur(0px) saturate(180%);
    -webkit-backdrop-filter: blur(0px) saturate(180%);
    background-color: rgba(255, 255, 255, 0);
    border-radius: 12px;
    border: 1px solid rgba(209, 213, 219, 0.3);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap:20px;
    margin:20px;
    padding:20px;
}

input{
    border-radius: 50px;
    height:20px;
    text-align: center;
}

#head{
    font-size: 40px;
    color:black;
    font-weight:600;
    background-color: rgba(255, 255, 255, 0.589);
    border-radius: 50px;
}

#result{
    border-radius: 50px;
    height:25px;
}

label{
    font-size: 30px;
    font-weight: 600;
    background-color: rgba(255, 255, 255, 0.589);
    border-radius: 50px;
}


#result:hover{
    background-color: black;
    color:white;
}

#ans{
    width:40%;
    height:40px;
    border-radius: 50px;
    border:3px solid black;
    text-align: center;
    font-size: 25px;
}

@media (max-width:768px){
    body{
        background-image: url(mobile-bg-image.png);
        background-position: center;
        background-size: contain;
        background-repeat: repeat; 
    }
    #flames{
        width:100%;
    }
    #head{
        font-size:20px;
    }
    label{
        font-size: 10px;
    }
}