@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');

*{
    margin: 0px;
    padding: 0px;
}
html, body{
    height: 100%;
}
body{
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Open Sans', sans-serif;
}
button{
    cursor: pointer;
    border: none;
    background: none;
    color: rgb(223, 223, 223);
}
button:hover, a:hover{
    background: rgb(78, 78, 78);
}
button:active, a:active{
    background: rgb(102, 102, 102);
}

/*Links desativados*/
a[href="#"]{
    cursor: default;
    color: rgb(139, 139, 139);
}

/*CONTAINER PRINCIPAL DA CALCULADORA - questao de width e height seram ajustadas futuramente*/
#corpo_calc{
    width: 400px;
    height: 700px;
    padding: 5px;
    background: rgb(53, 53, 53);
    box-shadow: 0 0 4px rgb(129, 129, 129), 0 0 4px rgb(129, 129, 129);
}

/*FORMATACAO DA BARRA SUPERIOR*/
#barra_calc{
    height: 5%;
    display: grid;
    grid-template-columns: repeat(2,1fr);
    align-items: center;
}
.btn-h>*,.btnDD>*{
    pointer-events: none;
}
.btn-h{
    width: 40%;
    height: calc(100% + 10px);
    margin-right: -5px;
    justify-self: end;
}

/*DROPDOWN OPCOES*/
.dropdownOP{
    position: relative;
    display: inline-block;
    height: calc(100% + 10px);
    margin-left: -5px;
}
.btnDD{
    width: 40%;
    height: 100%;
}
.contentDD{
    width: 100%;
    height: calc((93 / 100) * 700px );
    padding: 5px;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    display: flex;
    flex-direction: column;
    background: rgb(41, 40, 40);
    transition: all 0.2s ease;
    z-index: 1;
}
.contentDD >*{
    display: block;
    text-decoration: none;
    color: rgb(223, 223, 223);
}
.contentDD h3{
    font-size: 1em;
    padding: 10px 0 10px 5px;
}
.contentDD i{
    width: 15px;
    padding: 0 10px 0 0px;
}
.contentDD a{
    padding: 10px 0 10px 5px;
}
.show{
    opacity: 1;
    visibility: visible;
}

/*DROPDOWN ABOUT*/
.dropdownA{
    width: 100%;
    position: absolute;
    margin-left: -5px;
    bottom: 0;
}
.sobreDD{
    display: flex;
    flex-direction: column;
    position: relative;
    top: 40px;
    background: rgb(26, 25, 25);
    transition: all 0.1s ease;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
}
.sobreDD > a{
    color: rgb(223, 223, 223);
    text-decoration: none;
}
#btn-a{
    font-size: 1.2em;
    padding: 10px;
}
#btn-a>*{
    pointer-events: none;
}
.showA{
    top: 0px;
    opacity: 1;
    visibility: visible;
    pointer-events: all;
}

/*DROPDOWN INFERIOR*/
.dropdownFooter{
    position: relative;
    margin-left: -5px;
}
.Container{
    width: calc(100% - 5px);
    height: 100px;
    top: -100px;
    padding: 5px;
    opacity: 0;
    visibility: hidden;
    position: absolute;
    color: rgb(223, 223, 223);
    background: rgb(65, 65, 65);
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}
.Container >*{
    padding: 15px;
}
.showF{
    opacity: 1;
    visibility: visible; 
    height: calc(75.3/100 * 700px - 20px);
    top: calc((-1)*(75.3/100 * 700px - 15px));
}

/*DROPDOWN FOOTER CONTENT*/
#hist_content, #mem_content{
    width: 90%;
    height: 84%;
    margin-top: 5px;
    align-self: center;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    scrollbar-width: thin;
}
#hist_content > a{
    padding: 10px;
    cursor: pointer;
    font-size: 1.5em;
    text-align: end;
    align-self: stretch;
}
.btn-trash{
    width: 25%;
    margin-right: 5px;
    align-self: flex-end;
}

/*FORMATACAO CAMPO OP MEMORIA*/
#mem_calc{
    height: 4%;
    display: grid;
    gap: 2px;
    grid-template-columns: repeat(6, 1fr);
}
#mem_calc > button{
    height: 100%;
    border: none;
    cursor: pointer;
    background: none;
    color: rgb(223, 223, 223);
    font:  0.9em 'Open Sans', sans-serif;
}
#mem_calc > button:hover{
    background: rgb(78, 78, 78);
}
#mem_calc > button:active{
    background: rgb(102, 102, 102);
}

/*OPERACOES DENTRO DO DROPDOWN MEMORIA*/
#mem_content > div{
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}
#mem_content > div:hover{
    background: rgb(78, 78, 78);
}
.val-mem{
    margin-right: 5px;
    cursor: pointer;
    width: min-content;
    font-size: 2.4em;
}
.btn-body{
    display: flex;
}
.btn-mem{
    margin: 5px;
    width: 40px;
    height: 40px;
    font:1em 'Open Sans', sans-serif;
    font-weight: 600;
    background: rgb(32, 32, 32);
}
.btn-mem:hover{
    color: black;
}

/*FORMATACAO DO VISOR CALCULADORA*/
.visor_calc, .visor_calc_convert{
    display: flex;
    flex-direction: column;
}
.visor_calc{
    height: 15%;
    margin: 0 10px 20px 10px;
}
.visor_calc_convert{
    height: 30%;
    margin: 5px 0 15px 10px;
}
.visor_op, .value_op, .select_med{
    align-self: stretch;
    text-align: end;
    border: none;
    background: rgba(53, 53, 53, 0);
}
.visor_calc_convert .value_op,.visor_calc_convert .visor_op, .visor_calc_convert .select_med{
    text-align: start;
}
.visor_calc_convert .value_op,.visor_calc_convert .visor_op {
    height: auto;
    margin: 5px 0 5px 0;
    color: white;
    font: 3em 'Open Sans', sans-serif;
}
.visor_calc_convert .value_op{
    font-weight: 700;
}
.visor_op{
    height: 40%;
    color: rgb(189, 189, 189);
    font: 1.8em 'Open Sans', sans-serif;
    text-overflow: ellipsis;
}
.value_op{
    height: 60%;
    margin-top: 5px;
    color: white;
    font: 3em 'Open Sans', sans-serif;
    text-overflow: ellipsis;
    transform: scaleY(1.1);
}
.select_med{
    align-self: baseline;
    margin: 2px 0 2px 0;
    color: rgb(223, 223, 223);
    font: 1.1em 'Open Sans', sans-serif;
}
/*FORMATACAO DOS BOTOES DA CALCULADORA*/
.botoes_calc, .botoes_calc_convert{
    width: calc(100%);
    height: calc(76% - 20px);
    display: grid;
    gap: 2px;
    grid-template-columns: repeat(4, 1fr);
}
.botoes_calc{
    height: calc(76% - 20px);
}
.botoes_calc_convert{
    height: calc(65% - 20px);
}
.botoes_calc > button, .botoes_calc_convert > button{
    font: 1.4em 'Open Sans', sans-serif;
}
.btn{
    background: rgb(32, 32, 32);
}
.btn-value, .btn-value-d{
    background: rgb(17, 17, 17);
}
.btn-value-d{
    pointer-events: none;
}