:root {
    --spacing: 0.5rem;
    --svg: 250px;
    --gui: fit-content;
}

#output {
    display: none !important;
}

#frame {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    counter-reset: oppg-count;
}

.gui label {
    border: solid 1px rgba(128, 128, 128, 0.301);
    margin: 4px;
    white-space: nowrap;
}

div.section {
    counter-increment: oppg-count;
    color: rgb(2, 49, 2);
    font-size: 1em;
    margin-top: 2.3em;
    margin-bottom: var(--spacing);
    position: relative;
    min-height: 1.6rem;
    padding-top: 0.8em;
}

div.section>*:nth-child(2) {
    margin-top: calc(2em + var(--spacing));
}



div.oppgave {
    color: blue;
    font-size: 1.5em;
    position: absolute;
    top: 0rem;
}

div.oppgave:empty::before {
    position: relative;
    content: attr(title) " " counter(oppg-count) ". ";
    text-transform: capitalize;
}

h1 {
    position: relative;
}

h1 span.date {
    position: absolute;
    right: 20px;
    top: -12px;
}

.blush {
    animation: blush 800ms forwards;
}


.slow.blush {
    animation: hotblush 2800ms forwards;
}

@keyframes hotblush {
    0% {
        background-color: rgba(57, 205, 34, 0.653);
    }

    99% {
        background-color: rgba(255, 0, 0, 0.055);
    }

    99% {
        background-color: inherit;
    }
}


@keyframes blush {
    0% {
        background-color: rgba(255, 0, 0, 0.055);
    }

    99% {
        background-color: rgba(255, 0, 0, 0.055);
    }

    99% {
        background-color: inherit;
    }
}

div.section.fasit {
    counter-reset: oppg-count -1;
}

#mathView {
    padding: 3px;
    /*max-width:210mm;*/
    border-right: solid rgba(128, 128, 128, 0.192) 1px;
}

aside.math div {
    color: black !important;
}

@media print {

    div.format.page,
    div.format.side {
        display: block !important;
        page-break-after: always;
    }

    div.source {
        page-break-before: always;
    }

    div.oppgave {
        page-break-after: avoid !important;
    }

    .source,
    .section,
    .oppgave,
    .math,
    .algebra,
    .equation,
    .plots,
    code {
        page-break-inside: avoid;
    }

    code {
        color: black;
    }

    .gui,
    aside.gui,
    div.erfasit,
    div.section.fasit.skjult {
        display: none !important;
    }

    #mathView {
        border-right: none;
    }

    h1 span.date {
        position: absolute;
        right: -100px;
        top: -52px;
    }

    div.section.fasit.skjult~* {
        display: none;
    }
}


div.oppgave.fasit::before {
    content: "Fasit ";
    color: rgb(90, 17, 12);
    font-size: 2rem;
}

#frame>div {
    margin: 1rem;
    padding: 5px;
}

aside.gui {
    height: var(--gui);
    overflow: hidden;
    margin-top: 0.2rem;
    border-top: solid rgba(0, 0, 0, 0.203) 1px;
}



#editor {
    position: fixed;
    right: 0;
    top: 0;
    min-width: 300px;
    /* width: calc(90vw - 210mm); */
    width: fit-content;
    border: solid 1px blue;
    border-top: 6px solid blue;
    background-color: #fff;
}



#editor>textarea {
    font-size: 1.2rem;
    line-height: 1.7rem;
    height: calc(min(60vh, 60rem));
    width: 30em;
    margin-top: 5px;
    margin-right: 15px;
}

#edbox>div {
    height: 16px;
}

dl {
    display: grid;
    grid-template-columns: auto 1fr;
    column-gap: 1rem;
    /* spacing between dt and dd */
}

dl dt {
    font-weight: bold;
    margin-left: 1rem;
    color: slateblue;
}

dl dd {
    color: darkgreen;
}


#measure {
    position: absolute;
    top: -200px;
    left: 0;
    width: 100%;
    height: 100px;
}

div.abc,
aside,
div.algebra,
div.equation,
div.math {
    counter-reset: math-count 0;
}

div.gridy,
div.equation>div,
div.algebra>div,
div.math>div {
    position: relative;
    margin-left: 3rem;
    counter-increment: math-count;
    margin-top: 0.3em;
}

