@import url('https://fonts.googleapis.com/css2?family=Roboto+Flex:opsz,wght,XOPQ,XTRA,YOPQ,YTDE,YTFI,YTLC,YTUC@8..144,100..1000,96,468,79,-203,738,514,712&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Tilt+Warp&display=swap');

:root {
    --font-sans: 'Roboto Flex', sans-serif;
    --font-title: "Tilt Warp", sans-serif;
    --bg: #f5f5f6;
    --text: #1e1d22;
    --surface: #ebebed;
    --border: #d4d3d8;
    --surface-accent: #fafafb;

    /*STICKY NOTES*/
    --note-yellow: #fef08a;
    --note-pink: #f7d2e9;
    --note-blue: #c1dbf7;
    --note-green: #afefcc;
    --note-purple: #d8d2f7;
    --note-orange: #f9cda2;
}

.darkmode {
    --bg: #212024;
    --text: #e5e3e8;
    --surface: #323035;
    --border: #3e3c44;
    --surface-accent: #47454d;
}

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

*:not(dialog) {
    margin: 0;
}

@media (prefers-reduced-motion: no-preference) {
    html {
        interpolate-size: allow-keywords;
    }
}

@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation: none !important;
        transition: none !important;
    }
}

/* html {
    font-size: 1.55vw;
} */

body {
    line-height: 1.5;
    -webkit-font-smoothing: antialiased;
    font-family: var(--font-sans);
    background-color: var(--bg);
    color: var(--text);
    height: 100vh;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.main-wrapper {
    height: 100%;
    width: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
}

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

p, h1, h2, h3, h4, h5, h6 {
    overflow-wrap: break-word;
}

p {
    text-wrap: pretty;
}

h1, h2, h3, h4, h5, h6 {
    text-wrap: balance;
}

a {
    color: var(--text);
    text-decoration: none;
}

#root, #__next {
    isolation: isolate;
}

.toggle {
    position: fixed;
    top: 0;
    right: 0;
    margin: 0.3rem;
    
    width: 1.2rem;
    height: 1.2rem;

    background-color: var(--text);

    mask-position: center;
    mask-repeat: no-repeat;
    mask-size: contain;

    cursor: pointer;

    pointer-events: auto;

    z-index: 999;
}

.toggle:hover {
    background-color: var(--accent);
}

.toggle.theme {
    mask-image: url("/shared/svg/light_mode.svg");
    transition: transform 0.3s ease;
}

.darkmode .toggle.theme {
    mask-image: url("/shared/svg/dark_mode.svg");
}

.toggle.theme:active {
    transform: scale(0.7);
}

@keyframes fadeInTop {
    from {
        opacity: 0;
        transform: translateY(-5px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@keyframes fadeOutTop {
    from {
        opacity: 1;
        transform: translateY(0);
    }

    to {
        opacity: 0;
        transform: translateY(-5px);
    }
}

@media (max-width: 600px){
    .nav-panel,
    .settings-panel {
        margin: 1rem 0.5rem;
    }
}

@media (max-width: 600px) and (hover: none) and (pointer: coarse){
    .toggle {
        width: 1.5rem;
        height: 1.5rem;
    }

    .nav-btn {
        font-size: 1.1rem;
    }
}