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

html {

    width: 100%;
    height: 100%;
    -webkit-tap-highlight-color: transparent;

    font-size: 16px;
    -webkit-text-size-adjust: 100%;

}

body {

    min-height: 100vh;

    font-family:
        Inter,
        system-ui,
        sans-serif;

    background: var(--bg);
    background-color: #0c0d12;
    background-attachment: fixed;
    background-size: cover;

    color: var(--text);

    transition:
        background .3s,
        color .3s;

    overflow-x: hidden;
    overflow-y: auto;

    text-size-adjust: 100%;
    -webkit-text-size-adjust: 100%;

    padding-top: env(safe-area-inset-top);
    padding-bottom: env(safe-area-inset-bottom);

}

html,
body {

    touch-action: manipulation;

}

button {

    font-family: inherit;

}

img {

    display: block;

    max-width: 100%;

}

a {

    color: inherit;

    text-decoration: none;

}

::selection {

    background: #ffaf77;

    color: #3d2518;

}

button:focus-visible,
input:focus-visible {

    outline: 3px solid rgba(255, 175, 119, .35);
    outline-offset: 2px;

}

::-webkit-scrollbar {

    width: 8px;

}

::-webkit-scrollbar-thumb {

    background: rgba(255, 175, 119, .35);
    border-radius: 999px;

}

::-webkit-scrollbar-track {

    background: transparent;

}