@import url("https://fonts.googleapis.com/css2?family=Lato:wght@300;400&family=Poppins:ital,wght@0,200;0,300;0,400;0,500;1,300;1,400;1,500&display=swap");
@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");

:root {
    --max-width: 1100px;
    --border-radius: 12px;
    --font-mono: ui-monospace, Menlo, Monaco, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", "Oxygen Mono", "Ubuntu Monospace", "Source Code Pro", "Fira Mono", "Droid Sans Mono", "Courier New", monospace;
    --foreground-rgb: 0, 0, 0;
    --background-start-rgb: 214, 219, 220;
    --background-end-rgb: 255, 255, 255;
    --primary-glow: conic-gradient(from 180deg at 50% 50%, #16abff33 0deg, #0885ff33 55deg, #54d6ff33 120deg, #0071ff33 160deg, transparent 360deg);
    --secondary-glow: radial-gradient(#fff, hsla(0, 0%, 100%, 0));
    --menu-color: #000;
    --menu-height: 2px;
    --menu-transition-duration: 0.2s;
    --tile-start-rgb: 239, 245, 249;
    --tile-end-rgb: 228, 232, 233;
    --tile-border: conic-gradient(#00000080, #00000040, #00000030, #00000020, #00000010, #00000010, #00000080);
    --callout-rgb: 238, 240, 241;
    --callout-border-rgb: 172, 175, 176;
    --card-rgb: 180, 185, 188;
    --card-border-rgb: 131, 134, 135
}

@media (prefers-color-scheme:dark) {
    :root {
        --foreground-rgb: 255, 255, 255;
        --background-start-rgb: 0, 0, 0;
        --background-end-rgb: 0, 0, 0;
        --primary-glow: radial-gradient(rgba(1, 65, 255, .4), rgba(1, 65, 255, 0));
        --secondary-glow: linear-gradient(to bottom right, rgba(1, 65, 255, 0), rgba(1, 65, 255, 0), rgba(1, 65, 255, .3));
        --tile-start-rgb: 2, 13, 46;
        --tile-end-rgb: 2, 5, 19;
        --tile-border: conic-gradient(#ffffff80, #ffffff40, #ffffff30, #ffffff20, #ffffff10, #ffffff10, #ffffff80);
        --callout-rgb: 20, 20, 20;
        --callout-border-rgb: 108, 108, 108;
        --card-rgb: 100, 100, 100;
        --card-border-rgb: 200, 200, 200
    }
}

* {
    box-sizing: border-box;
    padding: 0;
    margin: 0
}

body,
html {
    max-width: 100vw;
    overflow-x: hidden
}

body {
    color: rgb(var(--foreground-rgb));
    position: relative;
    -ms-overflow-style: none;
    scrollbar-width: none
}

body:after {
    position: absolute;
    content: "";
    top: 0;
    z-index: 10;
    height: 100%;
    width: 1px;
    left: calc(50% - .5px);
    opacity: .5
}

main {
    display: flex;
    flex-direction: column;
    align-items: center
}

section {
    width: 100%
}

a {
    color: inherit
}

a,
li,
ul {
    text-decoration: none
}

li,
ul {
    list-style: none;
    padding: 0;
    margin: 0
}

.hide-component {
    opacity: 0;
    pointer-events: none
}

@media (prefers-color-scheme:dark) {
    html {
        color-scheme: dark
    }
}

.my-masonry-grid {
    display: flex;
    margin-left: -30px;
    width: auto
}

.my-masonry-grid_column {
    padding-left: 30px;
    background-clip: padding-box
}

.my-masonry-grid_column>div {
    background: grey;
    margin-bottom: 30px
}

@font-face {
    font-family: __Inter_d65c78;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/55c55f0601d81cf3-s.woff2) format("woff2");
    unicode-range: u+0460-052f, u+1c80-1c8a, u+20b4, u+2de0-2dff, u+a640-a69f, u+fe2e-fe2f
}

@font-face {
    font-family: __Inter_d65c78;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/26a46d62cd723877-s.woff2) format("woff2");
    unicode-range: u+0301, u+0400-045f, u+0490-0491, u+04b0-04b1, u+2116
}

@font-face {
    font-family: __Inter_d65c78;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/97e0cb1ae144a2a9-s.woff2) format("woff2");
    unicode-range: u+1f??
}

@font-face {
    font-family: __Inter_d65c78;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/581909926a08bbc8-s.woff2) format("woff2");
    unicode-range: u+0370-0377, u+037a-037f, u+0384-038a, u+038c, u+038e-03a1, u+03a3-03ff
}

