@font-face {
    font-family: Mabook;
    src: url(fonts/mabook.woff2) format('woff2'), url(fonts/mabook.woff) format('woff');
}

@font-face {
    font-family: Futura Handwritten;
    src: url(fonts/futura-handwritten.woff2) format('woff2'), url(fonts/futura-handwritten.woff) format('woff');
}

body {
    background-color: black;
    color: white;
    font-family: Helvetica, sans-serif;
    margin: 1em;
    overflow-x: hidden;
}

:root {
    --default-border-radius: .6em;
    --main-text-max-width: 44ex;
    --shadow-factor: 1.7;

    --ease-bounce-in-out: linear(0, -0.001 3.9%, -0.006 7.5%, -0.013 11.1%, -0.036 19.6%, -0.04 22%, -0.041 24.1%, -0.039 26.7%, -0.032 29%, -0.019 31.2%, -0.002 33.2%, 0.03 35.8%, 0.071 38.2%, 0.123 40.5%, 0.188 42.8%, 0.261 44.9%, 0.343 46.9%, 0.425 48.6%, 0.62 52.3%, 0.691 53.9%, 0.754 55.5%, 0.822 57.5%, 0.88 59.6%, 0.929 61.8%, 0.967 64%, 0.998 66.4%, 1.02 68.9%, 1.034 71.6%, 1.038 73.1%, 1.041 74.6%, 1.041 77%, 1.037 79.8%, 1.013 89.1%, 1.005 92.9%, 1.001 96.3%, 1);


    overflow-x: hidden;
}


.title {
    margin-left: 5vw;
    font-family: Mabook, sans-serif;
    letter-spacing: 5vw;
    font-size: xx-large;
    cursor: help;
}

.dingies {
    font-family: Mabook, Helvetica, sans-serif;
    text-transform: lowercase;
    letter-spacing: .1rem;
}


.center {
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: calc(100vh - 1.1rem);
    min-height: -webkit-fill-available;
}


.credit-title {
    font-size: 150%;
}

.credit-paragraph {
    padding-top: 1ex;
    padding-bottom: 1ex;
}

.blocktext {
    color: forestgreen;
    width: 100%;
    max-width: 75ex;
    margin: auto;
    text-align: justify
}

.store-button {
    max-width: 27ex;
    margin: 1ex;
}

.store-buttons {
    margin: 2ex auto;
}

.store-buttons.small .store-button {
    max-width: 15ex;
    margin: 1ex;
}

.title-image {
    mix-blend-mode: screen;
    width: 100%;
    max-width: 70ex;
    display: block;
    margin: auto;
}

.title-image img {
    user-select: none !important;
    -webkit-user-select: none !important;
}

.italic {
    font-style: italic;
}

.main-text {
    margin: 4ex auto;
    max-width: var(--main-text-max-width);
    font-size: x-large;
    font-family: Futura Handwritten, Helvetica, sans-serif;
    text-align: justify;
    color: #7EC8FFDD;
}

.centered {
    text-align: center;
}


.no-break {
    text-wrap: nowrap;
}

.main-text.description {
    text-align: justify;
    font-size: large;
    max-width: calc(var(--main-text-max-width) * 1.4);
}

.main-text.description.centered {
    text-align: center;

}


.main-text-color {
    color: #7EC8FFDD;
}

.footer {
    margin: 4ex auto;
    margin-top: 12ex;
    width: 100%;
    max-width: 44ex;
    font-size: large;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-evenly;
}

.footer-item {
    display: flex;
    margin-top: .7ex;
    margin-bottom: .7ex;
}

.break {
    flex-basis: 100%;
    height: 0;
}

