:root {
    --color-background: hsl(0, 0%, 10%);
    --color-text: hsl(0, 0%, 90%);
    --color-border: hsl(0, 0%, 80%);
    --color-shadow: hsla(0, 0%, 100%, 0.5);
}

html {
    scroll-behavior: smooth;
}

a {
    color: var(--color-text)
}

body {
    /* font */
    font-family: "JetBrains Mono", sans-serif;
    color: var(--color-text);
    background-color: var(--color-background);

    /* page */
    margin: 2rem;
    padding: 0;
}

p { text-indent: 1.5em; }

.container_index {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    min-height: 100dvh;
}

.container_index :is(h1, h2) {
    color: var(--color-text);
    line-height: 1.5;
    margin: 0;
}


.container_index h1 {
    font-weight: 800;
    font-size: clamp(1.8rem, 4vw + 0.5rem, 3rem); /* responsive scaling: min size, preferred size, max size */
    color: var(--color-text);
    transform: translateY(-2.25rem); /* fixed spacing based on max font-size: -0.75em of 3rem = -2.25rem */
}


.container_index h2 {
    font-weight: 400;
    font-size: clamp(1rem, 2.5vw + 0.3rem, 1.8rem); /* scales proportionally with h1 but smaller */
    transform: translateY(-2rem); /* fixed spacing to maintain consistent gap with h1 */
}

.nav-bar {
    border: 2px solid var(--color-border);
    border-radius: 10px;
    box-shadow: 0 4px 10px var(--color-shadow);
    width: auto;
    padding: clamp(.10rem, 5%, 1rem);
    transition: transform 0.2s ease-in-out;
    background-color: var(--color-background);
    background-clip: padding-box;
}

nav ul {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 2rem;
    padding: 0;
    margin: 0;
    list-style: none;
}

nav a {
    position: relative;
    color: var(--color-text);
    font-weight: bold;
    text-decoration: none;
}

nav img {
    width: 2rem;
    height: 2rem;
    display: block;
}

footer {
    color: var(--color-text);
    font-weight: bold;
    text-align: center;
    margin-block-start: 5rem;
}