:root {
    --font-family: "MNKY Wilson", Arial, sans-serif;
    --font-size: 1.25vw;
    --paper: #7e7e7e;
    --paper-light: #e0e0e0;
    --paper-dark: #000000;
    --black: #000;
    --white: #ffffff;
    --ink: #060606;
    --panel: #060606;
    --text: #f3f3ef;
    --text-dark: #060606;
    --radius: 1vw;
    --radius-sm: 0.6944vw;
    --sidebar-width: 23vw;
    --transition: 180ms ease;
}

@font-face {
    font-family: "MNKY Wilson";
    src: url("../fonts/mnkywilson-variable.ttf") format("truetype");
    font-weight: 100 900;
    font-display: block;
}

* {
    box-sizing: border-box;
}

html,
body {
    width: 100%;
    min-height: 100%;
    margin: 0;
    background: radial-gradient(circle at var(--glow-x, 50%) var(--glow-y, 50%), var(--paper-light) 0 0, var(--paper-dark) 100%);
    color: var(--white);
    font-family: "MNKY Wilson", Arial Black, Arial, sans-serif;
}

body {
    overflow-x: hidden;
    overflow-y: auto;
    font-size: var(--font-size);
}

#sketch {
    position: fixed;
    top: 0;
    right: var(--sidebar-width);
    bottom: 0;
    left: 0;
    width: calc(100vw - var(--sidebar-width));
    z-index: 1;
    pointer-events: none;
}

canvas {
    display: block;
    cursor: pointer;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 1;
}

main {
    position: relative;
    z-index: 0;
    min-height: 100vh;
    padding: 1.25vw;
}

.title {
    position: fixed;
    top: 50%;
    left: calc((100vw - var(--sidebar-width)) / 2);
    transform: translate(-50%, -50%);
    z-index: -1;
    display: grid;
    place-items: center;
    color: var(--black);
    font-family: "MNKY Wilson", Arial Black, Arial, sans-serif;
    font-size: 10vw;
    font-weight: 900;
    line-height: 0.8;
    width: calc(100vw - var(--sidebar-width));
    text-align: center;
    pointer-events: none;
    margin: 0;
    letter-spacing: -0.4vw;
}

.guestbook-sidebar {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 4;
    width: var(--sidebar-width);
    display: grid;
    grid-template-rows: 1fr auto;
    gap: 1.25vw;
    padding: 1vw;
    background: var(--black);
    color: var(--white);
    overflow: auto;
}

.guestbook-sidebar__text,
.guestbook-sidebar__support-text,
.guestbook-sidebar__links a {
    font-size: var(--font-size);
    font-weight: 900;
    line-height: 1.15;
}

.guestbook-sidebar__text p,
.guestbook-sidebar__support-text p {
    margin: 0 0 2.15vw;
}

.guestbook-sidebar__text p:last-child,
.guestbook-sidebar__support-text p:last-child {
    margin-bottom: 0;
}

.guestbook-sidebar__support {
    display: grid;
    gap: 0.35vw;
    border-radius: 0.5vw;
    background: var(--white);
    color: var(--black);
    padding: 0.35vw;
}

.guestbook-sidebar__support-text p {
    margin-bottom: 0.5vw;
}

.guestbook-sidebar__links {
    display: grid;
    gap: 0.35vw;
}

.guestbook-sidebar__links a {
    display: grid;
    min-height: 4.2vw;
    place-items: center;
    border-radius: 0.35vw;
    background: var(--black);
    color: var(--white);
    padding: 0.65vw;
    text-align: center;
    text-decoration: none;
}

.memory,
.guestbook-panel {
    position: fixed;
    inset: 0;
    z-index: 5;
    display: grid;
    place-items: center;
    padding: 1.25vw;
    background: rgba(0, 0, 0, 0.75);
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease;
}

.memory.is-open,
.guestbook-panel.is-open {
    opacity: 1;
    pointer-events: auto;
}

