:root{
    --dark-bg:rgb(15, 15, 15);
    --query-input-color:rgb(249, 216, 222);
    --solution-input-color:rgb(87, 70, 73);
    --controllers-img-highlight:rgb(83, 82, 82);
    --horizontal-ruler:rgba(128, 128, 128, 0.2);
    --bracket-btns-divider:rgb(79, 76, 76);
    --keyscont-btn-color:rgb(248, 202, 202);
    --keyscont-btn-bgc:rgba(40, 39, 39, 0.626);
    --keys-highlight:rgb(88, 87, 87);
    --scrl-bar-thumb:rgb(61, 58, 58);
    --hist-qry-clr:rgb(183, 183, 183);
    --hist-sol-clr:rgb(248,202,202);
    --clear-histbtn-bg:rgb(79,76,76,0.3);
    --clear-histbtn-clr:rgb(255, 255, 255);
    --clear-histbtn-highlight:rgb(118, 118, 118,0.7);
    --error-ele-bg:rgb(77, 74, 74,0.6);
    --error-ele-clr:rgb(220, 218, 218);
    --error-ele-shadow:gray;
    --body-bg:rgb(153,190,175);
    --cont-shadow:rgb(117, 117, 117);
}

[data-theme="white"]{
    --dark-bg:rgba(240, 240, 240, 0.942);
    --query-input-color:rgb(157, 46, 66);
    --solution-input-color:rgb(195, 111, 126);
    --controllers-img-highlight:rgb(135, 128, 128);
    --horizontal-ruler:rgba(35, 31, 31, 0.2);
    --bracket-btns-divider:rgb(205, 193, 193);
    --keyscont-btn-color:rgb(93, 23, 23);
    --keyscont-btn-bgc:rgba(175, 131, 131, 0.252);
    --keys-highlight:rgb(183, 164, 164);
    --scrl-bar-thumb:rgb(194, 188, 188);
    --hist-qry-clr:rgb(244, 50, 50);
    --hist-sol-clr:rgb(69, 62, 62);
    --clear-histbtn-bg:rgba(99, 96, 96, 0.3);
    --clear-histbtn-clr:rgb(31, 29, 29);
    --clear-histbtn-highlight:rgba(41, 36, 36, 0.7);
    --error-ele-bg:rgba(58, 56, 56, 0.6);
    --error-ele-clr:rgb(255, 254, 254);
    --error-ele-shadow:rgb(122, 121, 121);
    --body-bg:rgb(102, 65, 80);
    --cont-shadow:rgb(58, 55, 55);
}
/*
    dark-15,15,15
    q-inp-color-249,216,222
    sol-inp-color-87,70,73
    contro-img-highlight-83,82,82
    brckt-btns-divider:79,76,76
    keys-cont-btn-clr-248, 202, 202
    keyscont-btn-bgc-40,39,39,0.626
    keys-highlight-88,87,87
    scrl-thumb-61, 58, 58
    hist-qr-clr-183,183,183
    hist-sol-cle-248,202,202
    clear-hist-btn-bg:79,76,76,0.3
    clear-hist-btn-clr:255,255,255
    clear-hist-btn-highlight:118, 118, 118,0.7
    err-el-bg-77,74,74,0.6
    err-el-clr-220,218,218
    err-el-shadow-gray
    body-bg-46,42,42
    cont-shadow-117,117,117
*/
html{
    box-sizing: border-box;
    font-size: 62.5%;
}

body{
    margin: 0;
    display: flex;
    justify-content: center;
    background-color: var(--body-bg);
    transition: 0.6s ease; 
}
.cont{
    height: 97vh;
    margin-top: 10px;
    width: min(400px,95vw);
    display: flex;
    flex-direction: column;
    padding: 2px;
    background-color: var(--dark-bg);
    border-radius: 5px;
    z-index: 2;
    box-shadow: 0px 1px 2px var(--cont-shadow);
    transition: 0.6s ease;
}
.display{
    height: 25%;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.change-theme{
    display: flex;
    justify-content: flex-end;
}
.change-theme i{
    font-size: 1.4rem;
    margin: 5px 5px 2px 1px;
    transition: 0.5s ease;
}
.fa-sun{
    color: white;
}
.fa-moon{
    color: black;
}
.fas:active{
    scale: 1.30;
}
.query{
    height: 60%;
    display: flex;
    align-items: flex-end;
}
.query input{
    background-color: inherit;
    width: 100%;
    height: 40%;
    outline: none;
    font-size: 1.9rem;
    color: var(--query-input-color);
    text-align: right;
    border: none;
}
::-webkit-inner-spin-button{
    visibility: hidden;
}
.solution{
    height: 35%;
    display: flex;
    align-items: flex-end;
}
.solution input{
    width: 100%;
    height: 50%;
    text-align: right;
    outline: none;
    color: var(--solution-input-color);
    font-size: 1.4rem;
    border: none;
    background-color: inherit;
}
.opts{
    width: 40%;
    display: flex;
    align-items: center;
}
.del{
    width: 15%;
    display: flex;
    align-items: center;
    justify-content: center;
}
.controllers{
    height: 7%;
    display: flex;
    padding: 1px;
    justify-content: space-between;
}
.history{
    border: none;
}
.controllers img{
    border-radius: 50%;
    padding: 7px;
}
.controllers img:active{
    background-color: var(--controllers-img-highlight);
}
hr{
    width: 95%;
    border: 1px solid var(--horizontal-ruler);
}
.keys-cont{
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 10px;
    justify-content: space-around;
}
.keys-cont-inner{
    height: 95%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: center;
    position: relative;
}
.key{
    width: 5vw;
    height: 5vw;
    border-radius: 50%;
    margin-right: 15px;
    text-align: center;
    font-size: 2rem;
    display: flex;
    justify-content: center;
    align-items: center;
}
#bracket-btn{
    display: flex;
}
#bracket-btn span:active{
    scale: 0.8;
}

