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

:root {

    /*THEME 1*/
    /*Background*/

--TH1-Very-dark-desaturated-blue-main-background:hsl(222, 26%, 31%);
--TH1-Very-dark-desaturated-blue-toggle-background-keypad-background:
 hsl(223, 31%, 20%);
--TH1-Very-dark-desaturated-blue-screen-background: hsl(224, 36%, 15%);

/*KEYS*/

--TH1-Desaturated-dark-blue-key-background: hsl(225, 21%, 49%);
--TH1-Desaturated-dark-blue-keyshadow: hsl(224, 28%, 35%);

--TH1-Red-keybackground-toggle: hsl(6, 63%, 50%);
--TH1-Dark-red-keyshadow: hsl(6, 70%, 34%);

--TH1-Light-grayish-orange-key-background: hsl(30, 25%, 89%);
--TH1-Grayish-orange-keyshadow: hsl(28, 16%, 65%);

/*TEXT*/

--TH1-Very-dark-grayish-blue: hsl(221, 14%, 31%);
--TH1-White: hsl(0, 0%, 100%);

/*HOVER*/

--button-hover: hsl(0, 0%, 100%);
--del-button-hover: hsl(225, 50%, 74%);
--reset-btn-hover: hsl(225, 50%, 74%);
--equal-btn-hover: hsla(6, 70%, 70%);

--slider-hover: hsla(6, 70%, 70%);


/*BOX-SHADOW*/

--shadow: 0px 4px 2px -2px hsl(28, 16%, 65%);
--del-reset-shadow: 0px 4px 2px -2px hsl(224, 28%, 35%);
--equal-shadow: 0px 4px 2px -2px hsl(6, 70%, 34%);


/*THEME- 2*/
/*BACKGROUNDS*/

--TH2-Light-gray-main-background: hsl(0, 0%, 90%);
--TH2-Grayish-red-toggle-background-keypadbackground: hsl(0, 5%, 81%);
--TH2-Very-light-gray-screen-background: hsl(0, 0%, 93%);

/*Keys*/

--TH2-Dark-moderate-cyan-keybackground: hsl(185, 42%, 37%);
--TH2-Very-dark-cyan-key-shadow: hsl(185, 58%, 25%);

--TH2-Orange-keybackground-toggle: hsl(25, 98%, 40%);
--TH2-Dark-orange-keyshadow: hsl(25, 99%, 27%);

--TH2-Light-grayish-yellow-keybackground: hsl(45, 7%, 89%);
--TH2-Dark-grayish-orange-keyshadow: hsl(35, 11%, 61%);

/*Text*/

--TH2-Very-dark-grayish-yellow: hsl(60, 10%, 19%);
--TH2-White-text: hsl(0, 0%, 100%);


/*THEME- 3*/
/*BACKGROUNDS*/

--TH3-Very-dark-violet-main-background: hsl(268, 75%, 9%);
--TH3-Very-dark-violet-toggle-background-keypad-background-screen-background:
 hsl(268, 71%, 12%);

/* Keys*/

--TH3-Dark-violet-key-background: hsl(281, 89%, 26%);
--TH3-Vivid-magenta-key-shadow: hsl(285, 91%, 52%);

--TH3-Pure-cyan-key-background-toggle: hsl(176, 100%, 44%);
--TH3-Soft-cyan-key-shadow: hsl(177, 92%, 70%);

--TH3-Very-dark-violet-key-background: hsl(268, 47%, 21%);
--TH3-Dark-magenta-key-shadow: hsl(290, 70%, 36%);

/* Text*/

--TH3-Light-yellow: hsl(52, 100%, 62%);
--TH3-Very-dark-blue: hsl(198, 20%, 13%);
--TH3-White-text: hsl(0, 0%, 100%);

--font-family: 'League Spartan', sans-serif;
--font-size-numbers: 32;
--weights: 700;

/*DEFAULT THEME*/
--main-background-color: var(--TH1-Very-dark-desaturated-blue-main-background);
--header-calc-theme: var(--TH1-White);
--toggle-labels: var(--TH1-White);
--toggle-switch-background: var();

--slider-background: var(--TH1-Very-dark-desaturated-blue-toggle-background-keypad-background);
--slider-before: var(--TH1-Red-keybackground-toggle);

--display-color: var(--TH1-White);
--display-background: var(--TH1-Very-dark-desaturated-blue-screen-background);

--calc-body-background: var(--TH1-Very-dark-desaturated-blue-toggle-background-keypad-background);

--button-grid-button-color: var(--TH1-Very-dark-grayish-blue);
--button-grid-button: var(--TH1-Light-grayish-orange-key-background);

--button-grid-delete-btn: var(--TH1-Desaturated-dark-blue-key-background);
--button-grid-delete-btn-color: var(--TH1-White);

--button-grid-reset: var(--TH1-Desaturated-dark-blue-key-background);
--button-grid-reset-color: var(--TH1-White);

--button-grid-equal: var(--TH1-Red-keybackground-toggle);
--button-grid-equal-color: var(--TH1-White);

/*--button-grid-button-box-shadow: 0px 4px 2px -2px hsl(28, 16%, 65%);*/
--button-grid-delete-btn-box-shadow: 0px 4px 2px -2px hsl(224, 28%, 35%);
--button-grid-reset-box-shadow: 0px 4px 2px -2px hsl(224, 28%, 35%);
--button-grid-equal-box-shadow: 0px 4px 2px -2px hsl(6, 70%, 34%);

}