.rainbow-words {
    text-shadow: 0 0 1vw rgba(255, 255, 255, .5);
    background: linear-gradient(in hsl longer hue 45deg, red 0 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

.bad-words {
    color: black;
    text-shadow: 0 0 calc(.6ex * var(--shadow-factor)) hsl(0, 100%, 63%),
    0 0 calc(.15ex * var(--shadow-factor)) hsl(0, 100%, 63%, .5),
    0 0 calc(.06ex * var(--shadow-factor)) hsl(0, 100%, 63%, .5);
}

.hidden-words {
    visibility: hidden;
    display: inline-block;
    width: 0;
    clip: rect(0 0 0 0);
}

.made-with {
    margin: auto;
    font-family: Futura Handwritten, Helvetica, sans-serif;
    text-align: center;
}

.heart {
    height: 2ex;
    vertical-align: -10%;
    mix-blend-mode: screen;
}

.green {
    color: lime;
}


hr {
    border: none;
    border-top: 2px dotted forestgreen;
}

h1 {
    text-align: center;
    font-family: Mabook, Helvetica, sans-serif;
    text-transform: lowercase;
}

h1.credits {
    text-transform: none;
    font-family: Futura Handwritten, Helvetica, sans-serif;
    padding-top: 3ex;
    padding-bottom: 1ex;
}

.contact {
    height: 2em;
    margin-top: -2em;
    margin-right: .8em;
    font-family: Mabook, sans-serif;
    justify-content: end;
    align-items: end;
    text-align: right;
    letter-spacing: .2em;
    font-size: small;
    font-weight: bold;
    animation: fadeIn linear 2.5s;
    transform: rotate(7deg);
    transform-origin: bottom right;
}

a:link, a:visited, a:hover, a:active {
    color: orange;
    background-color: transparent;
    text-decoration: none;
}

.dialogue-button {
    max-width: calc(var(--main-text-max-width) - 20ex);
    margin: 4ex auto;
    padding: .3em;
    border-radius: var(--default-border-radius);
    border: .1em solid orange;
    text-align: center;
    font-size: x-large;
    font-family: Futura Handwritten, Helvetica, sans-serif;
}

.dialogue-button:hover {
    background-color: rgba(255, 165, 0, 0.1);
}


.thumbnails {
    --transition-duration: 0.4s;
    --thumbnail-count: 1;
    --thumbnail-aspect: calc(9 / 16);
    --thumbnail-height: 10em;
    --thumbnail-width: calc(var(--thumbnail-height) * var(--thumbnail-aspect));
    --thumbnails-offset: calc((var(--thumbnail-width) * var(--thumbnail-count) + var(--space) * (var(--thumbnail-count) - 1)) * -.5);
    --border-radius: .3em;

    will-change: height;

    --full-height: 37em;
    --space: 1em;

    position: relative;
    margin: 2.5em 0;
    width: 100%;
    height: var(--thumbnail-height);

    transition: height var(--transition-duration) 0s ease-in-out;
}


.thumbnail.x0 {--thumbnail-index: 0;}

.thumbnail.x1 {--thumbnail-index: 1;}

.thumbnail.x2 {--thumbnail-index: 2;}


.thumbnail {
    --left-offset: calc(var(--thumbnails-offset)
    + (var(--thumbnail-index) + 0.5) * var(--thumbnail-width)
    + var(--thumbnail-index) * var(--space)
    );

    display: inline-block;
    position: absolute;
    border-radius: var(--border-radius);
    bottom: 0;
    translate: -50% 0;
    left: calc(50% + var(--left-offset));
    height: var(--thumbnail-height);
    width: calc(var(--thumbnail-height) * var(--thumbnail-aspect));
    z-index: 0;
    background-color: rgba(80, 80, 80, .2);

    will-change: z-index;
    transition: z-index var(--transition-duration) 0s linear;
}

.thumbnail .image {
    display: block;
    position: relative;
    translate: -50% -50%;
    aspect-ratio: var(--thumbnail-aspect);
    left: 50%;
    top: 50%;
    height: var(--thumbnail-height);


    transition: height var(--transition-duration) 0s var(--ease-bounce-in-out),
    top var(--transition-duration) 0s ease-in-out,
    left var(--transition-duration) 0s ease-in-out;
}

.thumbnail .image img {
    display: block;
    width: 100%;
    height: 100%;
    border-radius: var(--border-radius);
    user-select: none !important;
    -webkit-user-select: none !important;
}

.thumbnail .dingie {
    pointer-events: none;
    visibility: hidden;
    position: absolute;
    translate: -50% -50%;
    top: 50%;
    left: 50%;
    max-width: calc(var(--thumbnail-height) / 3);
    max-height: calc(var(--thumbnail-height) / 3);

    transition: visibility 0s var(--transition-duration);
    animation: wiggle .3s alternate-reverse infinite ease-in-out;
}

.thumbnail.opened .dingie {
    visibility: visible;
    transition: none;
}


.thumbnails:has(.thumbnail.opened) {
    height: calc(var(--full-height) + var(--thumbnail-height) + var(--space));
}

.thumbnail.opened {
    z-index: 1000;
    transition: z-index 0s 0s linear;
}

.thumbnail.opened .image {
    border: var(--space) solid rgba(0, 0, 0, 0);
}

.thumbnail.opened .image {
    top: calc(-.5 * var(--full-height) - var(--space));
    left: calc(50% - var(--left-offset));
    height: var(--full-height);
}

.thumbnail.opened:after, .thumbnail.opened .image:after { /* extend hover area  */
    display: block;
    position: absolute;
    width: calc(100% + var(--space) * 2);
    height: calc(100% + var(--space) * 2);
    content: ' ';
    translate: -50% -50%;
    left: 50%;
    top: 50%;
    background-color: transparent;
    z-index: -1;
}

.thumbnail.opened .image:after { /* extend hover area  */
    --upper-extension: 3em;
    width: 200%;
    height: calc(100% + var(--space) * 2 + var(--upper-extension));
    top: calc(50% - var(--upper-extension) / 2);
}


@keyframes fadeIn {
    0% {opacity: 0;}
    80% {opacity: 0;}
    100% {opacity: 1;}
}

@keyframes wiggle {
    0% {rotate: -7deg;}
    100% {rotate: 7deg;}
}