#bracket-btn > *:nth-child(1){
    height: 100%;
    border-top-left-radius: 50px;
    border-bottom-left-radius: 50px;
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

#bracket-btn > *:nth-child(2){
    border: 1px solid var(--bracket-btns-divider);
    height: 100%; 
}

#bracket-btn > *:nth-child(3){
    border: 1px solid var(--bracket-btns-divider);
    height: 100%;
}
#bracket-btn > *:nth-child(4){
    flex: 1;
    height: 100%;
    border-top-right-radius: 50px;
    border-bottom-right-radius: 50px;
    display: flex;
    align-items: center;
    justify-content: center;
}

button{
    cursor: pointer;
    outline: none;
    -webkit-tap-highlight-color: transparent;
}
.keys-cont button{
    border: none;
    color: var(--keyscont-btn-color);
    background-color: var(--keyscont-btn-bgc);
}
button:hover{
    .key-txt{
        filter: brightness(120%);
    }
}
button:active{
    background-color: var(--keys-highlight);
    .key-txt{
        scale: 0.8;
    }
}
.error-ele{
    width: 100px;
    height: 30px;
    background-color: var(--error-ele-bg);
    color: var(--error-ele-clr);
    border-radius: 15px;
    z-index: 10;
    top: 82%;
    left: 46%;
    font-size: 1rem;
    font-family:'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
    overflow: hidden;
    font-size: 13px;
    text-align: center;
    display: none;
    align-items: center;
    justify-content: center;
    box-shadow: 1px 1px 9px var(--error-ele-shadow);
}
.disabled{
    filter: brightness(30%);
}
.hid{
display: none;
}
.sho{
display: flex;
}
.history-info{
    background-color: var(--dark-bg);
    position: absolute;
    top: 0;
    left: 0;
    height: 100%;
    width: 0;
    transition: 0.5s ease;
}
.history-info-cont{
    height: 92%;
    overflow: scroll;
}
::-webkit-scrollbar:horizontal{
    display: none;
 }
::-webkit-scrollbar{
    background-color: var(--dark-bg);
    width: 5px;
}
::-webkit-scrollbar-thumb{
    background-color: var(--scrl-bar-thumb);
    border-radius: 20px;
}
.hist-p{
    text-align: right;
    margin-right: 20px;
    margin-bottom: -2px;
}
.hist-query{
    color: var(--hist-qry-clr);
    margin-bottom: -9px;
    font-size: 1.6rem;
}
.hist-solution{
    font-size: 1.7rem;
    color: var(--hist-sol-clr);
}
.clr-hist-cont{
    height: 7.5%;
    display: flex;
    justify-content: center;
    align-items: center;
}
#clear-history{
    background-color: var(--clear-histbtn-bg);
    color: var(--clear-histbtn-clr);
    font-weight: 600;
    border-radius: 20px;
    height: 70%;
    visibility: hidden;
    transition: 0.2s ease-in;
    overflow: hidden;
}
#clear-history:active{
    background-color: var(--clear-histbtn-highlight);
}
/* @media screen and (min-width:500px){
}
@media screen and (max-width:401px){
}
@media screen and (401px <= width <= 500px){
} */
/* @media screen and (100<=width<=1230){
    .key{
        color: red;
        width: 16vw;
        height: 12vw;
    }
} */
@media screen and (max-width:1220px){
    .key{
        width: 6vw;
        height: 6vw;
    }
    .error-ele{
        left: 45%;
    }
}
@media screen and (max-width:1017px){
    .key{
        width: 7vw;
        height: 7vw;
    }
    .error-ele{
        left: 43%;
    }
}
@media screen and (max-width:872px){
    .key{
        width: 8vw;
        height: 8vw;
    }
    .error-ele{
        left: 43%;
    }
}
@media screen and (max-width:763px){
    .key{
        width: 9vw;
        height: 9vw;
    }
    .error-ele{
        left: 42%;
    }
}
@media screen and (max-width:678px){
    .key{
        width: 11vw;
        height: 11vw;
    }
    .error-ele{
        left: 40%;
    }
}
@media screen and (max-width:555px){
    .key{
        width: 13vw;
        height: 13vw;
    }
    .error-ele{
        left: 37%;
    }
}
@media screen and (max-width:469px){
    .key{
        width: 15vw;
        height: 15vw;
    }
    .error-ele{
        left: 36%;
    }
}
@media screen and (max-width:389px){
    body{
        background-color: var(--dark-bg);
        background-image: none;
    }
    .cont{
        height: 96vh;
        width: 99vw;
    }
    .key{
        width: 17vw;
        height: 17vw;
    }
    .error-ele{
        left: 30%;
    }
}
@media screen and (max-width:303px){
    .key{
        width: 16vw;
        height: 16vw;
    }
}
@media screen and (max-width:258px){
    .key{
        width: 14vw;
        height: 14vw;
    }
}
@media screen and (min-height:750px){
    .cont{
        width: 90vw;
        height: 85vh;
    }
    .key{
        width: 16vw;
        height: 16vw;
    }
}