@font-face {
    font-family: __Inter_d65c78;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/df0a9ae256c0569c-s.woff2) format("woff2");
    unicode-range: u+0102-0103, u+0110-0111, u+0128-0129, u+0168-0169, u+01a0-01a1, u+01af-01b0, u+0300-0301, u+0303-0304, u+0308-0309, u+0323, u+0329, u+1ea0-1ef9, u+20ab
}

@font-face {
    font-family: __Inter_d65c78;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/6d93bde91c0c2823-s.woff2) format("woff2");
    unicode-range: u+0100-02ba, u+02bd-02c5, u+02c7-02cc, u+02ce-02d7, u+02dd-02ff, u+0304, u+0308, u+0329, u+1d00-1dbf, u+1e00-1e9f, u+1ef2-1eff, u+2020, u+20a0-20ab, u+20ad-20c0, u+2113, u+2c60-2c7f, u+a720-a7ff
}

@font-face {
    font-family: __Inter_d65c78;
    font-style: normal;
    font-weight: 100 900;
    font-display: swap;
    src: url(../fonts/a34f9d1faa5f3315-s.p.woff2) format("woff2");
    unicode-range: u+00??, u+0131, u+0152-0153, u+02bb-02bc, u+02c6, u+02da, u+02dc, u+0304, u+0308, u+0329, u+2000-206f, u+20ac, u+2122, u+2191, u+2193, u+2212, u+2215, u+feff, u+fffd
}

@font-face {
    font-family: __Inter_Fallback_d65c78;
    src: local("Arial");
    ascent-override: 90.20%;
    descent-override: 22.48%;
    line-gap-override: 0.00%;
    size-adjust: 107.40%
}

.__className_d65c78 {
    font-family: __Inter_d65c78, __Inter_Fallback_d65c78;
    font-style: normal
}

.Navigation_nav__D1U__ {
    top: 0;
    left: 0;
    display: flex;
    position: fixed;
    justify-content: space-between;
    z-index: 5;
    width: 100%;
    padding: 24px 48px;
    font-weight: 500;
    --menu-color: #fff;
    color: #fff
}

.Navigation_bgDark__8fACP,
.Navigation_bg__28pB1 {
    position: absolute;
    width: 100%;
    height: 0;
    left: 0;
    z-index: -1;
    top: 0
}

.Navigation_bg__28pB1 {
    background-color: #fff
}

.Navigation_bgDark__8fACP {
    background-color: #000
}

.Navigation_nav__D1U__ ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    gap: 32px;
    justify-content: center;
    max-width: 100%
}

.Navigation_nav__D1U__ li {
    text-align: center;
    text-transform: uppercase;
    letter-spacing: 2px;
    font-weight: 300;
    font-family: Inter;
    transition: font-family .2s ease-in
}

.Navigation_nav__D1U__ li.Navigation_activeRouter__eikn3,
.Navigation_nav__D1U__ li:hover {
    font-family: bickham-script-pro-3;
    line-height: 20px;
    font-size: 42px;
    letter-spacing: 0;
    text-transform: lowercase
}

.Navigation_nav__D1U__ li:hover * {
    height: 22px;
    display: inline-block
}

.Navigation_nav__D1U__ a {
    text-decoration: none
}

.Navigation_menuToggle__gZvQE {
    display: none
}

.Navigation_menuButton__9A_0q {
    display: none;
    cursor: pointer
}

.Navigation_direction___UK83 {
    position: relative;
    width: 24px;
    right: 0;
    top: 24px
}

.Navigation_right__z08gD:after {
    position: absolute;
    content: "\25bc";
    height: 24px;
    width: 24px;
    animation: Navigation_bounce__h7CMX 1s infinite
}

