.body {
    margin: 0px;
    /* scaling */
    --scale-calc-size: 100vmin;
    height: 100vh;
}

/* NAVIGATION */
nav {
    position: absolute;
    width: 100%;
    --nav-content-height: 150px;
    --nav-border-height: 1.5px;
    --nav-height: calc(var(--nav-border-height) * 4 + var(--nav-content-height));
    top: calc(var(--nav-height) * -1);
    transition: top 300ms;
    white-space: nowrap;
    z-index: 1;
}

.title-container {
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: var(--title-background);
    margin: 0px;
    height: calc(var(--nav-content-height) * (3/5));
}

.title-container > h1 {
    font-size: 5vw;
}

.nav-button-container {
    height: calc(var(--nav-content-height) * (2/5));
    padding: 0px 10px;
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: 1fr max-content 1fr;
    background-color: var(--nav-background);
    border-top: var(--nav-border-height) solid #7c7e8d;
    border-bottom: calc(var(--nav-border-height)*3) double #7c7e8d;
    font-size: 3.5vw;
}

#select-theme {
    cursor: pointer;
    font-size: 2.5vw;
}

.theme-option {
    font-size: 2.2vw;
}

.nav-button-container > div {
    align-self: center;
}

.nav-button-container > div:first-child {
    justify-self: start;
}

.nav-button-container > div:last-child {
    justify-self: end;
}


/* ARROW */
.arrow-layout {
    display: flex;
    justify-content: center;
    align-items: center;
}

.arrow {
    position: relative;
    height: var(--arrow-size);
    width: var(--arrow-size);
    margin: 0px auto;
    border-left: calc(.05 * var(--scale-calc-size)) double #f0ede6;
    border-top: calc(.05 * var(--scale-calc-size)) double #303050;
}

.upward-arrow > div.arrow {
    transform: rotate(45deg);
}

.downward-arrow > div.arrow {
    transform: rotate(-135deg);
}

.arrow-container {
    position: relative;
    cursor: pointer;
    --arrow-size: calc(.05 * var(--scale-calc-size));
    height: var(--arrow-size);
    width: var(--arrow-size);
}

/* container for calculator */
.calculator-wrapper {
    height: 100vh;
    width: 100vw;
    display: flex;
    justify-content: center;
    align-items: flex-end;
}

.calculator-background {
    width: calc(.675 * var(--scale-calc-size));
    height: calc(1 * var(--scale-calc-size));
    padding: calc(.045 * var(--scale-calc-size));
    background: var(--color-bckgrnd-3);
    border-top: calc(.012 * var(--scale-calc-size)) ridge var(--color-border-2);
    border-right: calc(.012 * var(--scale-calc-size)) groove var(--color-border-2);
    border-bottom: calc(.012 * var(--scale-calc-size)) groove var(--color-border-2);
    border-left: calc(.012 * var(--scale-calc-size)) ridge var(--color-border-2);
}

/* SCREEN */
.screen {
    width: calc(.54 * var(--scale-calc-size));
    height: calc(.135 * var(--scale-calc-size));
    margin: 0px auto;
    margin-bottom: calc(.014 * var(--scale-calc-size));
    background: var(--color-screen);
    border: calc(.005 * var(--scale-calc-size)) solid var(--color-border-4);
}

.screen > div {
    display: grid;
    grid-template-rows: .5fr 1fr 1fr;
    grid-template-columns: 1fr 10fr;
    height: 100%;
    width: 100%;
}


#screen-toggles {
    width: 100%;
    margin: 0px;
    grid-column: 1 / span 4;
    display: grid;
    grid-template-columns: 7fr 1fr 1fr 1fr;
    font-size: calc(.018 * var(--scale-calc-size));
}

.shift-mode {
    grid-column: 3;
}

.cursor-mode {
    grid-column: 2;
    grid-row: 1;
}

#screen-content {
    padding-left: calc(.009 * var(--scale-calc-size));
    margin: 0px;
    grid-row: 2;
    grid-column: 1 / span 4;
    display: flex;
    gap: calc(.001 * var(--scale-calc-size));
    align-content: center;
    white-space: nowrap;
    overflow-x: scroll;
}

#screen-content sup, #screen-content sub {
    font-size: .7em;
}

#screen-content > div {
    margin: 0px;
}

