@import url('https://fonts.googleapis.com/css2?family=Martian+Mono:wght@300;400;500;700&display=swap');

@font-face {
    font-family: 'Neue Montreal';
    src: url('../assets/fonts/NeueMontreal-Light.otf');
    font-weight: 300;
}

@font-face {
    font-family: 'Neue Montreal';
    src: url('../assets/fonts/NeueMontreal-Regular.otf');
    font-weight: 400;
}

@font-face {
    font-family: 'Neue Montreal';
    src: url('../assets/fonts/NeueMontreal-Medium.otf');
    font-weight: 500;
}

@font-face {
    font-family: 'Neue Montreal';
    src: url('../assets/fonts/NeueMontreal-Bold.otf');
    font-weight: 700;
}

/* =========================
ROOT
========================= */

:root {

    --bg: #000;
    --text: #fff;

    --font-display: 'Neue Montreal', sans-serif;
    --font-mono: 'Martian Mono', monospace;

}

/* =========================
RESET
========================= */

*,
*::before,
*::after {

    margin: 0;
    padding: 0;
    box-sizing: border-box;

}

html {
    scroll-behavior: smooth;
}

html,
body {

    background: var(--bg);
    color: var(--text);

    font-family: var(--font-display);

    overflow-x: hidden;

    text-rendering: optimizeLegibility;

    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;

}

html,
body {
    height: auto;
    min-height: 100%;
    overflow-y: auto;
}

/* =========================
MEDIA
========================= */

img {

    display: block;
    max-width: 100%;
    height: auto;

}

picture {
    display: block;
}

/* =========================
LINKS
========================= */

a {

    color: inherit;
    text-decoration: none;

}

/* =========================
FORMS
========================= */

button,
input,
textarea,
select {
    font: inherit;
}

/* =========================
LISTS
========================= */

ul,
ol {
    list-style: none;
}

/* kill nav weird bullets / dots completely */
.nav-links li::before,
.nav-links li::after {

    content: none !important;
    display: none !important;

}

/* =========================
PAGE WRAPPER (PJAX)
========================= */

#page {

    opacity: 1;

    filter: blur(0px);

    transform: none;

    transition:
        opacity 1.4s cubic-bezier(0.22, 1, 0.36, 1),
        filter 1.4s cubic-bezier(0.22, 1, 0.36, 1);

    will-change: opacity, filter;

}

/* OUTGOING STATE (ONLY BLUR + FADE) */
#page.is-out {

    opacity: 0.85;

    filter: blur(22px);

    transform: none;

}

/* =========================
TRANSITION LAYER (DISABLED STYLE)
========================= */

.transition-layer {

    position: fixed;
    inset: 0;

    pointer-events: none;

    opacity: 0;

    z-index: 99999;

}

/* =========================
SELECTION
========================= */

::selection {

    background: rgba(255, 255, 255, 0.2);

}