:root{
    --body-fundo: linear-gradient(to right, #2c3e50, #bdc3c7);
    --calculadora:rgba(0, 0, 0, 0.7);
    --displayInput:#a8a7a7;
    --areaBnt:rgba(15, 15, 15, 0.3);
    --areaBntBorda:1px solid rgba(255, 255, 255,0.6);
    --botoes: rgb(54, 52, 52); 
    --botoesHover:rgb(71, 69, 69);
    --botaoBlue:rgb(0, 162, 255);
    --botaoBlueHover:rgb(73, 182, 245);
    --bntDarkBlue: blue;
    --bntDarkBlueHover:rgb(53, 53, 250);
    --bntGreen:green;
    --bntGreenHover: rgb(2, 155, 2);
    --bntDesliga:rgb(168, 15, 15);
    --bntDesligaHover:rgb(163, 34, 34);
    --sombraInterna:inset 0 6px 6px rgb(0, 0, 0);
    --fontBnt:#ffffff;
    --fontText: #000;
    --bordaCalculadora:1px solid rgba(221, 213, 213, 0.5);
    --sombraCalculadora:-3px 10px 10px;
    --sombraBntLigDesl:-3px 5px 10px rgba(0, 0, 0, 0.685);
    --sombraInternaBntLigDesl:inset -3px 5px 10px rgba(0, 0, 0, 0.685);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: "Roboto", sans-serif;
    /* letter-spacing para controlar os espaço entre os digitos */
    letter-spacing: 1px;

}

body{
    background: var(--body-fundo);
    height: 100vh;
    background-size: cover;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    
}

h1{
    text-align: center;
    padding: 1rem;
}
.paragrafo{
    color: var(--fontBnt);
}

.fundo-tabela {

    background-color: var(--calculadora);
    border-radius: 10px;
    box-shadow: var(--sombraCalculadora);
    border: var(--bordaCalculadora);
    display: flex;
    justify-content: center;
    width: 18.75rem;
    flex-direction: column;
    align-items: center;

}
.cabecalhoTabela{
    width: 17.5rem;
    text-align: center;
}
.tabela-digitos{
    margin: 0.938rem;
    padding: 0.938rem;
    border: var(--areaBntBorda);
    border-radius: 10px;
    background-color: var(--areaBnt);
}

#inputCampo {
    margin: 5px;
    border-radius: 10px;
    height: 3.438rem;
    width: 16.563rem;
    outline: none;
    text-align: right;
    box-shadow: var(--sombraInterna);
    font-size: 1.5rem;
    background-color: var(--displayInput);
    color: var(--fontText);
    padding-right: 5px;
}


.botao {
    background-color: var(--botoes);
    width: 3.125rem;
    height: 3.125rem;
    color: var(--fontBnt);
    border-radius: 50%;
    border: none;
    cursor: pointer;
    margin: 3px;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    padding: 0;
    letter-spacing: 0;
}

.botao:hover {
    background-color: var(--botoesHover);
}

.botao:active {
    border-radius: 20%;
    transform: translateY(2px);
}
.bnt-paragrafo{
    display: flex;
    align-items: center;
    text-align: center;
    justify-content:space-between;
    margin: 10px;

}

.ligDesl{
    
    display: flex;
    justify-content: end;
    gap: 10px;
    padding-top: 8px;
}
.bnt-liga{
    background-color: var(--bntGreen);
}
.bnt-liga:hover{
    background-color: var(--bntGreenHover);
}
.bnt-desliga{
    background-color: var(--bntDesliga);
}
.bnt-desliga:hover{
    background-color: var(--bntDesligaHover);
}
.bnt-liga, .bnt-desliga{
    border-radius: 10px;
    padding: 5px;
    color: var(--fontBnt);
    font-size:7pt;
    border: none;
    box-shadow: var(--sombraBntLigDesl);
    
}
.bnt-liga:hover, .bnt-desliga:hover {
    
    cursor: pointer;
}
.bnt-liga:active, .bnt-desliga:active {
    transform: translateY(2px);
    box-shadow: var(--sombraInternaBntLigDesl);
}

#bntGreen {
    background-color: var(--bntGreen);
    
}

#bntGreen:hover {
    background-color: var(--bntGreenHover);
}

#bntBlue {
    background-color: var(--botaoBlue);
}

#bntBlue:hover {
    background-color: var(--botaoBlueHover);
}


#bntDarkBlue {
    background-color: var(--bntDarkBlue);
    height: 100px;
    border-radius: 10px;
}


#bntDarkBlue:hover {
    background-color: var(--bntDarkBlueHover);
}

#bntZero {
    width: 106px;
    border-radius: 10px;
}

footer{
    display: flex;
    justify-content: center;
    height: 60px;
    
 }

footer p{
    display: flex;
    align-items: end;
    bottom: 0;
    text-align: center;
    width: 300px;
    flex-wrap: wrap;
    justify-content: center;
    color:var(--fontText);
    
}