/*THEME - 2*/

[data-theme="2"] {
--main-background-color: var(--TH2-Light-gray-main-background);
--header-calc-theme: var(--TH2-Very-dark-grayish-yellow);
--toggle-labels: var(--TH2-Very-dark-grayish-yellow);

--toggle-switch-background: var();

--slider-background: var(--TH2-Grayish-red-toggle-background-keypadbackground);
--slider-before: var(--TH2-Orange-keybackground-toggle);

--display-background: var(--TH2-Very-light-gray-screen-background);
--display-color: var(--TH2-Very-dark-grayish-yellow);

--calc-body-background: var(--TH2-Grayish-red-toggle-background-keypadbackground);

--button-grid-button: var(--TH2-Light-grayish-yellow-keybackground);
--button-grid-button-color: var(--TH2-Very-dark-grayish-yellow);

--button-grid-delete-btn: var(--TH2-Dark-moderate-cyan-keybackground);
--button-grid-delete-btn-color: var(--TH2-White-text);

--button-grid-reset: var(--TH2-Dark-moderate-cyan-keybackground);
--button-grid-reset-color: var(--TH2-White-text);

--button-grid-equal: var(--TH2-Orange-keybackground-toggle);
--button-grid-equal-color: var(--TH2-White-text);

--shadow: 0px 5px 2px -2px hsl(28, 16%, 65%);

--del-button-hover:  hsl(185, 62%, 48%);
--reset-btn-hover: hsl(185, 62%, 48%);
--equal-btn-hover:   hsl(25, 95%, 58%);
--slider-hover: hsl(25, 95%, 58%);


}

/*THEME - 3*/

[data-theme="3"] {

--main-background-color: var(--TH3-Very-dark-violet-main-background);
--header-calc-theme: var(--TH3-Light-yellow);

--toggle-labels: var(--TH3-Light-yellow);


--display-background: var(--TH3-Very-dark-violet-toggle-background-keypad-background-screen-background);
--display-background-color: var(--TH3-Light-yellow);

--slider-background: var(--TH3-Very-dark-violet-toggle-background-keypad-background-screen-background);
--slider-before: var(--TH3-Pure-cyan-key-background-toggle);

--calc-body-background: var(--TH3-Very-dark-violet-toggle-background-keypad-background-screen-background);

--button-grid-button: var(--TH3-Very-dark-violet-key-background);
--button-grid-button-color: var(--TH3-Light-yellow);

--button-grid-delete-btn: var(--TH3-Dark-violet-key-background);
--button-grid-delete-btn-color: var(--TH3-White-text);

--button-grid-reset: var(--TH3-Dark-violet-key-background);
--button-grid-reset-color: var(--TH3-White-text);


--button-grid-equal: var(--TH3-Pure-cyan-key-background-toggle);
--button-grid-equal-color: var(--TH3-Very-dark-blue);

--button-hover: hsl(274, 45%, 44%);
--del-button-hover: hsl(285, 91%, 52%);
--reset-btn-hover: hsl(285, 91%, 52%);
--equal-btn-hover: hsl(176, 79%, 71%);
--slider-hover: hsl(176, 79%, 71%);

--shadow: 0px 5px 2px -2px hsl(290, 70%, 36%);

--del-reset-shadow: 0px 4px 2px -1px hsl(290, 57%, 52%);
--equal-shadow: 0px 4px 2px -1px hsl(177, 85%, 73%);


}