#equal-sign {
    margin: 0px;
    justify-self: center;
    grid-row: 3;
    font-size: calc(.04 * var(--scale-calc-size));
}

#screen-answer {
    margin-left: 0px;
    margin-right: 0px;
    grid-row: 3;
    display: flex;
    gap: calc(.006 var(--scale-calc-size));
    white-space: nowrap;
    overflow-x: scroll;
}

/* font sizes */

#screen-content > div {
    font-size: calc(.04 * var(--scale-calc-size));
}

#screen-answer > div {
    font-size: calc(.04 * var(--scale-calc-size));
}

#btn-sign {
    font-size: calc(.028 * var(--scale-calc-size));
}

#btn-sign-sub {
    font-size: calc(.04 * var(--scale-calc-size));
}

#btn-equals {
    font-size: calc(.04 * var(--scale-calc-size));
}

#btn-shift-4-sub {
    font-size: calc(.017 * var(--scale-calc-size));
}

#btn-power-sup, #btn-root-sup {
    font-size: calc(.022 * var(--scale-calc-size));
}

/* BUTTONS */
.flex-between {
    display: flex;
    justify-content: space-between;
    gap: calc(.02 * var(--scale-calc-size));
}

.flex-between-wide {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.flex-start {
    display: flex;
    justify-content: start;
    gap: calc(.02 * var(--scale-calc-size));
}

.flex-end {
    display: flex;
    justify-content: end;
}

.flex-center {
    display: flex;
    justify-content: center;
}

.top-button-container {
    white-space: nowrap;
    margin: calc(.015 * var(--scale-calc-size)) calc(.01 * var(--scale-calc-size));
    height: calc(.05 * var(--scale-calc-size));
}

.top-button {
    position: relative;
    padding: calc(.000 * var(--scale-calc-size)) calc(.009 * var(--scale-calc-size));
    background-color: var(--color-fill-2);
    color: var(--color-font);
    border: calc(.003 * var(--scale-calc-size)) solid var(--color-border-3);
    border-bottom: calc(.004 * var(--scale-calc-size)) solid var(--color-border-3);
    font-size: calc(.028 * var(--scale-calc-size));
    cursor: pointer;
}
.top-button:active {
    border: calc(.0024 * var(--scale-calc-size)) solid var(--color-border-3);
    border-bottom: calc(.003 * var(--scale-calc-size)) solid var(--color-border-3);
    top: calc(.002 * var(--scale-calc-size));
}

.bottom-button-container {
    grid-row: 3;
    width: calc(.54 * var(--scale-calc-size));
    height: calc(.54 * var(--scale-calc-size));
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr; /* 4 columns */
    grid-template-rows: 1fr 1fr 1fr 1fr 1fr; /* 5 rows */
    padding: calc(.006 * var(--scale-calc-size)); /* controls bottom-button size */
    margin: 0px auto;
    background: var(--color-bckgrnd-2);
    border: calc(.001 * var(--scale-calc-size)) solid var(--color-border-1);
}

.button {
    position: relative;
    padding: 0px;
    margin: calc(.012 * var(--scale-calc-size)); /* controls bottom-button size */
    color: var(--color-font);
    cursor: pointer;
    font-size: calc(.028 * var(--scale-calc-size));
}

.button.normal {
    background: var(--color-fill-2);
    border: calc(.004 * var(--scale-calc-size)) solid var(--color-border-3);
    border-bottom: calc(.006 * var(--scale-calc-size)) solid var(--color-border-3);
}
.button.normal:active {
    border-bottom: calc(.004 * var(--scale-calc-size)) solid var(--color-border-3);
    top: calc(.002 * var(--scale-calc-size));
}

.button.orange {
    background: #ee531b;
    border: calc(.005 * var(--scale-calc-size)) solid #d94712;
    border-bottom: calc(.007 * var(--scale-calc-size)) solid #d84713;
}
.button.orange:active {
    border-bottom: hidden;
    top: calc(.002 * var(--scale-calc-size));
}

.button.grid-start { /* special operations section */
    grid-column-start: 1;
}

.button.grid-end { /* operations section */
    grid-column-start: 4;
}

/* individual buttons */
/* #btn-clear {

} */

#btn-squared {
    grid-column: 2;
}

#btn-cubed {
    grid-column: 3;
}

#btn-num9 {
    grid-column: 3;
}

