@font-face {
    font-family: 'Arca Majora 3';
    src: url("fonts/arcamajora3-bold-webfont.woff2") format('woff2'),
        url("fonts/arcamajora3-bold-webfont.woff") format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FZJunHei DB';
    src: url("fonts/FZJUNH_ZHONGJW--GB1-0.woff2") format('woff2'),
        url("fonts/FZJUNH_ZHONGJW--GB1-0.woff") format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'FZJunHei M';
    src: url("fonts/FZJUNH_JW--GB1-0.woff2") format('woff2'),
        url("fonts/FZJUNH_JW--GB1-0.woff") format('woff');
    font-weight: normal;
    font-style: normal;
}

body {
    background-color: var(--primary-invert);
}

:root {
    --doc-height: 100vh;

    --spacing: 100px;
    --large-text: 60px;
    --normal-text: 19px;

    --normal-text-height: 22.5px;

    --tint: rgb(211, 48, 59);
    --tint-transparent-1: rgba(211, 48, 59, 0.15);
    --tint-transparent-2: rgba(211, 48, 59, 0.075);

    --text-1: rgb(254, 225, 176);
    --text-2: rgba(255, 232, 209, 0.9);
    --primary: black;
    --primary-invert: white;
    --primary-invert-transparent: rgba(255, 255, 255, 0.6);
    --text-primary: rgb(60, 60, 62);
    --text-secondary: rgb(120, 120, 122);
    --secondary-gray: rgb(160, 160, 162);
    --tertiary-gray: rgb(190, 190, 192);
    --quaternary-gray: rgb(220, 220, 222);
    --bottom-gray: rgb(225, 225, 227);

    --divider-gray: rgb(235, 235, 237);
    --divider-gray-main: rgb(230, 230, 232);
    --divider-gray-transparent: rgba(0, 0, 0, 0.09803921568627450980392156862745098039);
    --background-dot-gray: rgb(240, 240, 242);

    --light-background: rgb(247, 247, 249);
    --shadow-gray: rgba(0, 0, 80, 0.03137254901960784313725490196078431372);
}

.main-wrapper {
    width: 100%;
    height: var(--doc-height);
    overflow-y: scroll;
    -webkit-overflow-scrolling: touch;
    scroll-behavior: smooth;

    scroll-snap-type: y mandatory;
}

.main {
    width: 100%;
    max-width: 600px;
    min-height: var(--doc-height);
    margin: auto;
}

.main-page-3 {
    width: 100%;
    min-height: var(--doc-height);
}

.content-section {
    display: flex;
    flex-direction: column;
    width: 100%;
    min-height: var(--doc-height);
    justify-content: center;
    align-items: center;

    scroll-snap-align: start;
}

