@import url('https://fonts.googleapis.com/css2?family=Gabarito:wght@400..900&display=swap');

@font-face {
    font-family: 'GothamBook';
    src: url('../fonts/GothamNarrow-Book.woff') format('woff');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'GothamLight';
    src: url('../fonts/GothamNarrow-Light.woff') format('woff');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'GothamExtraLight';
    src: url('../fonts/GothamNarrow-XLight.woff') format('woff');
    font-weight: 300;
    font-style: normal;
}

:root {
    color-scheme: light dark;
    --color-dark: #131313;
    --color-light: #eeeeee;
    --color-dark-translucent: rgba(9, 9, 11, 0.85);
    --color-light-translucent: rgba(255, 255, 255, 0.85);
    --color-motion-hardly-grey: #848484;
    --color-motion-light-grey: #646464;
    --color-motion-medium-grey: #2a2a2a;
    --color-motion-dark-grey: #1a1a1a;
    --color-motion-grey: #303437;
    --color-motion-orange: #fa6914;
    --color-pink: rgb(255, 22, 117);
    --color-link: #0089c7;
    --color-link-hover-bg: var(--color-motion-orange);
    --color-error: #ff0000;
    --color-disabled: #ccc;
    --color-table-light: #d3d3d3;
    --color-table-light-border: #d8d8d8;
    --color-table-dark: #303030;
    --color-table-dark-border: #383838;
    --s-5: clamp(0.33rem, 0.39rem + -0.29vw, 0.18rem);
    --s-4: clamp(0.41rem, 0.47rem + -0.31vw, 0.25rem);
    --s-3: clamp(0.51rem, 0.57rem + -0.31vw, 0.35rem);
    --s-2: clamp(0.64rem, 0.69rem + -0.27vw, 0.5rem);
    --s-1: clamp(0.8rem, 0.84rem + -0.18vw, 0.71rem);
    --s0: clamp(1rem, 1rem + 0vw, 1rem);
    --s1: clamp(1.25rem, 1.19rem + 0.32vw, 1.41rem);
    --s2: clamp(1.56rem, 1.39rem + 0.85vw, 2rem);
    --s3: clamp(1.95rem, 1.61rem + 1.7vw, 2.83rem);
    --s4: clamp(2.44rem, 1.83rem + 3.04vw, 4rem);
    --s5: clamp(3.05rem, 2.04rem + 5.07vw, 5.65rem);
    --radius-outer: var(--s0);
    --radius-padding: var(--s-3);
    --radius-inner: calc(var(--radius-outer) - var(--radius-padding));
    --grid-max: 1900px;
    --grid-gap: var(--s3);
    --measure: 65ch;
    --blur-filter: blur(50px);
    --margin-l: 20vh;
    --margin-m: 10vh;
    --margin-s: 5vh;
    /* Timeline */
    --item1-transform: translateX(-100%);
    --item1-zIndex: 11;
    --item1-opacity: 0;
    --item2-transform: translateX(0);
    --item2-zIndex: 10;
    --item2-opacity: 1;
    --item3-transform: translateX(60%);
    --item3-zIndex: 9;
    --item3-opacity: .5;
    --item4-transform: translateX(120%);
    --item4-zIndex: 8;
    --item4-opacity: .2;
    --item5-transform: translateX(180%);
    --item5-zIndex: 7;
    --item5-opacity: 0;
    --toggle-indicator-size: 24px;
    --track-height:;
    --track-width: $toggle-indicator-size * 2.5;
    --highContrastModeSupport: solid 2px transparent;
    --track-border: var(--mid);
    --track-background: var(--color-light);
    --focus-ring: 0px 0px 0px 2px var(--color-dark);
    --min-cols-2: 1;
    --min-cols-4: 2;
    --min-cols-8: 2;
    --max-cols-2: 2;
    --max-cols-4: 4;
    --max-cols-8: 8;
    --cols-min-width: 160px;
}