/* cores
    preto: #383838
    vermelho: #F56969
    verde: #62D65F
    branco1: #F5F5F5
    branco2: #EEEEEE
    branco3: #E1E1E1
    laranja: #ec5814

*/

*{
    box-sizing: border-box;
    margin: 0;
    font-weight: bold;
}

body{
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    height: 100vh;
    padding: 2%;
    background-color: #383838;
    gap: 5px;
}
@media (min-width: 60em){
    body{
        display: flex;
        flex-direction: column;
        justify-content: space-evenly;
        height: 100vh;
        padding: 2% 35%;
        background-color: #383838;
        gap: 5px;
    }

}

header{
    display: flex;
    flex-direction: column;
    height: 40%;
    background-color: lightgray;
    border-radius: 5%;
    justify-content: center;
}
.zerar{
    height: 10%;
    width: 100%;
    background-color: #383838;
    background-color: #ec5814;
    border: none;
    color: #E1E1E1;
    border-radius: 5px;
    transition: 0.1s;
}
.zerar:active{
    opacity: 0.5;
}
/* TELA */
.container-tela{
    display: flex;
    height: 100vh;
    flex-direction: column;
    padding: 5%;
    justify-content: space-evenly;
}
.valorTotal{
    display: flex;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 12px;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    height: 18%;
}
.valorTotal h2{
    color: #62D65F;
    font-size: 32px;
    font-size: 24px;
   
}
.tela{
    height: 30vh;
    background-color: #383838;
    color: #F5F5F5;
    overflow-y: scroll;
    padding: 12px 0;
}

/* CALCULADORA */
main{
    display: flex;
    flex-direction: column;
    height: 50%;
    width: 100%;
    gap: 5px;
}
.container-contador{
    display: flex;
    width: auto;
    height: auto;
    padding: 2%;
    justify-content: space-evenly;
    background-color: #E1E1E1;
    border-radius: 10px;
    align-items: center;
}
.totalHeader{
    color: #1f1f1f;
    width: 30%;
    padding: 0 2%;
    height: 80%;
}
.total{
    background-color: #383838;
    width: 75%;
    padding: 0 2%;
    height: 80%;
}

.cifra{
    color: #1f1f1f;
}
.unid{
    font-size: 14px;
}
.num{
    font-size: 24px;
    padding: 0 3%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 100%;
    width: 65%;
    color: #1f1f1f;;
    background-color: #F5F5F5;
}
.num >{

    background-color: #F5F5F5;
}

.contMais{
    padding: 10px 15px;
    cursor: pointer;
    color: #E1E1E1;
    background-color: #25c01f;
    border: none;
    font-size: 14px;
    border-radius: 5px;
    transition: 0.1s

}
.contMais:active{
    opacity: 0.5;
}
.contMenos{
    padding: 10px 15px;
    cursor: pointer;
    color: #E1E1E1;
    background-color: #ec9614;
    background-color: #ec5814;
    border: none;
    font-size: 14px;
    border-radius: 5px;
    transition: 0.1s

}
.contMenos:active{
    opacity: 0.5;
    
}
.container-teclado{
    display: flex;
    padding: 3%;
    height: 90vh;
    width: 100%;
    background-color: #E1E1E1;
    border-radius: 5%;
    gap: 2%;
}


/* Container */
.teclado{
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 74%;
    gap: 2%;
}
.col{
    display: flex;
    height: 100%;
    width: 100%;
    gap: 2%;
}
.zero{
    width: 85%;
    border-radius: 5%;
    background-color: #383838;
    border: none;
    border-radius: 5%;
    color: #E1E1E1;
    transition: 0.1s;
}
.zero:active{
    opacity: 0.5;
    
}
.contMenos:active{
    opacity: 0.5;
    
}
.btn-num{
    width: 40%;
    height: 100%;
    background-color: #383838;
    border: none;
    border-radius: 5%;
    color: #E1E1E1;
    transition: 0.1s;
}
.btn-num:active{
    opacity: 0.5;
    
}
/* Container */
.adicionarRemover{
    display: flex;
    flex-direction: column;
    height: 100%;
    width: auto;
    gap: 2%;
}

.adicionarRemover > button{
    height: 100%;
    width: 100%;
    border: none;
    border-radius: 5%;
    color: #E1E1E1;
    font-size: 14px;
    
}
.btn-backspace{
    background-color: #383838;
    color: #E1E1E1;
    transition: 0.1s;
}
.btn-backspace:active{
    opacity: 0.5;
}
.btn-adicionar{
    background-color: #25c01f;
    transition: 0.1s;
}
.btn-adicionar:active{
    opacity: 0.5;
}
.btn-remover{
    background-color: #ec9614;
    background-color: #ec5814;
    transition: 0.1s;
}
.btn-remover:active{
    opacity: 0.5;
}
footer{
    font-style: none;
    text-decoration: none;
    list-style: none;
    color: #F5F5F5;
    height: 5%;
}
footer a{
    font-style: none;
    text-decoration: none;
    list-style: none;
    color: #62D65F;
    height: 5%;
}
.remover{
    display: none;
}