#btn-num8 {
    grid-column: 2;
    grid-row: 2;
}

#btn-num7 {
    grid-column: 1;
    grid-row: 2;
}

#btn-num6 {
    grid-column: 3;
}

#btn-num5 {
    grid-column: 2;
    grid-row: 3;
}

#btn-num4 {
    grid-column: 1;
    grid-row: 3;
}

#btn-num3 {
    grid-column: 3;
    grid-row: 4;
}

#btn-num2 {
    grid-column: 2;
    grid-row: 4;
}

#btn-num1 {
    grid-column: 1;
}
#btn-num0 {
    grid-column: 2;
    grid-row: 5;
}

/* #btn-negative {
    
} */

#btn-decimal {
    grid-column: 3;
}

#btn-plus {
    grid-row: 4;
}

#btn-minus {
    grid-row: 3;
}

#btn-multiply {
    grid-row: 2;
}

#btn-divide {
    grid-row: 1;
}

#btn-equals {
    grid-row: 5;
}

.soft-edge-style {
    border-radius: calc(.01 * var(--scale-calc-size)) calc(.01 * var(--scale-calc-size)) calc(.005 * var(--scale-calc-size)) calc(.005 * var(--scale-calc-size));
}

.left-right-style {
    border-radius: calc(.01 * var(--scale-calc-size)) calc(.018 * var(--scale-calc-size)) calc(.01 * var(--scale-calc-size)) calc(.018 * var(--scale-calc-size));
}

.right-left-style {
    border-radius: calc(.018 * var(--scale-calc-size)) calc(.01 * var(--scale-calc-size)) calc(.018 * var(--scale-calc-size)) calc(.01 * var(--scale-calc-size));
}

/* for parenthesis buttons */
.left-right-style-2 {
    border-radius: calc(.01 * var(--scale-calc-size)) calc(.025 * var(--scale-calc-size)) calc(.018 * var(--scale-calc-size)) calc(.01 * var(--scale-calc-size));
}

.right-left-style-2 {
    border-radius: calc(.025 * var(--scale-calc-size)) calc(.01 * var(--scale-calc-size)) calc(.01 * var(--scale-calc-size)) calc(.018 * var(--scale-calc-size));
}

/* history pannel */
#history-panel {
    z-index: 2;
    position: absolute;
    transform: translate(0vmin, calc(-.05 * var(--scale-calc-size)));
    width: 100vw;
    background: #e6e5d8;
    color: #040410;
    opacity: 0;
    cursor: default;
    font-size: 3.4vw;
}

#history-panel > div {
    overflow-x: scroll;
}

/* Keyframe Animations */
@keyframes pointing {
    0%, 62.5%, 100% {top: 0vmin}
    37%, 50% {top: -1.5vmin}
}

/* maximum fonts for navigation */
@media(min-width: 941px) {
    .title-container > h1 {
        font-size: 48px;
    }
    .nav-button-container {
        font-size: 34px;
    }
    #select-theme {
        font-size: 24px;
    }
    .theme-option {
        font-size: 20px;
    }
    #history-panel {
        font-size: 34px;
    }
}

/* minimum fonts for navigation */
@media(max-width: 712px) {
    .title-container > h1 {
        font-size: 35px;
    }
    .nav-button-container {
        font-size: 25px;
    }
    #select-theme {
        font-size: 20px;
    }
    .theme-option {
        font-size: 20px;
    }
    #history-panel {
        font-size: 24px;
    }
}

@media(max-width: 430px) {
    .title-container > h1 {
        font-size: 8vw;
    }
    .nav-button-container {
        font-size: 5.5vw;
    }
    #select-theme {
        font-size: 4.4vw;
    }
    .theme-option {
        font-size: 4.4vw;
    }
    #history-panel {
        font-size: 5.3vw;
    }
}

/* Hover Events */
@media(hover: hover) and (pointer: fine) {
    /* only on desktop */
    
    .highlight-back:hover {
        /* relative coloring */
        background: rgb(from var(--color-bckgrnd-2) 176 g b);
    }

    .downward-arrow-anim:hover {
        animation: pointing 800ms linear 250ms infinite;
    }

    .upward-arrow-anim:hover {
        animation: pointing 800ms linear reverse 250ms infinite;
    }

    .button-hover-blue:hover {
        color: hsl(240, 84%, 52%);
        cursor: pointer;
    }
}