.memory__card,
.guestbook-card {
    width: min(36vw, calc(100vw - 1.25vw));
    max-height: calc(100svh - 1.25vw);
    display: grid;
    gap: 1.5vw;
    overflow: auto;
    border-radius: 0.5vw;
    background: var(--surface-strong);
    padding: 1.25vw;
    box-shadow: 0 1vw 3vw rgba(0, 0, 0, 0.4);
    background: rgb(0, 0, 0);
}
.memory__card{
    background-color: white;
    color: black;
}

.memory__quote {
    margin: 0;
    font-size: var(--font-size);
    font-weight: 900;
    line-height: 0.9;
    letter-spacing: 0;
    white-space: pre-line;
}

.memory__image {
    display: block;
    width: 100%;
    height: auto;
    border-radius: 0.5vw;
}

.memory__image[hidden] {
    display: none;
}

.memory__name {
    margin: 0;
    font-size: var(--font-size);
    font-weight: 900;
    line-height: 1;
    letter-spacing: 0;
    text-align: center;
    color: black;
}
.memory__close{
    display: none !important;
}
.memory__close,
.guestbook-button,
.guestbook-card button[type="submit"] {
    width: 100%;
    min-height: 3vw;
    border: 0;
    border-radius: 0.5vw;
    background: var(--black);
    color: var(--white);
    font: 900 var(--font-size) "MNKY Wilson", Arial Black, Arial, sans-serif;
    cursor: pointer;
}

.memory__close:focus-visible,
.guestbook-button:focus-visible,
.guestbook-card button[type="submit"]:focus-visible {
    outline: 0.2083vw solid var(--white);
    outline-offset: 0.2083vw;
}

.guestbook-button {
    position: fixed;
    left: calc((100vw - var(--sidebar-width)) / 2);
    bottom: 1.5vw;
    transform: translateX(-50%);
    z-index: 3;
    max-width: 22vw;
    padding: 0 1vw;
}

.guestbook-panel {
    background: rgba(0, 0, 0, 0.5);
}

.guestbook-card {
    width: min(37.5vw, calc(100vw - 1.25vw));
    padding: 1.25vw;
}

.guestbook-form {
    margin: 0;
}

.guestbook-form.is-submitting,
.guestbook-form.is-submitting * {
    cursor: wait;
}

.guestbook-form p{
    margin: 0 0 1vw;
}

.guestbook-form p button{
    margin: 1vw 0 0 0;
}

.guestbook-form.is-submitting button,
.guestbook-form.is-submitting .guestbook-form__upload-label {
    opacity: 0.65;
}

.guestbook-form label {
    position: absolute;
    width: 0.07vw;
    height: 0.07vw;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.guestbook-form input,
.guestbook-form textarea {
    width: 100%;
    border: 0;
    border-radius: 0.5vw;
    background: var(--white);
    color: var(--black);
    padding: 1vw;
    font: 900 var(--font-size) "MNKY Wilson", Arial, sans-serif;
    resize: vertical;
    outline: none;
    box-shadow: none;
    -webkit-tap-highlight-color: transparent;
}

.guestbook-form input:focus,
.guestbook-form textarea:focus,
.guestbook-form input:focus-visible,
.guestbook-form textarea:focus-visible {
    outline: none;
    box-shadow: none;
}

.guestbook-form input::placeholder,
.guestbook-form textarea::placeholder {
    color: var(--black);
    opacity: 1;
}

.guestbook-form textarea {
    min-height: 9.7222vw;
}

.guestbook-form input[type="file"] {
    position: absolute;
    width: 0.07vw;
    height: 0.07vw;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
}

.guestbook-form .guestbook-form__upload-label {
    position: static;
    display: block;
    width: 100%;
    height: auto;
    overflow: visible;
    clip: auto;
    white-space: normal;
    border: 0;
    border-radius: 0.5vw;
    background: var(--white);
    color: var(--black);
    padding: 1vw;
    font: 900 var(--font-size) "MNKY Wilson", Arial, sans-serif;
    cursor: pointer;
}

.guestbook-form p#guestbook-response {
    margin: 0;
    color: var(--white);
    font-size: var(--font-size);
    text-align: center;
    font-weight: 900;
}