@font-face {
    font-family: 'Bauziet Norm';
    src: url('../fonts/Bauziet-Norm-Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Bauziet Norm';
    src: url('../fonts/Bauziet-Norm-ExtraBold.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Bauziet Norm';
    src: url('../fonts/Bauziet-Norm-Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Bauziet Norm';
    src: url('../fonts/Bauziet-Norm-LightItalic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Bauziet Norm';
    src: url('../fonts/Bauziet-Norm-Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Bauziet Norm';
    src: url('../fonts/Bauziet-Norm-MediumItalic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Bauziet Norm';
    src: url('../fonts/Bauziet-Norm-Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Bauziet Norm';
    src: url('../fonts/Bauziet-Norm-RegularItalic.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
}

@font-face {
    font-family: 'Bauziet Norm';
    src: url('../fonts/Bauziet-Norm-SemiBold.otf') format('opentype');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'Typold';
    src: url('../fonts/Typold Bold.otf') format('opentype');
    font-weight: bold;
    font-style: normal;
}

@font-face {
    font-family: 'Typold';
    src: url('../fonts/Typold ExtraBold.otf') format('opentype');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'Typold';
    src: url('../fonts/Typold Light.otf') format('opentype');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'Typold';
    src: url('../fonts/Typold Light Italic.otf') format('opentype');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'Typold';
    src: url('../fonts/Typold Medium.otf') format('opentype');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'Typold';
    src: url('../fonts/Typold Medium Italic.otf') format('opentype');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'Typold';
    src: url('../fonts/Typold Regular.otf') format('opentype');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'Typold';
    src: url('../fonts/Typold Italic.otf') format('opentype');
    font-weight: normal;
    font-style: italic;
}

/* Material Symbols - Global Filled Icon Style */
.material-symbols-outlined {
    font-variation-settings:
        'FILL' 1,
        'wght' 400,
        'GRAD' 0,
        'opsz' 24;
}

html {
    -webkit-text-size-adjust: 100%;
    font-family:
            ui-sans-serif,
            system-ui,
            -apple-system,
            BlinkMacSystemFont,
            'Segoe UI',
            Roboto,
            'Helvetica Neue',
            Arial,
            'Noto Sans',
            sans-serif,
            'Apple Color Emoji',
            'Segoe UI Emoji',
            'Segoe UI Symbol',
            'Noto Color Emoji';
    line-height: 1.5;
    tab-size: 4;
    scroll-behavior: smooth;
}
body {
    font-family: inherit;
    line-height: inherit;
    margin: 0;
}
h1,
h2,
p,
pre {
    margin: 0;
}
*,
::before,
::after {
    box-sizing: border-box;
    border-width: 0;
    border-style: solid;
    border-color: currentColor;
}
h1,
h2 {
    font-size: inherit;
    font-weight: inherit;
}
a {
    color: inherit;
    text-decoration: inherit;
}
svg {
    display: block;
    vertical-align: middle;
    shape-rendering: auto;
    text-rendering: optimizeLegibility;
}

:root {
    --gray-5: #F3F3F3;
    --gray-10: #E8E8E8;
    --gray-20: #D1D1D1;
    --gray-30: #B9B9B9;
    --gray-40: #A2A2A2;
    --gray-50: #8B8B8B;
    --gray-60: #747474;
    --gray-70: #5D5D5D;
    --gray-80: #454545;
    --gray-90: #2E2E2E;
    --gray-100: #171717;
    --content-width: 1280px;
    --gutter-size: 64px;
}

@media (width <= 1100px) {
    :root {
        --gutter-size: 32px;
    }
}

@media (width <= 743px) {
    :root {
        --gutter-size: 16px;
    }
}

.animated {
    opacity: 0;
    transform: translateY(var(--animation-distance, 40px));
    transition:
            opacity var(--animation-duration, 0.8s) var(--animation-easing, ease-out) var(--animation-delay, 0s),
            transform var(--animation-duration, 0.8s) var(--animation-easing, ease-out) var(--animation-delay, 0s);

    &.visible {
        opacity: 1;
        transform: translateY(0);
    }
}