div.algebra div.gridy {
    display: grid;
    grid-template-columns: 10fr 1fr 10fr 5fr;
    padding-bottom: 4px;
    color: darkgreen;
}

div.equation>div {
    display: grid;
    grid-template-columns: 10fr 1fr 10fr 5fr;
    padding-bottom: 4px;
    color: darkblue;
}

.math div.eq {
    display: grid;
    grid-template-columns: 10fr 1fr 10fr;
}

aside.grid2,
div.grid2 {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
}

aside.grid3,
div.grid3 {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
}

aside.grid4,
div.grid4 {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
}

aside.grid5,
div.grid5 {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
}

div.abc div.gridy::before,
div.algebra.abc div.gridy::before,
div.algebra.bokstav>div::before,
div.algebra.abc>div::before,
div.math.abc>div>div:before,
div.math.bokstav>div>div:before {
    content: counter(math-count, lower-alpha) ") ";
    position: absolute;
    left: -40px;
    top: 0;
}

div.chk div.gridy::before,
div.algebra.chk div.gridy::before,
div.algebra.chk>div::before,
div.math.chk>div>div:before {
    content: " ";
    position: absolute;
    left: -40px;
    top: 0;
    width: 1rem;
    height: 1rem;
    border: solid gray 1px;
}


div.math.nummer div.gridy::before,
div.algebra.nummer div.gridy::before,
div.equation.nummer>div::before,
div.equation.number>div::before,
div.math.number>div::before,
div.algebra.nummer>div::before,
div.algebra.number>div::before,
div.math.nummer>div::before {
    content: counter(math-count) ") ";
    position: absolute;
    left: -40px;
    top: 0;
}

div.math.iv div.gridy::before,
div.algebra.iv div.gridy::before,
div.math.iv>div::before,
div.algebra.iv>div::before,
div.math.likningssett>div>div:before,
div.math.likningsett>div>div:before {
    content: counter(math-count, lower-roman) ") ";
    position: absolute;
    left: -40px;
    top: 0;
}

div.oppgave[data-poeng]:after {
    content: " (" attr(data-poeng) "p)";
    color: darkslateblue;
    font-size: 0.9em;
}


div.math[class*="grid"]>div>div {
    display: flex;
}

div.math>div>div {
    display: grid;
    grid-template-columns: 5fr 2fr;
}

span.comment:empty {
    display: none;
}

span.comment {
    display: inline-block;
    color: green;
    background-color: rgba(238, 232, 170, 0.18);
    border-radius: 0.2rem;
    margin-top: 0.2rem;
    margin-left: 2rem;
    padding: 2px 2px;
    border: solid rgba(128, 128, 128, 0.215) 1px;
    text-align: center;
    max-height: 1.2rem;
}


pre>code[class^=language] {
    position: relative;
    display: block;
    padding: 3px 20px 3px 2.5em;
    margin-left: 2rem;
    width: fit-content;
    overflow: hidden;
}

pre>code.language-python {
    background-color: rgba(232, 236, 236, 0.294);
    border-radius: 5px;
    border: solid black 1px;
    box-shadow: 2px 2px 2px gray;
}


/* line numbering for code */
pre>code[class^=language]::before {
    position: absolute;
    display: block;
    white-space: break-spaces;
    color: darkgreen;
    left: 5px;
    top: 4px;
    width: 1.2rem;
    height: 40rem;
    content: "01 02 03 04 05 06 07 08 09 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40";
}

div.senter>div {
    margin-left: auto;
    margin-right: auto;
}

div.senter.abc,
div.senter.nummer,
div.senter.number,
div.senter.bokstav {
    margin-left: 3rem;
}


div.eq>span:nth-child(1) {
    text-align: right;
}

div.eq>span:nth-child(2) {
    text-align: center;
}

div.format {
    display: none;
}

div.format.br {
    display: block;
    min-height: 1rem;
}

div.format.number+ul,
div.format.abc+ul {
    padding: 0;
    padding-left: 3rem;
    list-style-type: none;
}


div.format+ul {
    counter-reset: ul-count;
}


div.oppgave[data-start] {
    counter-reset: oppg-count calc(attr(data-start type(integer)) - 1);
}

