* {
    box-sizing: border-box;
    --primary1: #DFBF45;
    --primary2: #FFF3C3;
    --primary3: #FFE996;
    --primary4: #FBDD6C;
    --primary5: #C7A421;
    --primary6: #A0810E;
    --primary7: #F6D55A;
    --secondary1: #8B81CA;
    --secondary2: #6458AE;
    --secondary3: #4A3D9B;
    --secondary4: #23176F;
}

body {
    background-color: var(--primary4);
    font-family: Roboto, sans-serif;
    height: 100vh;
    margin: 0;
    padding: 0;
    padding-top: 8px;
    display: flex;
    flex-flow: column;
    gap: 1rem;
    align-items: center;
}

button {
    background-color: var(--primary3) ;
    color: var(--primary6);
    font-size: 3.5vh;
    border: 0.5vh solid var(--primary1);
    border-radius: 24px;
    transition-duration: .2s;
    box-shadow: 4px 6px 5px 0px #85763a;
}

button:hover {
    background-color: var(--primary1);
    color: var(--primary3);
}

button:active {
    background-color: var(--primary5);
}

header {
    color: var(--primary6);
    font-weight: bolder;
    font-size: 5vh;
    text-align: center;
    margin: 0.5rem auto;
}

h1 {
    margin: 0;
}

footer {
    color: var(--primary6);
}

.main-container {
    background-color: var(--primary2);
    max-height: 78vh;
    aspect-ratio: 1 / 1.4;
    border-radius: 1.4em;
    margin-bottom: 0.3em;
    padding: 0.85em;
    flex: 1;
    display: flex;
    flex-flow: column;
    gap: 0.5em;
}

.screen-container {
    background-color: var(--secondary1);
    color: white;
    text-align: end;
    padding: 0.4em 1em 0 1em;
    border-radius: 1em;
}

.history {
    font-size: 3vh;
    min-height: 2.063rem;
}

.current {
    font-size: 7vh;
}

.keyboard {
    flex: 1;
    display: grid;
    grid: repeat(6, 1fr) / repeat(4, 1fr);
    grid-gap: 0.8rem;
}

#equals {
    background-color: var(--secondary1);
    color: var(--secondary4);
    border-color: var(--secondary2);
    grid-column: 4 / span 1;
    grid-row: 3 / span 4;
}

#equals:hover {
    background-color: var(--secondary2);
    color: var(--secondary1);
}
#equals:active {
    background-color: var(--secondary3);
}

.func {
    background-color: var(--primary7) ;
    color: var(--primary6);
    border-color: var(--primary5);
}

.func:hover {
    background-color: var(--primary5);
    color: var(--primary3);
}

.func:active {
    background-color: var(--primary6);
}

#square {
    position: relative;
    z-index: 0;
}

#square>sup {
    position: relative;
    top: 0;
    left: 0;
    z-index: -1;
}