html[data-theme="theme1"] {
    /* background colors */
    --main-bg-color: hsl(222, 26%, 31%);
    --keypad-toggle-bg-color: hsl(223, 31%, 20%);
    --screen-bg-color: hsl(224, 36%, 15%);
    --screen-text-color: #fff;
    /* keyboard colors */
    --function-key-bg-color: hsl(225, 21%, 49%);
    --function-key-bg-color-hover: #A2B2E1;
    --function-key-shadow-color: hsl(224, 28%, 35%);
    --equal-key-bg-color: hsl(6, 63%, 50%);
    --equal-key-bg-color-hover: #F96B5B;
    --equal-key-shadow-color: hsl(6, 70%, 34%);
    --primary-key-bg-color: hsl(30, 25%, 89%);
    --primary-key-bg-color-hover: #fff;    
    --primary-key-shadow-color: hsl(28, 16%, 65%);
    /* text colors */
    --text-primary-color: hsl(221, 14%, 31%);
    --text-secondary-color: #fff;
    --text-function-key-color: #fff;
    --text-equal-key-color: #fff;
}

html[data-theme="theme2"] {
    /* background colors */
    --main-bg-color: hsl(0, 0%, 90%);
    --keypad-toggle-bg-color: hsl(0, 5%, 81%);
    --screen-bg-color: hsl(0, 0%, 93%);
    --screen-text-color: hsl(60, 10%, 19%);
    /* keyboard colors */
    --function-key-bg-color: hsl(185, 42%, 37%);
    --function-key-bg-color-hover: #62B5BC;
    --function-key-shadow-color: hsl(185, 58%, 25%);
    --equal-key-bg-color: hsl(25, 98%, 40%);
    --equal-key-bg-color-hover: #FF8A38;
    --equal-key-shadow-color: hsl(25, 99%, 27%);
    --primary-key-bg-color: hsl(45, 7%, 89%);
    --primary-key-bg-color-hover: #fff;
    --primary-key-shadow-color: hsl(35, 11%, 61%);
    /* text colors */
    --text-primary-color: hsl(60, 10%, 19%);
    --text-secondary-color: hsl(0, 0, 100%);
    --text-function-key-color: #fff;
    --text-equal-key-color: #fff;
}


html[data-theme="theme3"] {
    /* background colors */
    --main-bg-color: hsl(268, 75%, 9%);
    --keypad-toggle-bg-color: hsl(268, 71%, 12%);
    --screen-bg-color: hsl(268, 71%, 12%);
    --screen-text-color: hsl(52, 100%, 62%);
    /* keyboard colors */
    --function-key-bg-color: hsl(281, 89%, 26%);
    --function-key-bg-color-hover: #8631AF;
    --function-key-shadow-color: hsl(285, 91%, 52%);
    --equal-key-bg-color: hsl(176, 100%, 44%);
    --equal-key-bg-color-hover: #93FFF8;
    --equal-key-shadow-color: hsl(177, 92%, 70%);
    --primary-key-bg-color: hsl(268, 47%, 21%);
    --primary-key-bg-color-hover: #6C34AC;
    --primary-key-shadow-color: hsl(290, 70%, 36%);
    /* text colors */
    --text-primary-color: hsl(52, 100%, 62%);
    --text-secondary-color: hsl(198, 20%, 13%);
    --text-white-color: #fff;
    --text-function-key-color: #fff;
    --text-equal-key-color: #000;
}


body {
    font-family: 'Spartan', sans-serif;
    font-size: 1rem;
    font-weight: 700;
    color: var(--white-color);
    background-color: var(--main-bg-color);
    margin: 4em auto;
}

/* typography */
h1,
h2,
p,
button,
input {
    margin: 0;
    padding: 0;
    font-family: 'Spartan', sans-serif;
    font-weight: 700;
}

h1 {
    font-size: 2rem;
}

p,
span {
    font-size: .75rem;
}

.display {
    font-size: 2rem;
    text-align: right;
    color: var(--text-primary-color);
}

button {
    font-size: 1.75rem;
    cursor: pointer;
}

label {
    cursor: pointer;
}

.btn-function-key,
.btn-equal-key {
    font-size: 1rem;
}

/* layout */

