@use "fonts.scss";

:root {
    --gap: 0.5rem;
}

#container, body, html {
    margin: 0;
    padding: 0;
    width: 100%;
    height: 100%;
    scroll-behavior: smooth;
}

body {
    font-family: Inter, serif;
}

#container:not([theme="dark"]) {
    --background: #faf9f6;
    --primary: #0b1215;
    --secondary: #F5F5F2;
    --text: #000;
    --light-invert: invert();
    --dark-invert: none;
}

#container[theme="dark"] {
    --background: #352f36;
    --primary: #fffafa;
    --secondary: #4A444B;
    --text: #fff;
    --light-invert: none;
    --dark-invert: invert();
}

#inner {
    min-width: 75%;
    transition: 0.1s background-color ease-in-out;
    background-color: var(--background);
    color: var(--text);

    display: grid;
    text-align: center;
    place-content: center;
    padding: 1rem 0;

    @media (max-width: 768px) {
        padding: 1rem;
        height: unset;
    }
}

h1 {
    margin: var(--gap);
    font-family: "Pacifico", serif;
}

h1, h2, h3, h4, h5, h6 {
    text-transform: lowercase;
}