@font-face {
    font-family: "W95FA";
    src: url(./../assets/W95FA/W95FA.447b53bb.otf);
    src: 
        url(./../assets/W95FA/w95fa.1ff059a9.woff2) format("woff2"),
        url(./../assets/W95FA/w95fa.3be63796.woff) format("woff");
    font-display: swap;
}

html {
    touch-action: manipulation;
    --min-footer-width: 296px;
    --max-width: 1000px;
    image-rendering: pixelated;
}

* {
    margin: 0;
    padding: 0;
    --initial-font-size: 1em;
    --font-size: var(--initial-font-size);
    --inline-picture-size: calc(var(--font-size) * 0.8);
    /* outline: red dashed 1px; */
}

body {
    --cross-height: 5px;
    --cross-width: 5px;
    --border-width: 2px;
    --initial-target-padding: 10px;
    --target-padding: var(--initial-target-padding);
    --header-height: calc(var(--font-size) * 1.2);
    background-color: #008080;
    font-family: 'W95FA';
}

.desktop {
    --desktop-padding: max(var(--target-padding), 2px);
    padding: var(--desktop-padding);
    max-width: var(--max-width);
    min-width: max-content;
    margin: auto;
    margin-bottom: calc(var(--initial-font-size) * 1.2 + var(--initial-target-padding));
    display: flex;
    flex-direction: column;
}

@media (max-width: 440px) {
    body {
        --target-padding: max(calc(9px - (440px - 100vw) / 3.75), 1px);
    }
}

@media (max-width: 360px) {
    * {
        --font-size: max(calc(var(--initial-font-size) - (360px - 100vw) * 0.13), 0.75em);
    }
}

@media print {
    .hidden-print {
        display: none !important;
    }

    a {
        color: #000000;
        cursor: text;
        text-decoration: none;
    }

    body {
        background-color: transparent;
        zoom: 75%;
    }
}