@font-face {
    font-family: 'Absender';
    src: url('fonts/absender1.woff2') format('woff2');
    font-display: swap;
    /* https://www.dafont.com/absender.font */
}


@font-face {
    font-family: 'SV Basic Manual';
    src: url('fonts/SVBasicManual.woff2') format('woff2');
    font-display: swap;
    /* https://www.dafont.com/sv-basic-manual.font */
}


/* font files were converted from .ttf to .woff2 using https://github.com/google/woff2 */


:root {
    --max-viewable-portrait-width: min(var(--safe-viewport-width), calc(9/16 * var(--safe-viewport-height)));
    /* --safe-viewport-width and --safe-viewport-height are defined in index.js */
    --max-viewable-portrait-height: calc(16/9 * var(--max-viewable-portrait-width));
    font-size: calc(0.01 * var(--max-viewable-portrait-height));
}


*::-webkit-scrollbar {
    display: none;
}


* {
    scrollbar-width: none;
    -ms-overflow-style: none;
    margin: 0;
    box-sizing: border-box;
}


html, body {
    display: flex;
    flex-direction: column;
    align-items: center;
}


body, body * {
    color: white;
    background-color: black;
    font-family: 'SV Basic Manual';
    text-align: center;
}


body {
    width: var(--max-viewable-portrait-width);
    min-height: var(--max-viewable-portrait-height);
    gap: 5rem;
    padding: 5rem;
}


h1 {
    font-size: 8rem;
    line-height: 0.875;
    font-family: 'Absender';
}


select {
    font-size: 4rem;
    border: none;
}


textarea, p {
    font-size: 3rem;
    width: 100%;
}


textarea {
    color: black;
    background-color: white;
    height: 25rem;
    padding: 3rem;
    border-radius: 2rem;
    resize: none;
}


p {
    white-space: pre-wrap;
    overflow-wrap: break-word;
}