@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@700&display=swap');
body{
    font-family: 'League Spartan', sans-serif;
    font-weight: 700;
    font-size: 16px;
}
*{
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}
.container{
    display: grid;
    grid-template-columns: 25em;
    grid-template-rows: 2em 6em 22em;
    justify-content: center;
    gap: 1em;
    margin-top: 10vh;
}
.heading{
    grid-column: auto;
    grid-row: 1/2;
    display: flex;
    justify-content: space-between;
    align-items: center;
}
.heading > p{
    font-size: 1.3rem;
}
.main__toggle{
    display: grid;
    grid-template-columns: 4em 4em;
    grid-template-rows: auto;
    gap: 0.5em;
}
.theme__text{
    grid-column: 1/2;
    grid-row: auto;
    align-self: flex-end;
}
.toggle__choice{
    grid-column: 2/3;
    grid-row: auto;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 1.2em 1.2em;
}
.toggle__choice1{
    grid-column: auto;
    grid-row: 1/2;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    justify-items: center;
}
.toggle__choice2{
    grid-column: auto;
    grid-row: 2/3;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    grid-template-rows: auto;
    align-items: center;
    justify-items: center;
    border-radius: 1em;
}
.toggle__choice2 p{
    width: 0.6em;
    height: 0.6em;
    border-radius: 50%;
    cursor: pointer;
}
.input__container{
    grid-column: auto;
    grid-row: 2/3;
    outline: 0; 
    border: none; 
    border-radius: 0.3em;
    display: flex;
    align-items: flex-end;
    justify-content: space-around;
    flex-direction: column;
    padding: 10px;
    word-wrap: break-word;
    word-break: break-all;
}
.input__container .previous-operand{
    font-size: 1.5rem;
}
.input__container .current-operand{
    font-size: 2.5rem;
}
.clickable{
    grid-column: auto;
    grid-row: 3/4;
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr;
    text-align: center;
    padding: 1em;
    gap: 0.7em;
    border-radius: 0.3em;
}
.clickable > div{
    align-self: center;
    padding: 0.35em 0 0.2em;
    font-size: 1.8rem;
    border-radius: 0.25em;
    cursor: pointer;
}
.number__reset{
    grid-column: 1/3;
    grid-row: 5/6;
}
.number__equal{
    grid-column: 3/5;
    grid-row: 5/6;
}

/*********************** THEME 1 *****************************/
.theme__1{
    background-color: hsl(222, 26%, 31%);
}
.theme__1 .heading{
    color: hsl(0, 0%, 93%);
}
.theme__1 .input__container{
    color: white;
    background-color: hsl(224, 36%, 15%);
}
.theme__1 .clickable{
    background-color: hsl(223, 31%, 20%);
}
.theme__1 .clickable > .theme__box{
    background-color: hsl(30, 25%, 89%);
    box-shadow: 0 2px hsl(28, 16%, 65%);
    color: hsl(221, 14%, 31%);
}
.theme__1 .clickable > .theme__box:hover{
    background-color: white;
}
.theme__1 .reset{
    background-color: hsl(225, 21%, 49%);   
    box-shadow: 0 2px hsl(224, 28%, 35%);
    color: white;
    font-size: 1.6rem;
}
.theme__1 .del{
    background-color: hsl(225, 21%, 49%);   
    box-shadow: 0 2px hsl(224, 28%, 35%);
    color: white;
    font-size: 1.6rem;
}
.theme__1 .equal{
    background-color: hsl(6, 63%, 50%);
    box-shadow: 0 2px hsl(6, 70%, 34%);
    color: white;
    font-size: 1.6rem;
} 
.theme__1 .btnColor1{
    background-color: hsl(6, 63%, 50%);
}
.theme__1 .toggle__choice2{
    background-color: hsl(223, 31%, 20%);
}

/************************ THEME 2 ******************************/
.theme__2{
    background-color: hsl(0, 0%, 90%);
}
.theme__2 .input__container{
    color: black;
    background-color: hsl(0, 0%, 93%);
}
.theme__2 .clickable{
    background-color: hsl(0, 5%, 81%);
}
.theme__2 .clickable > .theme__box{
    background-color: hsl(45, 7%, 89%);
    box-shadow: 0 2px hsl(35, 11%, 61%);
    color: hsl(221, 14%, 31%);
}
.theme__2 .clickable > .theme__box:hover{
    background-color: white;
}
.theme__2 .del{
    background-color: hsl(185, 42%, 37%);   
    box-shadow: 0 2px hsl(185, 58%, 25%);
    color: white;
    font-size: 1.6rem;
}
.theme__2 .reset{
    background-color: hsl(185, 42%, 37%);   
    box-shadow: 0 2px hsl(185, 58%, 25%);
    color: white;
    font-size: 1.6rem;
}
.theme__2 .equal{
    background-color: hsl(25, 98%, 40%);
    box-shadow: 0 2px hsl(25, 99%, 27%);
    color: white;
    font-size: 1.6rem;
}
.theme__2 .btnColor2{
    background-color: hsl(25, 98%, 40%);
}
.theme__2 .toggle__choice2{
    background-color: hsl(0, 5%, 81%);
}

/************************* THEME 3 ********************************/
.theme__3{
    background-color: hsl(268, 75%, 9%);
}
.theme__3 .heading{
    color: hsl(52, 100%, 62%);
}
.theme__3 .input__container{
    color: hsl(52, 100%, 62%);
    background-color: hsl(268, 71%, 12%);
}
.theme__3 .clickable{
    background-color:  hsl(268, 71%, 12%);
}
.theme__3 .clickable > .theme__box{
    background-color: hsl(268, 47%, 21%);
    box-shadow: 0 2px hsl(290, 70%, 36%);
    color: hsl(52, 100%, 62%);
}
.theme__3 .clickable > .theme__box:hover{
   background-color: hsl(285, 91%, 52%);
}
.theme__3 .reset{
    background-color: hsl(281, 89%, 26%);   
    box-shadow: 0 2px hsl(285, 91%, 52%);
    color: white;
    font-size: 1.6rem;
}
.theme__3 .del{
    background-color: hsl(281, 89%, 26%);   
    box-shadow: 0 2px hsl(285, 91%, 52%);
    color: white;
    font-size: 1.6rem;
}
.theme__3 .reset:hover{
   background-color: hsl(285, 91%, 52%);
}
.theme__3 .del:hover{
   background-color: hsl(285, 91%, 52%);
}
.theme__3 .equal{
    background-color: hsl(176, 100%, 44%);
    box-shadow: 0 2px hsl(177, 92%, 70%);
    color: hsl(198, 20%, 13%);
    font-size: 1.6rem;
} 
.theme__3 .btnColor3{
    background-color: hsl(176, 100%, 44%);
}
.theme__3 .toggle__choice2{
    background-color: hsl(268, 71%, 12%);
}

@media screen and (max-width: 420px) {
    .container{
        grid-template-columns: 20em;
        grid-template-rows: 2em 5em 21em;
    }
    .clickable{
        gap: 0.5em;
    }
    .heading > p{
        font-size: 1.5rem;
    }
}
@media screen and (max-width: 345px) {
    .container{
        grid-template-columns: 17em;
        grid-template-rows: 2em 5em 20em;
    }
    .input__container .previous-operand{
        font-size: 1.3rem;
    }
    .input__container .current-operand{
        font-size: 2.2rem;
    }
}
@media screen and (max-width: 290px) {
    .container{
        grid-template-columns: 16em;
    }
    .input__container .previous-operand{
        font-size: 1.2rem;
    }
    .input__container .current-operand{
        font-size: 1.2rem;
    }
}