:root {
    --bg-neutral-500: #737373;
    --bg-neutral-600: #525252;
    --bg-neutral-700: #404040;
    --bg-neutral-800: #262626;
    --bg-neutral-900: #171717;
    --bg-neutral-950: #0a0a0a;
    --text-primary: #ecf0f1;

    --accent1: #0dc04b;
    --accent2: #179ab7;

    --accent1-dark: #179242;
    --accent2-dark: #286e7e;

    --border-radius-sm: 10px;
}

html {
    background-color: var(--bg-neutral-950);
    color: var(--text-primary);
}

body {
    margin: 0;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* general text config */

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: "Inter", sans-serif;
}

/* customize default elements */

a,
a:link,
a:visited {
    color: var(--accent2);
    text-decoration: unset;
    font-family: 'Inter', sans-serif;
}

a:hover {
    text-decoration: underline var(--accent2);
    text-decoration-style: wavy;
}

img {
    margin: 10px 0 10px 0;
    max-width: 100%;
    height: auto;
}

/* Header */

/* H1 */

h1 {
    color: var(--accent1);
    font-weight: 700;
}

h1::after {
    content: "🛪";
    margin-left: 4px;
    color: var(--bg-neutral-950);
    font-weight: 700;
    font-family: "NotoEmoji"
}

h1:hover::after {
    color: var(--accent1);
    font-weight: 700;
    font-family: "NotoEmoji";
}

h2 {
    color: var(--accent2);
}

/* header */

.logo {
    font-size: x-large;
    justify-content: flex-start;
    font-family: 'InterTight', sans-serif;
}


/* fonts */

@font-face {
    font-family: Inter;
    src: url(/fonts/Inter.ttf);
}

@font-face {
    font-family: Inter-Italic;
    src: url(/fonts/Inter-Italic.ttf);
}

@font-face {
    font-family: InterTight;
    src: url(/fonts/InterTight.ttf);
}

@font-face {
    font-family: InterTight-Italic;
    src: url(/fonts/InterTight-Italic.ttf);
}

@font-face {
    font-family: NotoEmoji;
    src: url(/fonts/NotoEmoji.ttf);
}