@import url("https://fonts.googleapis.com/css2?family=Schibsted+Grotesk:ital,wght@0,400;0,500;1,400&display=swap");
@import url("https://fonts.googleapis.com/icon?family=Material+Icons");

:root {
    --rosewater: #dc8a78;
    --flamingo: #dd7878;
    --pink: #ea76cb;
    --mauve: #8839ef;
    --red: #d20f39;
    --maroon: #e64553;
    --peach: #fe640b;
    --yellow: #df8e1d;
    --green: #40a02b;
    --teal: #179299;
    --sky: #04a5e5;
    --sapphire: #209fb5;
    --blue: #1e66f5;
    --lavender: #7287fd;
    --text: #434f69;
    --subtext1: #5c5f77;
    --subtext0: #6c6f85;
    --overlay2: #7c7f93;
    --overlay1: #8c8fa1;
    --overlay0: #9ca0b0;
    --surface2: #acb0be;
    --surface1: #bcc0cc;
    --surface0: #ccd0da;
    --base: #eff1f5;
    --mantle: #e6e9ef;
    --crust: #dce0e8;
}

::selection {
    background-color: var(--overlay0);
}

html,
body {
    margin: 0;
    width: 100%;
    background-color: var(--base);
    color: var(--text);
    font-family: "Schibsted Grotesk", sans-serif;
    overflow: auto;
    overflow-anchor: none;
}

a {
    color: var(--text);
    transition:
        0.1s color ease-in-out;
    text-decoration: none;
}

a:hover,
a:active,
a:focus {
    color: var(--subtext0)
}

#navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin: 1em 3em;
}

.navbar-main {
    text-decoration: none;
    font-size: 1.6em;
}

.navbar-theme {
    width: 2em;
    height: 2em;
    font-size: 1em;
    border: 1px solid var(--overlay0);
    border-radius: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
    color: var(--yellow)
}

.navbar-theme:hover,
.navbar-theme:active,
.navbar-theme:focus {
    cursor: pointer;
}

.navbar-end {
    display: flex;
    align-items: center;
    gap: 1em;
}

.content-wrapper {
    margin: 2em 3em;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
}