@charset "UTF-8";
@font-face {
    font-family: 'Sono Regular';
    src: url(../fonts/Sono-Regular.ttf);
}
@font-face {
    font-family: 'Sono Light';
    src: url(../fonts/Sono-Light.ttf);
}
@font-face {
    font-family: 'Sono Bolder';
    src: url(../fonts/Sono-ExtraBold.ttf);
}

@media screen and (orientation:landscape) {
    body{
        background-image: url(../images/BgOp-LANDSCAPE.jpg);
    }
}

:root{
    --sono1: 'Sono Light';
    --sono2: 'Sono Regular';
    --sono3: 'Sono Bolder';
    --corBg: rgb(10, 16, 22);
    --corButton:rgba(45, 11, 109, 0.233);
    --corYellow: rgb(255, 196, 0);
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html{
    font-size: 62.5%;
}

body{
    font-family: var(--sono1);
    background-color: var(--corBg);
    color: white;
    padding: 20px;
    background-image: url(../images/BgOp.jpg);
    background-size: 100%;
    background-attachment: fixed;
}
input{
    display: inline-block;
    font: bold 2.6rem var(--sono3);
    height: 60px;
    width:20vw;
    min-width: 110px;
    max-width: 200px;
    vertical-align: middle;
}

h1{
    text-align: center;
    margin: 0 0 30px 0;
}

/* ==================================
   =============BOTÕES===============
   ==================================*/

#div-operations{
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    width: 100%;
    margin: 8px auto;
}
#operation-buttons{
    display:inline-block;
    font-size: 1.6rem;
    min-width: 8.5em;
    max-width: 9em;
    margin: 0 .8em;
}

.operators{
    width: 5vw;
    max-width: 1.5em;
    min-width: 1em;
    display: inline;
    font: normal 3.2rem var(--sono1);
    color: var(--corYellow);
    background-color: var(--corButton);
    border: .1px solid var(--corYellow);
    margin: 2px -2px;
    cursor: pointer;
    transition: .5s;
}

.operators:hover{
    transition: .4s;
    font-weight: bolder;
    color: rgb(252, 191, 58);
    background-color: rgba(182, 216, 255, 0.534);
}

/* ============================== 
========RESULTADOS============ 
============================== */


#div-results{
    text-align: center;
    margin: 20px 0;
    width: 100%;
    font-size: 2.2em;
}
li{
    display: inline-block;
    text-align: center;
    width: fit-content;
    max-width: 2.3em;
    margin-right: 15px;
}

ul{
    display: flex;
    width: 80%;
    max-width: 26em;
    padding: 10px 0;
    position: relative;
    margin: auto;
    border-bottom: 1px solid white;
    padding-bottom: 2vh;
}


/* aaaaa

kok

aa*/
.chosen-values{
    color: rgb(200, 219, 255);
    font-weight: bold;
}
 
.r-true, .r-false{
    text-align: right; 
    position: absolute;
    right: 0;
    text-shadow: .5px .5px 3px rgb(0, 0, 0);
    width: fit-content;
    max-width: none;
    padding: 0;
    margin: 0;
} 

.r-true {color: greenyellow; font-weight: bolder;}
.r-false {color: red; font-weight: bolder;}

/* ----------------------------------------------------------------
/*---------------BOOLEAN BUTTONS
/*----------------------------------------------------------------*/
/* 
div.boolean-buttons > button{
    font-size: 1em;
    width: 3em;
    margin:0 10px;
    color: var(--corYellow);
    background-color:var(--corButton);
    border: 1px solid var(--corYellow);
    cursor:pointer;
    transition: .5s;
}

div.boolean-buttons > button:hover{
    font-weight: bolder;
    background-color: rgba(182, 216, 255, 0.534);
}

div.boolean-buttons > button.activated {
    background-color: rgba(255, 255, 255, 0.356);
    box-shadow: inset 0 0 8px 2px rgba(0, 0, 0, 0.733);
    font-weight: bolder;
}

div.boolean-buttons{
    display: flex;
    justify-content: center;
    border-bottom: 1px solid rgba(255, 255, 255, 0.404);
    width: 80%;
    margin: auto;
    padding-bottom: 15px;
}

div#boolean-button{
    visibility: hidden;
    text-align: center;
} */