/* Variables */

:root {
    --color-primary: #111;
    --text-color-primary: #eee;
}

/* General */

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    border: 1px solid #1e1e1e;
}
html {
    scroll-behavior: smooth;
    font-size: 62.5%; /* makes 1rem=10px from 16px(browser default) */
}
body {
    font-size: 1.6rem; /* 16px */
    background-color: var(--color-primary);
    color: var(--text-color-primary);
    font-family: sans-serif;
    padding: 2rem;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
h1 {
    font-size: 3.2rem; /* 32px */
}
h2 {
    font-size: 2.4rem; /* 24px */
}
a {
    text-decoration: none;
    color: #aaf;
}
li {
    list-style: none;
}

button {
    background-color: var(--color-primary);
    color: var(--text-color-primary);
    padding: 0.4rem 1rem;
    border: 1px solid #333;
    border-radius: 4px;
}

/* Styles */

header nav {
    display: flex;
    justify-content: space-between;
}
header nav li {
    display: flex;
    gap: 2rem;
}

.pio {
    font-weight: bold;
    color: #eee;
}
.pio .dot {
    color: #aaa;
}
.pio .io {
    color: #ffaa99;
}

section {
    padding: 2rem;
}

/* Mobile resopnsive */
@media (max-width: 600px) {
    html {
        font-size: 56.25%; /* 9px base font size */
    }
    body {
        /* this body css -> no need to rewrite ~ just to show below comment info */
        font-size: 1.6rem; /* 1.6 * 9px = 14.4px */
    }
}