body {
    font-family: var(--font-family);
    background-color: var(--main-background-color);
    
}

main {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
}

header {
    display: flex;
    flex-direction: row;
    gap: 1rem;
    
}

.calc-theme {
   color: var(--header-calc-theme);
   display: flex;
   align-items: center;
   gap: 9rem; 
   margin-top: 2rem;
}

.calc {
    font-size: 27px;
    font-weight: var(--weights);
}


.theme {
    font-size: 11px;
    font-family: var(--font-family);
    font-weight: var(--weights);
}

.toggle-container {
    display: flex;
    flex-direction: column;
}

.toggle-labels {
    color: var(--toggle-labels);
    padding: 0.5rem;
    display: flex;
    gap: 0.75rem;
}

/* Container for the toggle */
.toggle-switch {
    position: relative;
    display: inline-block;
    width: 50px;
    height: 24px;
}

/* Hide default checkbox */
.toggle-switch input {
    opacity: 0;
    width: 0;
    height: 0;
}

/* The track */
.slider {
    position: absolute;
    cursor: pointer;
    background-color: var(--slider-background);
    border-radius: 24px;
    width: 100%;
    height: 100%;
    padding: 0 2rem;
    transition: background-color 0.3s;
}

/* The circular slider */
.slider::before {
    content: "";
    position: absolute;
    height: 15px;
    width: 15px;
    left: 4px;
    bottom: 5px;
    background-color: var(--slider-before);
    border-radius: 50%;
    transition: transform 0.3s;
    transform: translateX(var(--translate-x, 0));
}


.label {
    opacity: 0.5;
    transition: opacity 0.3s;
  }
  
.active {
    opacity: 1;
    font-weight: bold;
  }


/*DISPLAY SECTION*/

.display {
    margin: 1.5rem;
    width: 20rem;
    padding: 1.5rem;
    border-radius: 5px;
    color: var(--display-color);
    background-color: var(--display-background);
    border: none;
    text-align: right;
    font-size: 25px;
    font-weight: var(--weights);
}


/*CALC-BODY*/

.calc-body {
    width: 20rem;
    padding: 1rem;
    border-radius: 5px;
    background-color: var(--calc-body-background);
}

.button-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1rem;
}

.button-grid button {
    padding: 0.5rem;
    font-size: 15px;
    background-color: var(--button-grid-button);
    color: var(--button-grid-button-color);
    font-weight: var(--weights);
    border-radius: 5px;
    border: none;
    cursor: pointer;
    box-shadow: var(--shadow);
}

.button-grid .delete-btn {
    background-color: var(--button-grid-delete-btn);
    border: none;
    color: var(--button-grid-delete-btn-color);
    box-shadow: var(--del-reset-shadow);
    cursor: pointer;
}   



.span-two {
    grid-column: span 2;
  }

.button-grid .reset {
    background-color: var(--button-grid-reset);
    color: var(--button-grid-reset-color);
    border: none;
    box-shadow: var(--del-reset-shadow);
    cursor: pointer;
  }

.button-grid .equal {
    color: var(--button-grid-equal-color);
    background-color: var(--button-grid-equal);
    border: none;
    box-shadow: var(--equal-shadow);
    cursor: pointer;
  }

  /*ACTIVE ATATES*/

  .slider:hover::before {
    background-color: var(--slider-hover);
  }

  .button-grid button:hover {
    background-color: var(--button-hover);
  }

  .button-grid .delete-btn:hover {
    background-color: var(--del-button-hover);
  }

  .button-grid .reset:hover {
    background-color: var(--reset-btn-hover);
  }

  .button-grid .equal:hover {
    background-color: var(--equal-btn-hover);
  }