body[data-theme="light"] {
    --text: #1F1F1F;
    --text-muted: #666666;
    --text-link: #B3A555;
    --bg: #F7F6F3;
    --surface: #FFFFFF;
    --border: #DDDDDD;
}

body[data-theme="dark"] {
    --text: #F5F5F5;
    --text-muted: #AAAAAA;
    --text-link: #8CABA1;
    --bg: #1A1A1A;
    --surface: #252525;
    --border: #3A3A3A;
}

body {
    font-family: "Pixelify Sans", sans-serif;
    font-optical-sizing: auto;
    font-style: normal;
    font-size: 16px;

    color: var(--text);
    background-color: var(--bg);
}

/* comp */
.link {
    color: var(--text-link);
}

.container {
    margin: 16px auto 0;
    width: 100%;
    max-width: 1140px;
}

.header {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.nav {
    display: flex;
    gap: 64px;
}

.nav-link a {
    font-size: 16px;
    color: var(--text);
    text-decoration: none;
}

.theme-btn {
    padding: 0;

    border: none;
    background-color: transparent;
    cursor: pointer;

    width: 32px;
    height: 32px;
    overflow: hidden;
}

.theme-btn-logo {
    --frog-frame-size: 32px;

    display: block;
    height: var(--frog-frame-size);
    image-rendering: pixelated;
    transform: translateX(0);
}

body[data-theme="dark"] .theme-btn-logo {
    transform: translateX(calc(-5 * var(--frog-frame-size)));
}

.theme-btn-logo--to-dark {
    animation: toDark .5s steps(5) forwards;
}

.theme-btn-logo--to-light {
    animation: toLight .5s steps(5) forwards;
}

@keyframes toDark {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(calc(-5 * var(--frog-frame-size)));
    }
}

@keyframes toLight {
    from {
        transform: translateX(calc(-5 * var(--frog-frame-size)));
    }

    to {
        transform: translateX(0);
    }
}


.intro {
    margin: 50px 0;

    display: flex;
    justify-content: space-between;
    align-items: start;
    gap: 64px;
}

.intro-hero-img {
    width: 405px;
    height: 290px;

    position: relative;
    background-color: #8CABA1;
    overflow: hidden;
    border-radius: 8px ;
}

.intro-hero-img_clouds {
    --cloud-y: -75px;
    --cloud-height: 200px;
    --cloud-tile-width: 888.889px;

    position: absolute;
    inset: 0;
    z-index: 1;
    pointer-events: none;

    background-image: url("img/hero-plain-clouds.png");
    background-repeat: repeat-x;
    background-size: var(--cloud-tile-width) var(--cloud-height);
    background-position: 0 var(--cloud-y);
    animation: moveClouds 24s linear infinite;
    will-change: background-position;
}

.intro-hero-img_mountain {
    width: 100%;
    height: 100%;

    position: absolute;
    bottom: 0;
    z-index: 2;
    border-radius: 8px;
}

@keyframes moveClouds {
    from {
        background-position: 0 var(--cloud-y);
    }

    to {
        background-position: calc(-1 * var(--cloud-tile-width)) var(--cloud-y);
    }
}

.intro-hero-caption {
    font-size: 10px;
    color: var(--text-muted);
    text-align: end;
}

.intro-text {
    text-align: justify;
}