/* #region - snippets */
html {
    line-height: 1.15;
    -ms-text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%
}

body {
    margin: 0
}

article,
aside,
footer,
header,
nav,
section {
    display: block
}

h1 {
    font-size: 2em;
    margin: 0
}

figcaption,
figure,
main {
    display: block
}

figure {
    margin: 1em 40px
}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible
}

pre {
    font-family: monospace, monospace;
    font-size: 1em
}

a {
    background-color: transparent;
    -webkit-text-decoration-skip: objects
}

abbr[title] {
    border-bottom: none;
    text-decoration: underline;
    text-decoration: underline dotted
}

b,
strong {
    font-weight: inherit
}

b,
strong {
    font-weight: bolder
}

code,
kbd,
samp {
    font-family: monospace, monospace;
    font-size: 1em
}

dfn {
    font-style: italic
}

mark {
    background-color: #ff0;
    color: #000
}

small {
    font-size: 80%
}

sub,
sup {
    font-size: 75%;
    line-height: 0;
    position: relative;
    vertical-align: baseline
}

sub {
    bottom: -.25em
}

sup {
    top: -.5em
}

audio,
video {
    display: inline-block
}

audio:not([controls]) {
    display: none;
    height: 0
}

img {
    border-style: none
}

svg:not(:root) {
    overflow: hidden
}

button,
input,
optgroup,
select,
textarea {
    font-family: sans-serif;
    font-size: 100%;
    line-height: 1.15;
    margin: 0
}

button,
input {
    overflow: visible;
    border: none;
}

button,
select {
    text-transform: none
}

button,
html [type=button],
[type=reset],
[type=submit] {
    -webkit-appearance: button
}

button::-moz-focus-inner,
[type=button]::-moz-focus-inner,
[type=reset]::-moz-focus-inner,
[type=submit]::-moz-focus-inner {
    border-style: none;
    padding: 0
}

button:-moz-focusring,
[type=button]:-moz-focusring,
[type=reset]:-moz-focusring,
[type=submit]:-moz-focusring {
    outline: 1px dotted ButtonText
}

fieldset {
    padding: .35em .75em .625em
}

legend {
    box-sizing: border-box;
    color: inherit;
    display: table;
    max-width: 100%;
    padding: 0;
    white-space: normal
}

progress {
    display: inline-block;
    vertical-align: baseline
}

textarea {
    overflow: auto
}

[type=checkbox],
[type=radio] {
    box-sizing: border-box;
    padding: 0
}

[type=number]::-webkit-inner-spin-button,
[type=number]::-webkit-outer-spin-button {
    height: auto
}

[type=search] {
    -webkit-appearance: textfield;
    outline-offset: -2px
}

[type=search]::-webkit-search-cancel-button,
[type=search]::-webkit-search-decoration {
    -webkit-appearance: none
}

::-webkit-file-upload-button {
    -webkit-appearance: button;
    font: inherit
}

details,
menu {
    display: block
}

summary {
    display: list-item
}

canvas {
    display: inline-block
}

template {
    display: none
}

[hidden] {
    display: none
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    border: 0;
    padding: 0;
    white-space: nowrap;
    clip-path: inset(100%);
    clip: rect(0 0 0 0);
    overflow: hidden;
}

html {
    box-sizing: border-box;
    font-size: 125%;
}

*,
*:before,
*:after {
    box-sizing: inherit;
}

/* #endregion - snippets */

/* #region - stops scroll bounce */
html,
body {
    display: grid;
    overflow: hidden;
}

#root {
    /* removes default margins */
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    /* prevent mobile scroll bouncing */
    overflow-x: hidden;
    overflow-y: hidden;
}

/* #endregion - stop scroll bounce */

/* #region - default styles */
.wrapper {
    max-width: 1080px;
    width: 90%;
    margin: 0 auto;
}

img {
    max-width: 100%;
    width: auto;
    height: 100%;
}

h2,
h3,
h4 {
    margin: 0;
    padding: 10px;
}

/* #endregion - default styles */