.animation-wrapper {
    display: flex;
    width: 330px;
    height: 455px;
    scale: var(--animation-scale);
    overflow: visible;
    padding-top: calc(var(--bottom-arrow-height) * 0.5 + 60px);
    padding-bottom: 60px;
    margin-top: auto;
    margin-bottom: auto;

    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.bottom-arrow-1,
.bottom-arrow-2 {
    display: flex;
    justify-content: center;
    width: 100%;
    cursor: pointer;
}

.bottom-arrow-icon-1,
.bottom-arrow-icon-2 {
    fill: var(--text-1);

    transition: 0.25s ease-in-out;
}

@media (pointer: fine) {
    .bottom-arrow-1:hover .bottom-arrow-icon-1 {
        opacity: 0.6;
    }

    .bottom-arrow-2:hover .bottom-arrow-icon-2 {
        opacity: 0.6;
    }
}

.text-wrapper {
    display: flex;
    flex-direction: column;
    width: calc(100% - 60px);
    padding-top: calc(var(--bottom-arrow-height) + 60px);
    padding-bottom: 60px;
    margin: auto;
    margin-left: 30px;
    margin-right: 30px;
}

.text-divider-1,
.text-divider-2 {
    width: 100%;
    border: 0;
    border-radius: 1px;
    margin: 0%;
    border-bottom: 2px solid var(--text-1);
    opacity: 0.5;

    opacity: 0;
    transform: translateX(-30px);
    transition: 0.65s ease-in-out;
    transition-delay: var(--transition-delay);
}

.text-divider-2 {
    transform: translateX(30px);
}

.text-title {
    opacity: 0;
    transform: translateY(50px);
    transition: 0.65s ease-in-out;
    transition-delay: var(--transition-delay);

    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;

    text-align: left;
    font-size: 52.5px;
    line-height: 115%;
    padding-bottom: 35px;
    padding-top: 30px;

    color: var(--text-1);
    font-family: 'Arca Majora 3', 'FZJunHei DB', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
}

.text-body {
    opacity: 0;
    transform: translateY(50px);
    transition: 0.65s ease-in-out;
    transition-delay: var(--transition-delay);

    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;

    display: flex;
    flex-direction: column;
    text-align: left;
    font-size: 24px;
    letter-spacing: 0.0075em;
    line-height: 150%;
    padding-bottom: 35px;

    color: var(--text-2);
    font-family: 'FZJunHei M', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
}

.text-greetings {
    margin-top: 32px;
    font-family: 'FZJunHei DB', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
}

.image-section {
    display: flex;
    justify-self: center;
    width: 100%;
}

.image-wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    width: calc(100% - 60px);
    max-width: 600px;
    margin: auto;
    margin-top: 40px;
    margin-left: 30px;
    margin-right: 30px;
}

.image {
    pointer-events: none;
    width: 100%;
    max-width: 400px;
    height: auto;
    border-radius: 15px;
    box-shadow: 0 8px 32px 8px var(--tint-transparent-1);
    margin-bottom: auto;
}

.image-link,
.image-link-2 {
    text-decoration: none;

    display: flex;
    justify-content: center;
    width: 100%;
    max-width: 400px;
    margin-top: 20px;
    margin-bottom: 20px;

    transition: 0.25s ease-in-out;
}

@media (pointer: fine) {
    .image-link:hover {
        opacity: 0.6;
    }
}

.image-link-text {
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;

    display: flex;
    flex-direction: column;
    text-align: left;
    font-size: 20px;
    letter-spacing: 0.0075em;
    line-height: 125%;

    color: var(--tint);
    font-family: 'FZJunHei DB', -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
}

.arrow-top-right-icon {
    fill: var(--tint);
}

.caption-wrapper {
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.designed-by {
    width: 110px;
    pointer-events: none;
}

.copyright {
    width: fit-content;
    height: fit-content;
    text-align: center;
    font-size: 14px;
    line-height: 125%;
    margin-top: 20px;
    margin-bottom: 20px;

    color: var(--tertiary-gray);
    font-family: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', sans-serif;
}

@media only screen and (max-width: 500px) {
    .text-title {
        font-size: 50px;
    }

    .text-body {
        font-size: 23px;
    }
}

@media only screen and (max-width: 400px) {
    .text-title {
        font-size: 47.5px;
    }

    .text-body {
        font-size: 22px;
    }
}

@media (prefers-color-scheme: dark) {

    :root {
        --tint-transparent-1: rgba(73, 77, 238, 0.2);
        --tint-transparent-2: rgba(73, 77, 238, 0.1);
        --primary: rgb(235, 235, 237);
        --primary-invert: rgb(20, 20, 22);
        --primary-invert-transparent: rgba(20, 20, 20, 0.6);
        --text-primary: rgb(215, 215, 217);
        --text-secondary: rgb(155, 155, 157);

        --secondary-gray: rgb(115, 115, 117);
        --tertiary-gray: rgb(85, 85, 87);
        --quaternary-gray: rgb(55, 55, 57);
        --bottom-gray: rgb(60, 60, 62);

        --divider-gray: rgb(35, 35, 37);
        --divider-gray-main: rgb(40, 40, 42);
        --divider-gray-transparent: rgba(255, 255, 255, 0.0784313725490196078431372549019607843);

        --background-dot-gray: rgb(30, 30, 32);

        --light-background: rgb(28, 28, 30);
        --shadow-gray: rgba(255, 255, 255, 0);
    }
}