@font-face {
    font-family: "Montserrat";
    src: url("fonts/Montserrat-VariableFont_wght.ttf") format("truetype");
    font-weight: 100 900;
}

@font-face {
    font-family: "Aboreto";
    src: url("fonts/Aboreto-Regular.ttf") format("truetype");
    font-weight: 400;
}

@font-face {
    font-family: "Cormorant Garamond";
    src: url("fonts/CormorantGaramond-Italic-VariableFont_wght.ttf") format("truetype");
    font-style: italic;
    font-weight: 300 700;
}

body {
    --info-padding: 120px;
    --info-font-size: 18px;

    margin: 0;
    background-color: #ffffff;
    overflow-x: hidden;
}

@media (max-width: 600px) {
    body {
        --info-padding: 80px;
    }
}

#main {
    --main-aspect-ratio: 0.6;
    --names-height: 15%;
    --names-font-size: 56px;
    --portrait-height: 85%;
    --portrait-arch-height: 34%;
    --curved-top-offset: 0;
    --curved-text-height-extra: 8%;
    --curved-font-size: 4px;
    --curved-letter-spacing: 0.4px;
    --bottom-font-size: 24px;
    --bottom-arrow-font-size: 24px;
    --bottom-bottom-padding: 3%;
    --portrait-image-bottom-offset: 100px;

    aspect-ratio: var(--main-aspect-ratio);
    margin: 0 auto;
    width: min(100vw, calc(100vh * var(--main-aspect-ratio)));
}

@media (max-width: 600px) {
    #main {
        --names-font-size: 36px;
        --portrait-height: 90%;
        --portrait-arch-height: 32%;
        --portrait-image-bottom-offset: 20px;
    }
}

#names {
    color: #000000;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: "Aboreto", serif;
    font-size: var(--names-font-size);
    height: var(--names-height);
    text-align: center;
}

#portrait {
    position: relative;
    color: #ffffff;
    height: var(--portrait-height);
    border-radius: 50% 50% 0 0 / var(--portrait-arch-height) var(--portrait-arch-height) 0 0;
    overflow: hidden;

    background-image: url("portrait.png");
    background-position: center calc(100% + var(--portrait-image-bottom-offset));
    background-repeat: no-repeat;
    background-size: 100% auto;
}

#curved {
    position: absolute;
    top: var(--curved-top-offset);
    left: 0;
    width: 100%;
    height: calc(var(--portrait-arch-height) + var(--curved-text-height-extra));
    overflow: visible;
    pointer-events: none;
}

#curved text {
    fill: #ffffff;
    font-family: "Montserrat", sans-serif;
    font-weight: 500;
    font-size: var(--curved-font-size);
    letter-spacing: var(--curved-letter-spacing);
}

#bottom {
    position: absolute;
    bottom: var(--bottom-bottom-padding);
    left: 0;
    width: 100%;
    color: #ffffff;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-family: "Montserrat", sans-serif;
    font-size: var(--bottom-font-size);
    font-weight: 500;
    gap: 4px;
    letter-spacing: 0.8px;
    text-align: center;
}

#bottom::after {
    content: "↓ ↓ ↓";
    font-size: var(--bottom-arrow-font-size);
    line-height: 1;
}

#info {
    margin-top: var(--info-padding);
    margin-bottom: var(--info-padding);

    color: #000000;
    font-family: "Montserrat", sans-serif;
    font-size: var(--info-font-size);
    font-weight: 500;
    gap: 4px;
    text-align: center;
}