.header {
    color: var(--text-primary-color);
    display: grid;
    grid-template-columns: 100px auto 71px;
    grid-template-rows: 18px 26px;
    grid-template-areas:
        "title . theme-numbers"
        "title theme switch-toggle";
}

.title {
    grid-area: title;
    display: flex;
    align-items: flex-end;
}

.theme {
    place-self: end;
    margin-right: 1.5em;
    grid-area: theme;
}

.theme-numbers {
    grid-area: theme-numbers;
    place-self: end;
    width: 71px;
    display: flex;
    justify-content: space-evenly;
    box-sizing: border-box;
    margin-bottom: 5px;
}

.theme-numbers span {
    padding: 0 7px;
}

.switch-toggle {
    grid-area: switch-toggle;
    place-self: end;
    display: flex;
    justify-content: space-between;
    padding: 5px 2px;
    box-sizing: border-box;
    background: var(--keypad-toggle-bg-color);
    border-radius: 50px;
    width: 70px;
    padding: 5px;
}


/* toggle switch */

.switch-toggle input {
    display: flex;
    justify-content: space-evenly;
    display: none;
}

.toggle {
    background-color: var(--equal-key-bg-color);
    color: var(--equal-key-bg-color);
    height: 16px;
    width: 16px;
    border-radius: 50%;
    opacity: 0;
}

.toggle:hover {
    filter: brightness(1.33);
}

.toggled-on {
    opacity: 1;
}


.container {
    background: var(--main-bg-color);
    color: var(--screen-text-color);
    padding: 1.5em;
    max-width: 540px;
    display: grid;
    grid-template-columns: minmax(327px, auto);
    grid-template-areas:
        "header"
        "display"
        "keyboard";
}

.header {
    grid-area: header;
    color: var(--screen-text-color);
    margin-bottom: 2em;
}

.container-display {
    grid-area: display;
    width: 100%;
    
}

.display {
    background: var(--screen-bg-color);
    color: var(--screen-text-color);
    box-sizing: border-box;
    padding: .9em .8em .7em .8em;
    margin-bottom: .7em;
    width: 100%;
    border-radius: 10px;
    overflow: auto;
}

.keyboard {
    grid-area: keyboard;
    background: var(--keypad-toggle-bg-color);
    display: grid;
    grid-template-columns: repeat(4, minmax(60px, 1fr));
    grid-template-rows: repeat(5, minmax(60px, 1fr));
    gap: 1em;
    padding: 1.6em;
    border-radius: 10px;
    justify-content: center;
}

.btn {
    border-radius: 10px;
    outline: none;
    border: none;
    background: var(--primary-key-bg-color);
    box-shadow: 0 4px 0 0 var(--primary-key-shadow-color);
    color: var(--text-primary-color);
}

.btn:hover,
.btn:focus {
    background: var(--primary-key-bg-color-hover);
}

.btn-function-key {
    background: var(--function-key-bg-color);
    box-shadow: 0 4px 0 0 var(--function-key-shadow-color);
    color: var(--text-function-key-color);
}
.btn-function-key:hover,
.btn-function-key:focus {
    background: var(--function-key-bg-color-hover);
}

.btn-equal-key {
    grid-column: 3 / 5;
    background: var(--equal-key-bg-color);
    box-shadow: 0 4px 0 0 var(--equal-key-shadow-color);
    color: var(--text-equal-key-color);
}

.btn-equal-key:hover,
.btn-equal-key:focus {
    background: var(--equal-key-bg-color-hover);
}

.btn-reset-key {
    grid-column: 1 / 3;
}

@media (min-width: 400px) {
    .container {
        margin: 2em auto;      
    }

    .keyboard {
        gap: 1.25em;
        padding: 2em;
    }

    .display {
        font-size: 2.5rem
    }
}
 
@media (min-width: 450px) {
    .keyboard {
        gap: 1.5em;
        padding: 2em;
    }

    .display {
        font-size: 3rem
    }
    
    .attribution div{
        display: inline;
    }
}

/* attribution styles */
.attribution {
    font-size: 12px;
    text-align: center;
    color: var(--screen-text-color);
}

.attribution div {
    margin-bottom: 1em;
}

.attribution a {
    color: var(--equal-key-bg-color-hover);
    text-decoration: none;
}

.attribution a:hover {
    color: var(--text-function-key-color);
    background-color: var(--function-key-bg-color);
    padding: .5em;
    border-radius: 10px;
}