@use 'colors' as *;
@use 'themes' as *;
@use 'easings' as *;
@use 'reset' as *;
@use 'layers' as *;
@use 'functions' as *;
@use 'utils' as *;
@use 'fonts' as *;
@use 'font-style' as *;
@use 'layout' as *;
@use 'scroll' as *;
@use 'transitions' as *;

:root {
    font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;

    background: var(--white);
    color: var(--black);

    font-synthesis: none;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    margin: 0;
    min-height: 100vh;
}

// Type
.h1,
h1,
h2,
h3,
h4,
h5,
h6 {
    @include h1;
}
.p,
p,
a,
button,
input,
pre {
    @include p;
}

.entry {
    img {
        max-width: 100%;
        height: auto;
    }
    p {
        min-height: 1px;
    }
    a {
        text-decoration: underline;
    }
    & > * {
        margin-bottom: 1em;
        margin-top: 1em;
    }
    & > *:first-child {
        margin-top: 0;
    }
    & > *:last-child {
        margin-bottom: 0;
    }

    ul,
    ol {
        li {
            margin-bottom: 1em;
            width: desktop-vw(577px);
        }
    }
    ul {
        list-style: disc;
        padding-left: 1em;
    }
}

#app {
    min-height: 100vh;
}

@keyframes blink {
    5% {
        opacity: 0;
    }
    40% {
        opacity: 0;
    }
    60% {
        opacity: 1;
    }
    95% {
        opacity: 1;
    }
}

@keyframes bonk {
    0% {
        transform: rotate(calc(var(--bonk-angle) * -1));
    }
    50% {
        transform: rotate(var(--bonk-angle));
    }
}