body, h1{
    transition: all 1s;
}

body{
    background: url(img/wallhaven-w8j677.jpg) no-repeat center center fixed; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    background-blend-mode: multiply;
    background-color: rgba(0, 0, 0, 0.591);

    margin: 0;
    padding: 0;
}
.calculator, .main, .screen, .buttons{
    border-radius: 20px;
}

.calculator{
    position: fixed;
    top: 18%;
    left: 60%;
    width: 400px;
    height: 650px;
    /* border: solid 1px purple; */
    box-shadow: 0px 0px 4px purple;   

    backdrop-filter: blur(20px);

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

.main{
    /* border: solid 1px yellow; */
    width: 94%;
    height: 95%;

    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-direction: column;
}

.screen{
    border: solid 0.7px rgba(144, 55, 186, 0.436);   
    box-shadow: 0px 0px 4px rgba(0, 0, 255, 0.474);

    width: 100%;
    height: 20%;
}

.buttons{
    /* border: solid 1px rgb(255, 64, 255); */
    width: 100%;
    height: 78%;

    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    align-items: center;
}

.btn{
    /* width: 77px;
    height: 77px;
    border-radius: 50% 50%; */

    width: 90px;
    height: 77px;
    border-radius: 20px;

    border: solid 1px rgba(115, 115, 115, 0.544);
    background-color: rgba(128, 128, 128, 0.077);
    color: white;

    font-size: 1.35rem;
    font-family: 'Chakra Petch', sans-serif;
    user-select: none;
}

.tools{
    background-color: rgba(128, 128, 128, 0.101);
    border-color: rgba(252, 66, 255, 0.272);
}

#equal{
    border-color: rgba(135,206, 250, 0.424);
}

.btn:hover{
    box-shadow: 0px 0px 10px rgba(25, 163, 255, 0.308);
    border-color: rgb(25, 163, 255);
}

.btn:active{
    box-shadow: 0px 0px 10px rgba(96, 191, 255, 0.308);
    border-color: rgb(136, 207, 255);
}

#anna{
    position: fixed;
    z-index: 2;
    /* border: solid 1px red; */
    width: 25%;
    height: 50vh;
    top: 8%;
    left: 14%;
}

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

#field{
    color: white;
    font-size: 3rem;
    font-family: 'Chakra Petch', sans-serif;
}


#action-field{
    color: white;
    position: fixed;
    top: 5%;
    left: 90%;
}

/* =========== mobile adaptation ======  */

/* @media screen 
and (max-device-width: 500px){
    .calculator{
        top: 5%;
        left: 5%;

    }

} */