:root {
    --base: #adaeae;
    --contrast: #8c4313;;
    --black: #000000;
    --white:white;
    --wheel_size_fraction:.24;
    --base_light: oklch(from var(--base) 10% c h);
    --base_tad_darker: oklch(from var(--base) 50% c h);
    --base_darker: oklch(from var(--base) 70% c h);
    --base_darker_transparent: oklch(from var(--base) 70% c h / .7);
    --base_darker_less_transparent: oklch(from var(--base) 70% c h / .5);
    --header_linear_1:oklch(from var(--base) 80% c h);
    --header_linear_2:oklch(from var(--base) 50% c h);
    --background_after:oklch(from var(--base) 30% c h);
    --accent_border:oklch(from var(--base) 20% c h);
    --border_radius:.5rem;

}

.darkmode {
    --base: #001d28;
    /* --base: #002331; */
    --contrast: #fd9083;
    --base_light: oklch(from var(--base) 80% 5% h);
    --base_darker_transparent: oklch(from var(--base) 20% c h / .7);
    --base_darker_less_transparent: oklch(from var(--base) 20% c h / .5);
    --base_darker: oklch(from var(--base) 20% c h);
    --base_tad_darker: oklch(from var(--base) 70% 5% h);
    --header_linear_1:oklch(from var(--base) 30% c h);
    --header_linear_2:oklch(from var(--base) 10% c h);
    --background_after:oklch(from var(--base) 90% c h);
    --accent_border:oklch(from var(--base) 50% c h);

}

body {
    width: 100vw;
    position: relative;
    overflow-x: clip;
    margin: 0;
    background-color: var(--base);
    color: var(--base_light);
    cursor:default
}

section {
    position: relative;

    &:not(:first-of-type) {
        padding-bottom: 5rem;
    }
}

.white {
    color: var(--white);
}

.light_base {
    color: var(--base_light);
}

.black {
    color: black;
}

.background_white {
    background-color: white;
}

.background_contrast {
    background-color: var(--contrast);
}

.contrast {
    color: var(--contrast);
}

.width-70 {
    width: 70vw;
}

.width-90 {
    width: 90vw;
}

.height {
    /* height: fit-content; */
    padding-top: 5rem;
    padding-bottom: 10rem;
}

.padding_top {
    padding-top: 5rem;
}

.padding_top_10 {
    padding-top: 10rem;
}

.padding_bottom {
    padding-bottom: 2rem;
}

*,
*::before,
*::after {
    box-sizing: border-box;
}


html {
    scrollbar-width: none;
    scroll-behavior: smooth;
    overflow-x: clip;
}





.linkedIn {
    width: 3rem;
    height: auto;
    fill: var(--base_light);
}







.min_height {
    min-height: 100vh;
}

.relative {
    position: relative;
}

.grid {
    display: grid;
    align-items: center;
    justify-content: center;
}

.grid_content {
    display: grid;
    place-content: center;
}

.grid_simple {
    display: grid;
}

.flex {
    display: flex;
}

.center_horizontal {
    justify-content: center;
}

.center_vertical {
    align-items: center;

    >p {
        padding: 0;
    }
}


.gap {
    gap: 4rem;

}

.gap_6 {
    gap: 6rem;
}

.gap_large {
    gap: 10rem;
}


.arrow {
    position: absolute;
    bottom: 2em;
    left: 50%;
    transform: translateX(-50%);
    z-index: 8;
    stroke: var(--base_light);
    width: 3rem;
    
}

.inline {
    display: flex;
    align-items: baseline;
    gap: 1rem;
}

button {
    all: unset;
    border-radius: var(--border_radius);
    border: 1px solid var(--base_light);
    padding: .5rem;
    background-color: none;
    color: var(--base_light);
    cursor: pointer;

    >a {
        letter-spacing: 0rem;
        margin: 0;
        padding: 0;
        font-weight: 300;
    }

    &:hover {
        background-color: var(--base_light);
        >a {
            color: var(--base);
        }
        
    }
}