@import url('https://fonts.googleapis.com/css2?family=Sriracha&display=swap');

:root {
    font-family: 'Sriracha', cursive;
    font-size: 12px;
}

form {
    display: flex;
    position: sticky;
    top: 0;
    flex-flow: row wrap;
    gap: 0.5em;
    place-content: center space-evenly;
    place-items: center center;
    margin-bottom: 4em;
    box-shadow: 0em 0.15em 0.15em #909090;
    background-color: whitesmoke;
    width: 100%;
    text-align: center;
    font-size: 12px;
}

form fieldset,
form fieldset>div,
form fieldset>section {
    display: inline-block;
    vertical-align: middle;
}

form fieldset {
    display: inline-grid;
    grid-template-rows: 1fr;
    grid-auto-columns: max-content;
    grid-auto-flow: column;
    gap: 0.5em;
    place-content: center center;
    place-items: start center;
}

form fieldset label {
    padding: 0em 1em;
}

form fieldset>div {
    position: relative;
}

form fieldset>div>div,
form fieldset>div>input[type=button],
form fieldset>div>input[type=submit],
form fieldset>div>input[type=number],
form fieldset>div>select {
    display: block;
    transition: background-color 0.3s ease-in-out;
    border: 0.2em solid #00000033;
    background: #00000033;
    padding: 1.5em;
    width: 100%;
    height: 100%;
    text-align: center;
}

form fieldset>div>input[type=file],
form fieldset>div>input[type=checkbox] {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    opacity: 0;
    cursor: pointer;
    width: 100%;
    height: 100%;
}

form fieldset>div>input[type=number] {
    padding: 1.35em 0.5em;
    width: 14ch;
}

form fieldset>div>input[type=button] {
    cursor: pointer;
}

@supports (-moz-appearance: auto) {
    form fieldset>div>input[type=number] {
        -moz-appearance: textfield;
        padding: 1.35em 0.5em;
        width: 14ch;
    }

    form fieldset>div>input[type=number]:hover {
        -moz-appearance: auto;
        padding-left: 2em;
    }
}

@supports (appearance: auto) {

    input[type=number]::-webkit-inner-spin-button,
    input[type=number]::-webkit-outer-spin-button {
        appearance: none;
    }

    input[type=number]:hover::-webkit-inner-spin-button,
    input[type=number]:hover::-webkit-outer-spin-button {
        appearance: auto;
    }
}

form fieldset>div>canvas {
    display: block;
    position: relative;
    transform-origin: top center;
    transition: transform 0.3s ease-out, border 0.2s ease-out, background-color 0.2s ease-out;
    z-index: 1;
    border: 0.2em solid #00000066;
    background-color: transparent;
    cursor: zoom-out;
    height: 4.8em;
}

form fieldset>div>canvas:hover {
    transform: scale(5);
    transition: transform 0.3s ease-out, border 0.1s ease-out, background-color 0.1s ease-out;
    transition-delay: 0.4s;
    border: calc(0.2em / 5) solid black;
    background-color: white;
}

form fieldset>div:hover>input+div,
form fieldset>div:hover>input[type=button],
form fieldset>div:hover>input[type=submit],
form fieldset>div:hover>select {
    background: #0000001A;
}

form fieldset>div>input:focus+div,
form fieldset>div>input:focus[type=button],
form fieldset>div>input:focus[type=submit],
form fieldset>div>select:focus {
    outline: -webkit-focus-ring-color auto 5px;
    outline: Highlight auto 5px;
}

form fieldset>div>input[type=file]+div {
    border-style: dashed;
}

form fieldset>div>input[type=number]:valid,
form fieldset>div>input[type=file]:valid+div,
form fieldset>div>input[type=checkbox]:checked+div,
form:valid fieldset>div>input[type=submit] {
    border-color: #00FF0066;
    background-color: #00FF0033;
}

form fieldset>div>input[type=file]+div::after,
form fieldset>div>input[type=checkbox]+div::after {
    content: attr(false);
}

form fieldset>div>input[type=file]:valid+div::after,
form fieldset>div>input[type=checkbox]:checked+div::after {
    content: attr(true);
}

.center {
    display: flex;
    justify-content: center;
    width: max(max-content, 100%);
}

.page {
    flex-grow: 0;
    flex-shrink: 0;;
    margin: 0.5in;
    outline: 0.3em dashed black;
    box-shadow: 0in 0in 0in 0.5in white;
    width: 7.5in;
    height: 10in;
    text-align: center;
}

header {
    display: grid;
    grid-template: min-content / min-content 1fr min-content 1fr min-content 1fr;
    gap: 0.3em;
    place-content: stretch center;
    place-items: center center;
    width: 100%;
}

header input[type="text"] {
    border: 0;
    border-bottom: 0.15em solid black;
    padding: 0em;
    width: 100%;
}

main {
    display: inline-grid;
    grid-auto-flow: column;
    place-content: stretch center;
    place-items: center stretch;
    margin-top: 2em;
}

main span:nth-child(-n+7) {
    justify-self: end;
    padding: 0.3em;
    width: min-content;
    height: min-content;
    text-align: right;
}

main span:nth-child(7n+1) {
    align-self: end;
    width: 100%;
    height: 100%;
    text-align: center;
}

aside container {
    display: inline-block;
    margin: 0.4em;
}

aside span {
    display: block;
}

span {
    font-size: 100%;
}

main div,
aside div {
    image-rendering: pixelated;
    outline: 0.15em solid black;
    outline-offset: calc(0.15em / -2);
    width: 100%;
    height: 100%;
    text-align: center;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
}

main canvas,
aside canvas {
    width: 100%;
    height: 100%;
}

@media print {
    form {
        display: none;
    }

    .page {
        margin: none !important;
        outline: none !important;
        border: none !important;
    }

    body {
        width: min-content;
        height: min-content;
    }
}

@media not print {
    :root {
        background-color: whitesmoke;
    }

    .page {
        background-color: white;
    }

    html[debug=true] * {
        outline: 1px solid red;
        outline-offset: 0px;
        background-color: #0000001A;
    }
}