style.css

*{
    margin: 0;
    padding: 0;
    border: 0;
    font-family: 'Inter',sans-serif;
}
body{
    display: flex;
    justify-content: center;
    height: 100vh;
    align-items: center;
    background: linear-gradient(320deg, #9bb8ff, #87cefa, #76e0ff);

}

main{
    max-width: 400px;
    height: auto;
    margin: 10px 18px;
    padding: 20px;
    background-color: rgba(255, 255, 255, 0.364);
    backdrop-filter: blur(10px); /* Aplica o desfoque no fundo */
    border-radius: 16px;
    box-shadow: 0px 4px 30px #49b9ff90 ;


    
}

.resultado{
    display: flex;
    justify-content:center;
}
.tela{
    display: block;
    width: 332.6px;
    height: 80px;
    background-color: rgba(255, 255, 255, 0.364);
    backdrop-filter: blur(10px);
    border-radius: 16px;
    font-size: 2rem;
    text-align: right;
    margin-bottom: 20px;
    padding: 5px;
    box-shadow: 1px 1px 20px #64c2fc57;
}
.teclado{
    display: flex;
    flex-direction: column;
}

.butn-row{
    display: flex;
}
.butn{
    display: block;
    width: 80px;
    height: 80px;
    margin: 3px;
    border-radius: 16px;
    font-size: 24px;
    text-align: center;
    cursor: pointer;
    transition: all 0.1s ease; 
}
.butn:hover {
    box-shadow: 0 2px 15px rgba(0, 0, 0, 0.3); 
    transform: translateY(-1px); 
}

/* Efeito ao clicar (afundar) */
.butn:active {
    box-shadow: 0 2px 5px #a9adb73f;
    transform: translateY(4px); 
}

.butn-zero{
    width: 167px;
}
.butn-simbolo{
    color: #526cae;
    font-weight: 500;
    box-shadow: 4.5px 2px #a9adb73f ;
}
.butn-igual{
    background-color: #9bb8ff;
    color: white;
}