/* #region - variables */
:root {
    /* background colors */
    --background-green: hsl(121, 71%, 15%);
    --chalk-text: hsla(0, 0%, 100%, 0.7);
    --footer-gradient: linear-gradient(to top, hsl(34, 73%, 20%), hsl(34, 72%, 35%));
    --header-gradient: linear-gradient(to bottom, hsl(34, 73%, 20%), hsl(34, 72%, 35%));
    --button-border: hsla(170, 35%, 69%, 0.7);
    /* mark colors */
    --checkmark-solid: #bcdf8a;
    --checkmark-transparent: #97ce4b94;
    --xmark-solid: #ed7777;
    --xmark-transparent: #e5343491;
    /* main colors */
    --main-text-color: #fff;
    --main-text-fill: transparent;
    --wood-text-color: #aca697;
    --wood-text-fill: #6f6a5e78;
    --range-button-text: #b8ad948a;
    --range-button-hover: #b8ad942b;
    /* fonts */
    --title-font: 'Londrina Outline', cursive;
    --main-font: 'Callie Chalk Font', sans-serif;
    --wood-font: 'Neucha', cursive;
    /* sizes */
    --work-area-font-size: calc(1rem + 1vw);
    --main-font-size: calc(0.8rem + 1vw);
    --main-line-height: calc(1.8rem + 1vw);
    --apple-size: calc(10rem + 3vw);
    --answer-circle-position: 15px;
    /* grid sizes */
    --body-grid-rows: 7vh 86vh 7vh;
    --main-grid-rows: 16vh 70vh;
    --main-grid-columns: 30vw 40vw 30vw;
}

/* #endregion - variables */

#grid {
    display: grid;
    grid-template-areas:
        "header"
        "main"
        "footer";
    grid-template-rows: var(--body-grid-rows);
    grid-template-columns: 100vw;
}

.title-text,
.footer-text,
.work-area,
.retest-section,
.form-label,
.input,
.answer-circle,
.correct-answer,
.to,
button,
.total,
#x-mark,
#checkmark,
li::before {
    text-align: center;
    opacity: 0.8;
    /* #region - font chalk texture */
    background: url(./images/textures/white_chalk_texture_square.png) repeat center center;
    background-size: 25px;
    color: var(--main-text-color);
    -webkit-text-fill-color: var(--main-text-fill);
    -webkit-background-clip: text;
    /* #endregion - font chalk texture */
}

.retest-section,
.range,
.range-button-container {
    font-family: var(--main-font);
    font-size: var(--main-font-size);
    line-height: var(--main-line-height);
}

.work-area {
    font-family: var(--main-font);
    font-size: var(--work-area-font-size);
    line-height: var(--main-line-height);
}

body {
    background-color: var(--background-green);
    height: 100%;
    margin: 0;
}

main {
    display: grid;
    grid-area: main;
    grid-template-areas:
        "board-top board-top board-top"
        "board-left board-mid board-right";
    grid-template-rows: var(--main-grid-rows);
    grid-template-columns: var(--main-grid-columns);

    background: url(./images/textures/chalkboard_texture_wgrain.png.webp) no-repeat;
    background-size: cover;
    background-position-y: bottom;
}

/* background chalkboard texture */
.texture {
    height: 100vmax;
    opacity: 0.7;
}

/* head and foot wood texture */
.wood-grain {
    width: 100%;
    height: inherit;
    opacity: 0.3;
    background-image: url("./images/textures/long_wood_grain.png");
    mix-blend-mode: soft-light;
}

/* #region - heading  */
/* chalk title */
.title-wrapper {
    display: grid;
    grid-area: board-top;
    width: max-content;
    justify-self: center;
}

.title-text {
    font-family: var(--title-font);
    font-size: calc(7vh + 2rem);
    padding: 0 25px;
}

.top-frame {
    grid-area: header;
    display: grid;
    background: var(--header-gradient);
    box-shadow: 0 1px 5px 0.2px;
}

.footer .wood-grain {
    display: flex;
    background-position-y: bottom;
    justify-content: center;
    align-items: center;
}

.footer {
    grid-area: footer;
    background: var(--footer-gradient);
    box-shadow: 0 -1px 5px 0.2px;
}

.top-frame,
.footer {
    height: 100%;
}

.footer-text-container {
    display: flex;
    grid-area: footer;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
}