div.senter,
div.center {
    display: flex;
    justify-content: center;
    /* horizontal */
    align-items: center;
    /* vertical */
}



/* restart counter after digression */
div.format[data-start="1"]+ul {
    counter-reset: ul-count 1;
}

div.format[data-start="2"]+ul {
    counter-reset: ul-count 2;
}

div.format[data-start="3"]+ul {
    counter-reset: ul-count 3;
}

div.format[data-start="4"]+ul {
    counter-reset: ul-count 4;
}


div.format[data-start="5"]+ul {
    counter-reset: ul-count 4;
}


div.format[data-start="6"]+ul {
    counter-reset: ul-count 4;
}




span.date {
    color: green;
    font-size: 1rem;
    font-weight: normal;
}

div.format.number+ul>li,
div.format.abc+ul>li {
    position: relative;
}

div.format.number+ul>li::before,
div.format.abc+ul>li::before {
    counter-increment: ul-count;
    position: absolute;
    left: -40px;
    top: 0px;
}

div.format.abc~ul>li::before {
    content: counter(ul-count, lower-alpha) ") ";
}

div.format.number~ul>li::before {
    content: counter(ul-count) ") ";
}

.menu {
    display: grid;
    width: 30rem;
    grid-template-columns: repeat(auto-fit, minmax(3rem, 1fr));
}

.menu>div.button {
    background-color: rgb(61, 61, 180);
    color: white;
    border-radius: 5px;
    padding: 2px 4px;
    padding-top: 5px;
    width: 5rem;
}

.button {
    text-align: center;
    box-shadow: 2px 2px 2px black;
    transition: 200ms;
    cursor: pointer;
    user-select: none;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.button[disabled] {
    display: none;
}

.button span {
    width: 5rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

.button:hover {
    background-color: rgb(112, 112, 204);
}

.button:active {
    transform: translate(2px, 2px);
    box-shadow: none;
}

div.plots {
    --min: 400px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(var(--min), 1fr));
    counter-reset: plot-count;
}

div.plots>div {
    position: relative;
    counter-increment: plot-count;
    padding-right: 2rem;
    width: fit-content;
}

div.plots>div::before {
    position: absolute;
    left: 5px;
    top: 10px;
    color: blue;
}

div.plots.abc>div::before {
    content: counter(plot-count, lower-alpha) ") ";

}

div.plots.roman>div::before {
    content: counter(plot-count, lower-roman) ") ";
}


div.plots.nummer>div::before {
    content: counter(plot-count) ") ";
}

div.equation.qset>div {
    display: grid;
    grid-template-columns: 3fr 1fr;
    padding-bottom: 4px;
    color: darkblue;
}





span.answer {
    display: inline-block;
    height: 2rem;
    border-bottom: solid 1px darkblue;
    padding-bottom: 0.2rem;
    margin-bottom: 0.5rem;
    margin-top: 0.5rem;
}

span.answer>span {
    font-size: 1.1rem;
    padding-bottom: 0.4em;
    margin-bottom: 2px;
    border-bottom: solid 1px darkblue;
}

div.equation.manycomments>div,
div.algebra.manycomments>div {
    grid-template-columns: 10fr 1fr 10fr 10fr;
}

div.algebra.nocomments>div {
    grid-template-columns: 10fr 1fr 10fr 1fr;
}

span.comment {
    color: blue;
}

div.equation>div>span:nth-child(1),
div.algebra>div>span:nth-child(1) {
    text-align: right;
    color: darkblue;
}

div.equation>div>span:nth-child(2),
div.algebra>div>span:nth-child(2) {
    text-align: center;
    padding: 0 16px;
}

div.equation>div>span:nth-child(4):empty,
div.algebra>div>span:nth-child(4):empty {
    border: none;
}


div.equation>div>span:nth-child(4),
div.algebra>div>span:nth-child(4) {
    text-align: left;
    padding: 0 16px;
    color: gray;
    /*font-family: "KaTex_Main";*/
    font-family: Verdana, sans-serif;
    font-style: oblique;
    font-size: 0.8em;
    border-left: solid rgba(128, 128, 128, 0.164) 1px;
}

div.trig svg + div {
    font-size: 0.6rem;
    max-width: 30rem;
}

div.trig svg {
    border: solid rgba(128, 128, 128, 0.144) 1px;
    margin: 5px;
    position: relative;
}
div.trig > div {
    position: absolute;
    left:5px;
    top:5px;
     margin-top: calc(2em + var(--spacing));
}


div.plain div.trig svg {
    border: none;
}

#editor.hidden {
    display: none;
}

