:root{
    --whiteColor: #f8fafc;
    --blackColor: #020617;
}

body{
    background-color: var(--whiteColor);
    color: var(--blackColor);
    border-color: var(--blackColor);
    transition: 0.3s;
}

#calculadora.temaClaro{
    border-color: var(--whiteColor);
}

#painelResultado.temaClaro{
    border-color: var(--whiteColor);
}

.temaEscuro{
    background-color: var(--blackColor);
    color: var(--whiteColor);
    border-color: var(--whiteColor);
}

.botaoAzul{
    padding: 1rem; 
    border-radius: 0.25rem; 
    border-width: 1px; 
    border-color: #60A5FA; 
    font-size: 1.25rem;
    line-height: 1.75rem; 
    font-weight: 700; 
    color: #ffffff; 
    background-color: #60A5FA; 
    transition: 0.5s;
}

.botaoAzul:hover{
    background-color: #93c5fd;
    border-color: #93c5fd;
}

.botaoVerde{
    padding: 1rem; 
    border-radius: 0.25rem; 
    border-width: 1px; 
    border-color: #4ade80; 
    background-color: #4ade80; 
    transition: 0.5s ;
}

.botaoVerde:hover{
    background-color: #86efac;
    border-color: #86efac;
}


#tema{
    transition: 0.8s;
}

#tema:hover{
    transform: scale(1.15);
}