.footer-text {
    font-size: 5vmin;
    letter-spacing: 0.4rem;
    -webkit-text-fill-color: var(--wood-text-fill);
}

.footer-text,
.toggle {
    font-family: var(--wood-font);
    color: var(--wood-text-color);
    -webkit-text-stroke: 0.1px #000;
    mix-blend-mode: hard-light;
    text-align: center;
    transform: skew(-20deg, 0deg);
}

/* range toggle button */
.range-button-container {
    display: flex;
    grid-area: header;
    height: 100%;
    justify-content: flex-end;
    align-items: center;
    padding: 2px 25px;
}

.toggle {
    font-size: 1.8rem;
    letter-spacing: 0.2rem;
    -webkit-text-fill-color: var(--range-button-text);
}

/* #endregion - heading  */
/* #region - workspace area */

.work-area {
    grid-area: board-mid;
    /* position */
    display: flex;
    justify-content: center;
    align-self: center;
}

.work-area-form {
    width: 100%;
    justify-content: center;
}

.equation-text-container {
    display: flex;
    justify-content: center;
    width: 100%;
}

.equation-text,
.correct-answer {
    display: flex;
    justify-content: center;
    font-size: inherit;
    line-height: calc(var(--main-font-size) * 2);
}

.answer-circle {
    display: flex;
    position: absolute;
    margin-left: calc(8rem + 25vmin);
    /* = -15px */
    margin-top: calc(0px - var(--answer-circle-position));
    padding: var(--answer-circle-position);
    background: url('./images/oblong_scribble.png') no-repeat;
    background-size: calc(var(--main-font-size) + 14vh);
    background-position: center;
    height: fit-content;
    width: calc(var(--main-font-size) * 6);
    align-items: center;
    justify-content: center;
}

.answer-input {
    margin: 10px;
}

.answer-button {
    margin: 5px auto;
}

.mark {
    display: grid;
    position: absolute;
    font-size: 4rem;
    margin-top: 4rem;
    margin-left: calc(10vw + 7rem);
    background-size: cover;
    padding: 15px;
}

#checkmark {
    /* redefining fill colors for checkmark */
    --main-text-color: var(--checkmark-solid);
    --main-text-fill: var(--checkmark-transparent);
}

#x-mark {
    /* redefining fill colors for x-mark */
    --main-text-color: var(--xmark-solid);
    --main-text-fill: var(--xmark-transparent);
}

/* #endregion - workspace area */

/* #region - counter */
.counter-box {
    grid-area: board-right;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    align-items: flex-end;
    font-family: var(--main-font);
}

.apple-wrapper {
    display: flex;
    background: url('./images/chalk_apple.png') no-repeat;
    background-size: contain;
    background-position-x: center;
    background-position-y: bottom;
    justify-content: center;
    align-items: center;
    height: var(--apple-size);
    width: var(--apple-size);
}

.total {
    font-size: 1.5rem;
    background-position-y: center;
    width: 60%;
    line-height: 2.5rem;
    margin-top: 25px;
}

/* #endregion - counter */

/* #region - range selection */
.range {
    grid-area: board-left;
    display: flex;
    flex-direction: column;
    margin: 5vh 20px;
    justify-content: center;
}