span.eqset {
    position: relative;
}

span.eqset::before {
    position: absolute;
    content: attr(data-nr) ")";
    color: saddlebrown;
    padding-right: 0.5em;
    left: -2.6em;
    top: 0.4em;
}

div.equation.qset>div>span {
    text-align: left;
}

div.equation.qset>div:nth-child(2) {
    margin-bottom: 15px;
}

div.equation.qset>div>span {
    color: midnightblue;
    padding: 3px;
}


div.equation.qset>div>span.eqset.green {
    color: green;
}


span.num {
    color: #820d46;
    padding-right: 0.5em;
}

span.deno {
    color: blue;
    padding: 0 0.5em 0 0.5em;
}

span.ans {
    color: indigo;
    padding-left: 0.5em;
}

span.filler {
    color: transparent;
}

#last {
    min-height: 200px;
}

div.toast {
    --boxshadow: red;
    --background: aliceblue;
    --delay: 2s;
    --width: 18rem;
    --top: 12rem;
    --left: calc(50% - var(--width) / 2);
    border: solid gray 1px;
    border-radius: 4px;
    position: absolute;
    top: var(--top);
    left: var(--left);
    background-color: var(--background);
    box-shadow: 2px 2px 2px var(--boxshadow);
    width: var(--width);
    min-height: 3rem;
    padding: 1rem;
    animation: goaway 0.5s forwards;
    animation-delay: var(--delay);
    white-space: pre-wrap;
}

div.toast span.marked {
    color: blue;
}

#notoast {
    position: absolute;
    right: 10px;
    top: -10px;
    display: inline-block;
    background-color: cadetblue;
    color: white;
    border: solid gray 1px;
    box-shadow: 2px 2px 2px black;
    padding: 5px;
    margin: 4px;
    cursor: pointer;
}

@keyframes goaway {
    85% {
        opacity: 1;
        box-shadow: 2px 2px 2px gray;
    }

    90% {
        opacity: 0.5;
    }

    100% {
        opacity: 0;
        visibility: hidden;
    }
}

span.ok_gold {
    display: inline-block;
    min-width: 4em;
}

div.plots.code {
    display: flex;
    flex-wrap: wrap;
}

span[class^=sign] {
    position: relative;
    display: inline-block;
    height: 1px;
    border: solid transparent 1px;
}

span.sign1 {
    border-top: solid blue 3px;
}

span.sign-1 {
    border-top: dotted red 3px;
}

span.sign1::after {
    position: absolute;
    font-size: 0.5em;
    right: -10px;
    top: 4px;
    content: attr(data-x);
}

span.sign-1::after {
    position: absolute;
    font-size: 0.5em;
    right: -10px;
    top: -14px;
    content: attr(data-x);
}

div.sigram>div {
    display: grid;
    grid-template-columns: 3fr 4fr;
    margin-bottom: 0.6em;
}

div.sigram {
    margin: 0.5em;
}


div.sigline {
    width: 200px;
    position: relative;
}

div.sigline>span {
    position: absolute;
    top: 10px;
}

