@import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oranienbaum&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Fira+Code:wght@300..700&family=Open+Sans:ital,wght@0,300..800;1,300..800&family=Oranienbaum&display=swap');

html {
    scroll-behavior: smooth;
}

* {
    transition: background-color var(--transition-base), fill var(--transition-base), color var(--transition-base);
}

body {
    font-family: var(--font-primary);
    font-size: var(--fs-base);
    background-color: var(--color-bg);
    color: var(--color-text);
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    overflow-x: hidden;
    line-height: 1.2;
    max-width: 100vw;
}

ol {
    list-style: auto;
}

b {
    font-weight: bold;
}

/* Containers */

.container {
padding: 0 var(--space-4);
    max-width: min(var(--container-width), 100vw);
    margin: 0 auto;
    box-sizing: border-box;
    width: 100%;
    z-index: 0;
}

main {
    display: flex;
    flex-direction: column;
    padding-bottom: 100px;
    flex-grow: 1;
    gap: 100px;
    max-width: 100vw;
}

.section-container {
    gap: var(--space-8);
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

@media (max-width: 768px) {
    .section-container {
        padding: var(--space-4);
    }

    main {
        padding-top: 20px;
        gap: 50px;
    }

}

/* Animaio0n */

.reveal,
.org-hero {
    opacity: 0;
    animation-delay: var(--animation-delay);
    transform: translateY(20px);
    transition: opacity var(--transition-slow) ease-out, transform var(--transition-slow) ease-out;
}

.reveal.active,
.org-hero.active {
    opacity: 1;
    transform: translateY(0);
}