form {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.form-label {
    margin: 0;
}

.selection {
    display: flex;
    justify-content: center;
    align-items: center;
}

.input {
    display: inline-block;
    background-color: transparent;
    border-style: none;
    border-bottom: 3px solid var(--chalk-text);
    font-family: var(--main-font);
    font-size: inherit;
    line-height: inherit;
    text-align: center;
    width: 50%;
    padding: 2px 4px;
    margin: 10px 0 25px 0;
    caret-color: var(--chalk-text);
    /* removes default focus style */
    outline: none;
}

.to {
    padding: 0 15px;
}

.button,
.retest-title {
    border: 3px solid var(--button-border);
    border-radius: 255px 15px 225px 15px/15px 225px 15px 255px;
    padding: 8px 10px 0 10px;
    font-family: inherit;
    font-size: var(--main-font-size);
    line-height: inherit;
}

button:hover:not(.toggle) {
    text-shadow: 0 0 20px hsla(0, 0%, 100%, 0.7);
}

.toggle:hover {
    -webkit-text-fill-color: var(--range-button-hover);
}

/* #endregion - range selection */

/* #region retest */
.retest-section {
    grid-area: board-mid;
    display: flex;
    flex-direction: column;
    align-items: center;
    row-gap: 10%;
    margin-top: 1rem;
}

.retest-container {
    display: flex;
    flex-direction: column;
    justify-content: space-around;
    align-items: center;
}

.retest-title {
    width: fit-content;
    height: fit-content;
}

ul {
    display: flex;
    visibility: hidden;
    list-style-type: none;
    flex-direction: column;
    row-gap: 3vh;
    padding: 0;
    margin-top: 5vh;
}

li {
    text-align: start;
    margin-left: -2vw;
}

li .retest-button {
    /* border-bottom: 3px solid transparent; */
    border-bottom: 3px solid hsla(170, 35%, 69%, 0.7);
    border-radius: 260px / 18px;
    width: fit-content;
    padding: 2px 15px 0 15px;
    font-family: inherit;
    font-size: calc(var(--main-font-size) / 1.2);
    line-height: calc(var(--main-line-height) / 2);
    padding-top: 1rem;
}

li::before {
    visibility: hidden;
    content: '✔︎';
    color: var(--checkmark-solid);
    -webkit-text-fill-color: var(--checkmark-transparent);
    padding: 15px 0 15px 15px;
    font-size: calc(var(--main-font-size) * 1.5);
}

li:hover::before,
li:active::before {
    visibility: visible;
}

.hidden {
    visibility: hidden;
}

.visible {
    visibility: visible;
}

/* #endregion retest */

/* #endregion range toggle button */

/* #region media queries */

@media (min-width: 761px) {
    .range {
        transform: skew(-1deg, -15deg);
    }
}

@media (max-width: 761px) and (min-height: 500px) {

    #grid {
        /* change to dynamic view height for tablet and mobile */
        --body-grid-rows: 7dvh 86dvh 7dvh;
    }

    main {
        grid-template-areas:
            "board-top board-top board-top"
            "board-left board-mid board-right"
            "board-bottom-left board-bottom-mid board-right";
        --main-grid-rows: 16dvh 38dvh 32dvh;
        grid-template-rows: var(--main-grid-rows);
        --main-grid-columns: 20vw 60vw 20vw;
        grid-template-columns: var(--main-grid-columns);
    }

    .range {
        grid-area: board-mid;
        margin: 3vh;
    }
}

@media (orientation: portrait) and (max-width: 500px) {
    main {
        /* changed sides from 20vw to 10vw */
        --main-grid-columns: 10vw 80vw 10vw;
    }
}

/* portrait mobile excluding address bar */
/* @media (max-height: 600px) {

    main {
        grid-template-areas:
            "board-top board-top board-top"
            "board-left board-mid board-right"
            "board-bottom-left board-bottom-mid board-right";
        grid-template-rows: 8vh 40vh 26vh;
        --main-grid-columns: 20vw 60vw 20vw;
        grid-template-columns: var(--main-grid-columns);

        background: tomato;
    }

    .title-text {
        font-size: calc(4vh + 2rem);
    }

    .apple-wrapper {
        --apple-size: calc(9rem);
    }
} */

/* horizontal mobile */
@media (max-height: 500px) {

    #grid {
        --body-grid-rows: 7dvh 86dvh 7dvh;
    }

    main {
        grid-template-areas:
            "board-left board-top board-right"
            "board-left board-mid board-right";
        --main-grid-rows: 16dvh 70dvh;
    }

    .work-area,
    .retest-section,
    .range {
        font-size: 0.8rem;
        line-height: 1.8rem;
    }

    .answer-circle {
        margin-left: calc(8rem + 12vmin);
    }

    .retest-section {
        row-gap: 3vh;
    }

    ul {
        margin-top: 3vh;
        row-gap: 0.5vh;
    }
}

.display-none {
    display: none;
}

:disabled:not(input) {
    opacity: 0.25;
    text-shadow: 0 0 20px hsla(0, 0%, 100%, 0.7);

}

/* #endregion media queries */