div.fordeling div.flexit {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

div.distplot {
    display: flex;
    flex-wrap: wrap;
    flex-direction: row;
    gap: 20px;
}

div.distplot>div {
    position: relative;
    min-width: 100px;
    height: 60px;
    position: relative;
    border: solid gray 1px;
}

div.distplot>div:before {
    white-space: nowrap;
    display: block;
    position: absolute;
    left: 0px;
    top: -20px;
    font-size: 0.8rem;
    color: blue;
    content: attr(title);
}

div.distplot>div>div {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0.3px;
    border: solid blue 1px;
    height: 10px;
}

div.table>table {
    text-align: center;
    height: fit-content;
    border: solid rgba(128, 128, 128, 0.507) 1px;
}

div.anova {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: 5em;
    border: solid rgba(128, 128, 128, 0.151) 1px;
    padding: 5px;
}

div.anova>table>caption {
    text-align: center;
    white-space: nowrap;
    color: blue;
    font-size: 1.1rem;
}

div.anova th {
    min-width: 2rem;
}

div.anova {
    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 22rem;
}

div.anova div.subtype div {
    display: grid;
    grid-template-columns: 1fr 1fr;
}

div.anova div.subtype span {
    display: inline-block
}


div.table svg {
    width: var(--svg);
    font-size: 0.18px;
    fill: blue;
}

div.table svg.bar {
    background-color: rgba(128, 128, 128, 0.062);
}

div.frekvens,
div.stats {
    display: flex;
    flex-wrap: wrap;
    gap: 1em;
}

svg.bar text {
    fill: gray;
}

svg.bar text.leftcol,
svg.bar text.toprow {
    font-size: 0.14px;
}

svg.bar text.inside {
    stroke: black;
    stroke-width: 0.002px;
    fill: rgb(221, 212, 212);
}

svg.bar line {
    stroke: rgb(61, 146, 199);
    stroke-width: 0.002px;
}


div.frekvens>div>div>div,
div.stats>div>div>div {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.2em;
}

svg.hist rect {
    fill: rgba(221, 176, 118, 0.548);
    stroke: darkcyan;
    stroke-width: 0.003px;
}


svg.hist text {
    fill: darkslategrey;
    font-size: 0.06px;
}

table.hidden {
    display: none;
}

div.table.frekvens td,
div.table.dataset td {
    border: solid rgba(128, 128, 128, 0.226) 0.5px;
    padding: 0.2em;
}

div.table table {
    border-collapse: collapse;
    padding: 0.2em;
}

div.nl {
    min-height: 1em;
}

div.source {
    position: relative;
    white-space: pre;
    border: solid gray 1px;
    box-shadow: 2px 2px 2px black;
    max-width: 220mm;
    margin: 4mm;
    padding: 5mm;
    padding-left: 4ch;
    margin-top: 3rem;
    counter-reset: line-count;
}

div.source::before {
    font-size: large;
    position: absolute;
    top: -2.5rem;
    color: blue;
    content: "Source";
}

div.source span {
    position: relative;
    counter-increment: line-count;
}

div.source span::before {
    position: absolute;
    left: -25px;
    top: 0;
    color: blue;
    width: 10px;
    content: counter(line-count);
}

/* reduce font for question numbers in fasit */
div.section.fasit~div.section div.oppgave {
    font-size: 1em;
    color: darkred;
}


#config {
    position: absolute;
    width: 100vw;
    height: 100vh;
    background-color: white;
    top: 0;
    left: 0;
    justify-content: center;
}

#config:not(.hidden) {
    display: flex;
}

#config>div {
    position: relative;
    top: 4rem;
    margin: 4ch;
    max-width: 50ch;
    height: fit-content;
    border: solid rgba(128, 128, 128, 0.226) 1px;
    border-radius: 9px;
    box-shadow: rgba(0, 0, 0, 0.24) 0 0 9px;
}

#config div.inputDiv {
    min-width: 40ch;
    display: grid;
    grid-template-columns: 2fr 2fr;
    border-bottom: 1px rgba(128, 128, 128, 0.295) solid;
    padding: 2ch;
}



#config div.inputDiv:last-child {
    border-bottom: none;
}

#config div.inputDiv button {
    width: fit-content;
}

#config select {
    border: none;
    border-radius: 4px;
    cursor: pointer;
    max-width: 100%;
    outline: none;
    padding-bottom: 6px;
    padding-top: 6px;
    padding-left: 4px;
}

#config input[type="text"] {
    border-radius: 4px;
    padding-bottom: 6px;
    padding-top: 6px;
    padding-left: 4px;
}

#config label {
    color: blue;
    text-transform: capitalize;
}

#config div.inputDiv span {
    font-size: 0.9rem;
    color: darkgreen;
    grid-column: 1/3;
    padding-top: 2px;
}

#config div.inputDiv.disabled {
    display: none;
}

div.callout {
    border: solid rgba(0, 0, 0, 0.344) 1px;
    border-left: solid rgba(24, 24, 247, 0.729) 0.35rem;
    min-width: 12em;
    width: fit-content;
    border-radius: 5px;
    margin: 0.5em;
}

