@import url('https://fonts.googleapis.com/css2?family=Arvo:ital,wght@0,400;0,700;1,400;1,700&display=swap');

:root {
    background-color: #3c2b60;
    font-family: Arvo, sans-serif;
    overscroll-behavior: none;
    overflow-x: clip;

    --separator-top: 64.5vw;
    --separator-left: -0.5vw;
    --separator-width: 101vw;
    --separator-height: calc(var(--separator-width) * 29.23464 / 210.15952);
    --ground-tile: calc(var(--separator-width) * 200 / 210.15952);
    --ground-overlap: 2px;
}

body {
    width: 100%;
    max-width: 100%;
    margin: 0;
    position: relative;
    display: flow-root;
    overflow-x: clip;
}

#term_example {
    border: none;
    width: 100%;
    height: 100%;
}

#term_holder {
    width: 100%;
    height: 300px;
    background-color: #191a19;
    padding: 4px;
    border-radius: 4px;
    margin-bottom: 4vh;
}

#bg_canvas {
    display: block;
    image-rendering: pixelated;
}

.bg_img {
    width: 100%;
    height: auto;
    position: absolute;
    top: 0;
}

#bg_sky {
    width: 100%;
    height: 75vw;
    background: radial-gradient(ellipse at bottom right, #578eb6, #2b7271, #3c2b60);
    position: absolute;
    z-index: -5;
}

#background_tree {
    z-index: -4;
}

#logo-container {
    position: absolute;
    top: 0;
    z-index: -2;
    width: 100%;
    height: 75vw;
    display: flex;
    justify-content: center;
    align-items: center;
}

#logo {
    max-width: 50vw;
    height: auto;
    padding-left: 15vw;
    filter: drop-shadow(0 4px 10px #1f1034);
}

#separator {
    position: absolute;
    width: var(--separator-width);
    left: var(--separator-left);
    top: var(--separator-top);
    z-index: 0;
}

#ground {
    position: absolute;
    top: calc(var(--separator-top) + var(--separator-height) - var(--ground-overlap));
    bottom: 0;
    width: 100%;
    background-image: url("resources/ground.svg");
    background-size: var(--ground-tile) var(--ground-tile);
    background-position: var(--separator-left) calc(var(--ground-overlap) - var(--separator-height));
    z-index: 0;
}

.content_block {
    color: aliceblue;
    margin-left: 10vw;
    margin-right: 10vw;
    position: relative;
    z-index: 1;
}

#leaves_container {
    position: absolute;
    height: 75vw;
    width: 100%;
    overflow: hidden;
}

.leaf {
    position: absolute;
    top: 0;
    left: 0;
    width: 60px;
    will-change: transform;
}

.leaf-fg {
    z-index: -1;
}

.leaf-bg {
    z-index: -3;
}

#steps {
    font-size: xx-large;
    max-width: min(70vw, 1200px);
}

.space-taker {
    flex-grow: 1;
}

.step-holder {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    margin: 0;
    padding: 0;
}

.step-text {
    margin-bottom: auto;
    margin-top: auto;
    align-self: center;
}

.step-arrow {
    height: 128px;
    margin: 0;
    padding: 0;
}

.flip-x {
    transform: scaleX(-1);
}

.faq-holder {
    --faq-radius: 24px;
    --faq-inner-radius: 8px;
}

.faq-entry {
    margin-top: 16px;
    background-color: #9e73f3;
    border-radius: var(--faq-radius);
    overflow: hidden;
}

.faq-question {
    background-color: #1f1034;
    width: fit-content;
    margin: 0;
    padding: 16px;
    font-size: 2em;
    border-radius: var(--faq-radius) 0 var(--faq-inner-radius) 0;
}

.faq-answer {
    padding: 8px;
}

a {
    color: #00c8ff;
}

#guide-button-parent {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 64px;
}

#guide-button {
    padding: 24px;
    font-size: 48px;
    margin-left: auto;
    margin-right: auto;
    color: aliceblue;
    background-color: #9e73f3;
    border-color: #1f1034;
    border-width: 8px;
    border-radius: 24px;
    border-style: solid;
}
footer {
    display: flex;
    justify-content: center;
    gap: 24px;
    padding: 32px 16px;
    position: relative;
    z-index: 1;
}

.ref-holder {
    --ref-radius: 24px;
    --ref-inner-radius: 8px;
}

.ref-entry {
    margin-top: 16px;
    background-color: #1f1034;
    border-radius: var(--ref-radius);
    overflow: hidden;
}

.ref-title {
    background-color: #9e73f3;
    width: fit-content;
    margin: 0;
    padding: 16px;
    font-size: 2em;
    border-radius: var(--ref-radius) 0 var(--ref-inner-radius) 0;
}

.visually-hidden {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    padding: 0;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

@media (max-width: 768px) {
    #steps {
        font-size: large;
        max-width: 100%;
        margin-top: 40px;
    }

    .step-arrow {
        height: 48px;
    }

    #first_block h1 {
        font-size: xx-large !important;
    }

    .faq-question,
    .ref-title {
        font-size: 1.25em;
    }

    #guide-button {
        padding: 16px;
        font-size: 28px;
    }
}

.ref-entry p {
    padding: 8px;
}

.ref-content {
    padding: 16px;
}

#sticker-zone {
    position: relative;
}

.scatter-sticker {
    position: absolute;
    z-index: -1;
    width: clamp(90px, 13vw, 190px);
    height: auto;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 6px 12px #1f103480);
}

.sticker-1 {
    top: 1%;
    left: -6vw;
    transform: rotate(-16deg);
}

.sticker-2 {
    top: 12%;
    right: -7vw;
    transform: rotate(13deg);
}

.sticker-3 {
    top: 27%;
    left: -7vw;
    transform: rotate(22deg);
}

.sticker-4 {
    top: 41%;
    right: -5vw;
    transform: rotate(-20deg);
}

.sticker-5 {
    top: 55%;
    left: -6vw;
    transform: rotate(9deg);
}

.sticker-6 {
    top: 70%;
    right: -7vw;
    transform: rotate(-13deg);
}

.sticker-7 {
    top: 86%;
    left: -5vw;
    transform: rotate(18deg);
}

@media (max-width: 768px) {
    .scatter-sticker {
        width: clamp(64px, 20vw, 120px);
    }

    .sticker-1,
    .sticker-3,
    .sticker-5,
    .sticker-7 {
        left: -9vw;
    }

    .sticker-2,
    .sticker-4,
    .sticker-6 {
        right: -9vw;
    }
}