@import url('https://fonts.googleapis.com/css2?family=League+Spartan:wght@700&display=swap');


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

body, button{
   position: relative;
   font-family: 'League Spartan', sans-serif;
}
button:hover{
   cursor: pointer;
}

:root{
   --br-radius: .5rem;
}

.theme-1{
   --main-bg: hsl(222, 26%, 31%);
   --tg-kb-bg: hsl(223, 31%, 20%);
   --screen-bg: hsl(224, 36%, 15%);
   --key-rst-bg: hsl(225, 21%, 49%);
   --key-rst-bg-hv: hsl(225, 60%, 74%);
   --key-rst-shw: hsl(224, 28%, 35%);
   --key-op-bg: hsl(30, 25%, 89%);
   --key-op-bg-hv: hsl(45, 100%, 99%);
   --key-op-shw: hsl(28, 16%, 65%);
   --key-eq-bg: hsl(6, 63%, 50%);
   --key-eq-bg-hv: hsl(6, 100%, 72%);
   --key-eq-shw: hsl(6, 70%, 34%);
   --txt-color: hsl(0, 0% ,100%);
   --button-txt-color: hsl(221, 14%, 31%);
}
.theme-2{
   --main-bg: hsl(0, 0%, 90%);
   --tg-kb-bg: hsl(0, 5%, 81%);
   --screen-bg: hsl(0, 0%, 93%);
   --key-rst-bg: hsl(185, 42%, 37%);
   --key-rst-bg-hv: hsl(185, 53%, 56%);
   --key-rst-shw: hsl(185, 58%, 25%);
   --key-op-bg: hsl(45, 7%, 89%);
   --key-op-bg-hv: hsl(0, 0%, 100%);
   --key-op-shw: hsl(35, 11%, 61%);
   --key-eq-bg: hsl(25, 98%, 40%);
   --key-eq-bg-hv: hsl(25, 79%, 62%);
   --key-eq-shw: hsl(25, 99%, 27%);
   --txt-color: hsl(0, 0% ,100);
   --button-txt-color: hsl(60, 10%, 19%);
}
.theme-3{
   --main-bg: hsl(268, 75%, 9%);
   --tg-kb-bg: hsl(268, 71%, 12%);
   --screen-bg: hsl(268, 71%, 12%);
   --key-rst-bg: hsl(281, 89%, 26%);
   --key-rst-bg-hv: hsl(281, 84%, 39%);
   --key-rst-shw: hsl(285, 91%, 52%);
   --key-op-bg: hsl(268, 47%, 21%);
   --key-op-bg-hv: hsl(268, 49%, 42%);
   --key-op-shw: hsl(290, 70%, 36%);
   --key-eq-bg: hsl(176, 100%, 44%);
   --key-eq-bg-hv: hsl(176, 87%, 73%);
   --key-eq-shw: hsl(177, 92%, 70%);
   --txt-color: hsl(52, 100%, 62%);
   --button-txt-color: hsl(52, 100%, 62%);
   --key-eq-color: hsl(198, 20%, 13%);
}

.main__calculator{
   position: relative;
   background: var(--main-bg);
   color: var(--txt-color);
   width: 100vw;
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
}

.calculator__container{
   width: clamp(15rem, 80%, 35rem);
   display: flex;
   flex-direction: column;
   gap: 1.5rem;
}
.calculator__container.out-theme{
   animation: outTheme 1s ease;
}
.calculator__container.in-theme{
   animation: inTheme 1s ease;
}

.calculator__top{
   display: flex;
   justify-content: space-between;
}
.calculator__theme{
   display: flex;
   gap: 1rem;
}
.theme__text{
   align-self: center;
   font-size: .8rem;
}
.theme__numbers{
   display: flex;
   justify-content: space-around;
}
.theme__switch{
   position: relative;
   width: 4.5rem;
   height: 1.5rem;
   border-radius: 1rem;
   background: var(--tg-kb-bg);
}
.theme__switch::after{
   content: "";
   background: var(--key-eq-bg);
   position: absolute;
   border-radius: 50%;
   width: 1.5rem;
   height: inherit;
}
.theme__switch.theme-1::after{ left: 0; }
.theme__switch.theme-2::after{
   left: 50%; 
   transform: translateX(-50%);
}
.theme__switch.theme-3::after{ right: 0; }
.theme__switch:hover{ cursor: pointer; }

.calculator__input{
   color: var(--txt-color);
   font-family: 'League Spartan', sans-serif;
   text-align: right;
   font-size: 2.5rem;
   height: 4rem;
   padding: 2.5rem 2rem 3rem 2rem;
   background: var(--screen-bg);
   border: none;
   border-radius: var(--br-radius);
}

.calculator__buttons{
   background: var(--tg-kb-bg);
   padding: 1rem;
   display: grid;
   border-radius: var(--br-radius);
   grid-template-columns: repeat(4, 1fr);
   height: 25rem;
   gap: 1rem;
}
.calculator__buttons-item{
   transition: background .3s ease;
   font-size: 1.2rem;
   color: var(--button-txt-color);
   background: var(--key-op-bg);
   border: none;
   border-radius: var(--br-radius);
   box-shadow: inset 0 -4px var(--key-op-shw);
}
.calculator__buttons-item.op{
   font-size: 2rem;
}
.calculator__buttons-item:hover{
   background: var(--key-op-bg-hv);
}
.calculator__buttons-item:active{
   box-shadow: inset 0 4px var(--key-op-shw);
}
#reset, #del{
   color: #fff;
   background: var(--key-rst-bg);
   box-shadow: inset 0 -4px var(--key-rst-shw);
}
#reset:hover, #del:hover{
   background: var(--key-rst-bg-hv);
}
#reset:active, #del:active{
   box-shadow: inset 0 4px var(--key-rst-shw);
}
#equal{
   color: var(--key-eq-color, #fff);
   background: var(--key-eq-bg);
   box-shadow: inset 0 -4px var(--key-eq-shw);
}
#equal:hover{
   background: var(--key-eq-bg-hv);
}
#equal:active{
   box-shadow: inset 0 4px var(--key-eq-shw);
}

.big-button{ 
   grid-column: span 2; 
}

.show-footer{
   z-index: 99;
   color: hsl(6, 63%, 50%);
   font-size: 2rem;
   border: none;
   background: none;
   position: absolute;
   bottom: 0;
   width: 2rem;
   height: 2rem;
   border-radius: 50%;
}

.footer{
   z-index: 99;
   background: #fff;
   border-radius: 1rem;
   display: flex;
   justify-content: space-evenly;
   align-items: center;
   gap: 1rem;
   padding: 1rem;
   width: 15rem;
   height: 8rem;
   position: absolute;
   top: 50%;
   left: 50%;
   transform: translate(-50%, -50%);
}

.footer__paragraph{
   text-align: center;
   padding: .5rem 0;
}

.noshow{
   display: none;
}

.black-filter{
   position: absolute;
   z-index: 9;
   width: 100vw;
   height: 100vh;
   top: 0;
   background: rgba(0, 0, 0, .5);
}

@keyframes outTheme {
   0% {
      opacity: 1;
   } 50% {
      opacity: 0;
   } 100% {
      transform: translateX(-100%);
      opacity: 0;
   }
}

@keyframes inTheme {
   0% {
      opacity: 0;
      transform: translateX(100%);
   } 50% {
      opacity: 1;
   } 100% {
      transform: translateX(0);
      opacity: 1;
   }
}