div.callout.box,
div.callout.plain {
    border-left: solid rgba(0, 0, 0, 0.344) 1px;
    min-width: fit-content;
}

div.naked {
    border: none;
}

div.box {
    border: solid rgba(0, 0, 0, 0.344) 1px;
    margin-right: 0.3em;
    padding-right: 0.3em;
    width: fit-content
}

div.box.caption>h4 {
    text-align: center;
}

div.callout.naked {
    border: none;
    min-width: fit-content;
}

div.callout.box>div:first-child,
div.callout.naked>div:first-child {
    display: none;
}

div.callout.float {
    position: absolute;
    right: 0px;
    top: -0.8rem;
    min-width: fit-content;
}

div.callout.merk {
    border-left: solid red 0.35rem;
}

div.callout.hint {
    border-left: solid green 0.35rem;
}

div.callout>div {
    padding: 0.5rem;
}

div.callout.pre>div:nth-child(2) {
    white-space: pre;
    font-family: monospace;
}

div.callout>div:nth-child(2) {
    padding: -1rem;
}

div.callout>div:first-child {
    background-color: #e9f2fc;
    font-weight: bold;
}

div.callout.merk>div:first-child {
    background: #ffe6eb;
}

div.callout.hint>div:first-child {
    background: #ecf8e8;
}

td.elm {
    position: relative;
    max-width: 2.2rem;
    border: solid rgba(128, 128, 128, 0.104) 1px;
    text-align: center;
    padding-left: 0.2rem;
}

td.elm div:first-child {
    min-height: 1.5rem;
    padding-top: 0.3rem;
}

td.elm:empty {
    border: none;
    padding: 0;
}

td.elm div.name {
    font-size: 0.4em;
}

td.elm div.density {
    font-size: 0.45em;
}

td.elm div.mass {
    font-size: 0.45em;
}


td.elm div.id {
    font-size: 0.4rem;
    position: absolute;
    left: 0.1rem;
    top: 0;
}

div.rpad  div {
    padding-right: 5px;
}

div.prove.metal {
    padding:5px;
}

td.elm.alkali {
    background-color: #f003;
}

td.elm.earth {
    background-color: #4040ff40;
}

td.elm.metal, .metal {
    background-color: #0080ff20;
}

td.elm.nobel {
    background-color: #ff98004d;
}

td.elm.halogen {
    background-color: #4298004d;
}

td.elm.post {
    background-color: #0f04;
}

td.elm.oid {
    background-color: #9c04;
}

td.elm.non {
    background-color: #ff04;
}

div.huge {
    font-size: 1.7em;
}

div.large {
    font-size: 1.3em;
}

div.red {
    color: red;
}

div.blue {
    color: blue;
}

div.green {
    color: green;
}

div.angry {
    color: white;
    background-color: red;
}

div.gray {
    color: gray;
}

div.small, div.tiny {
    font-size: 0.68em;
}



div.small img {
    width: 75%;
    height: auto;
}


div.tiny img {
    width: 50%;
    height: auto;
}


div.large img {
    width: 125%;
    height: auto;
}


div.huge img {
    width: 150%;
    height: auto;
}

div.large td.elm {
    max-width: 2.5rem;
    overflow: hidden;
}

div.huge td.elm {
    max-width: 2.8rem;
    overflow: hidden;
    text-overflow: ellipsis;
}

div.small.box {
    max-width: calc(1.1 * var(--svg));
    max-height: var(--svg);
    overflow: hidden;
}

div.large.box {
    max-width: calc(1.7 * var(--svg));
    max-height: calc(1.1 * var(--svg));
    overflow: hidden;
}

div.small img {
    object-fit: cover;
    max-width: calc(1.1 * var(--svg));
    max-height: var(--svg);
}


div.large img {
    object-fit: cover;
    max-width: calc(1.7 * var(--svg));
    max-height: calc(1.1 * var(--svg));
}

aside.search>div {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(12em, 1fr));
    padding: 5px;
    border: solid rgba(128, 128, 128, 0.186) 1px;
    border-radius: 0.3em;
}

aside.search>div>div {
    display: inline-block;
    width: fit-content;
    padding: 2px;
}

div.move {
    position: relative;
}