@media (max-width:1284px) {
    .Navigation_nav__D1U__ .Navigation_navItems__bOSiB {
        flex-direction: column;
        align-items: center;
        width: 100%;
        display: none;
        height: 100vh;
        padding-top: 24px
    }

    .Navigation_bgDark__8fACP,
    .Navigation_bg__28pB1,
    .Navigation_smoothBG__fI4yE {
        transition: all .2s ease-in-out
    }

    .Navigation_menuToggle__gZvQE {
        display: block;
        position: absolute;
        top: 24px;
        right: 24px;
        width: 30px;
        height: 30px;
        opacity: 0;
        z-index: 6
    }

    .Navigation_menuButton__9A_0q {
        display: flex;
        position: absolute;
        top: 27px;
        right: 24px;
        height: 30px;
        width: 30px;
        z-index: 1;
        font-size: 24px;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        align-items: center
    }

    .Navigation_toggleButton__KLfMP {
        width: 30px;
        height: 1px;
        cursor: pointer;
        background-color: var(--menu-color);
        position: relative;
        transition: height .2s ease-in-out
    }

    .Navigation_toggleButton__KLfMP:before {
        top: -12px
    }

    .Navigation_toggleButton__KLfMP:after {
        top: 12px
    }

    .Navigation_toggleButton__KLfMP:after,
    .Navigation_toggleButton__KLfMP:before {
        content: "";
        position: absolute;
        left: 0;
        width: 100%;
        height: 1px;
        background-color: var(--menu-color);
        transition: transform .2s ease
    }

    .Navigation_menuToggle__gZvQE:checked~.Navigation_menuButton__9A_0q .Navigation_toggleButton__KLfMP {
        height: 0
    }

    .Navigation_menuToggle__gZvQE:checked~.Navigation_menuButton__9A_0q .Navigation_toggleButton__KLfMP:before {
        transform: translateY(12px) rotate(45deg)
    }

    .Navigation_menuToggle__gZvQE:checked~.Navigation_menuButton__9A_0q .Navigation_toggleButton__KLfMP:after {
        transform: translateY(-12px) rotate(-45deg)
    }

    .Navigation_menuToggle__gZvQE~.Navigation_navItems__bOSiB,
    .Navigation_menuToggle__gZvQE~.Navigation_right__z08gD {
        display: none
    }

    .Navigation_menuToggle__gZvQE:checked+.Navigation_menuButton__9A_0q+.Navigation_bgDark__8fACP+.Navigation_navItems__bOSiB,
    .Navigation_menuToggle__gZvQE:checked+.Navigation_menuButton__9A_0q+.Navigation_bg__28pB1+.Navigation_navItems__bOSiB {
        display: flex;
        position: absolute;
        top: 0;
        left: 0;
        height: 100vh;
        width: 100vw;
        color: #fff;
        background-color:var(--stone);
    }

    .Navigation_menuToggle__gZvQE:checked+.Navigation_menuButton__9A_0q+.Navigation_bgDark__8fACP,
    .Navigation_menuToggle__gZvQE:checked+.Navigation_menuButton__9A_0q+.Navigation_bg__28pB1 {
        opacity: 1;
        background: rgba(0, 0, 0, .58);
        border-radius: 16px;
        box-shadow: 0 4px 30px rgba(0, 0, 0, .1);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        position: absolute;
        top: 0;
        left: 0;
        height: 100vh !important;
        width: 100vw
    }

    .Navigation_nav__D1U__ {
        flex-direction: column;
        justify-content: flex-start;
        padding: 16px 24px
    }

    .Navigation_logo__hfAeQ {
        display: flex-start;
        justify-content: center;
        width: 100%
    }

    .Navigation_logo__hfAeQ img {
        margin-bottom: -3px;
        height: 50px;
        width: auto
    }

    .Navigation_right__z08gD {
        position: absolute;
        bottom: 24px;
        right: 24px
    }
}

@keyframes Navigation_bounce__h7CMX {

    0%,
    to {
        transform: translateY(0)
    }

    50% {
        transform: translateY(-10px)
    }
}