@import url('https://fonts.googleapis.com/css2?family=Days+One&display=swap');


html {
    background-color: var(--bg-cnt);
    color: var(--active-color);

    font-family: 'Days One', sans-serif;
    font-size: 14px;
    letter-spacing: 0.5px;
}
html * {
    box-sizing: content-box;
    margin: 0;
    padding: 0;
}

.dev {
    padding: 2%;
}


/* HEADER */
body > header {
    height: max-content;
    padding: 2%;
    background-color: #1b1515;
}
body > header p {
    color: var(--inactive-color);
}
body > header span {
    color: var(--inactive-color);
    font-size: 0.8em;
}
body > header nav {
    margin-top: 4%;
}
body > header ul {
    list-style: none;
    display: flex;
    gap: 2em;
}

body > header button {
    background-color: transparent;
    border: none;

    color: var(--inactive-color);

    font-family: 'Days One', sans-serif;
    letter-spacing: 0.5px;
}
body > header button:hover {
    border-bottom: var(--bor);
    color: var(--active-color);

}
.activ-button {
    border-bottom: var(--bor);
    color: var(--active-color);
}


/* ROOT */
#root {
    padding: 40px;
    min-height: 60vh;
}
#root > header {
    padding: 2% 0;
    margin-bottom: 2%;
    width: 300px;
}
#root > header p {
    color: var(--inactive-color);
}


/* FOOTER */
body > footer {
    padding: 1em;
    background-color: black;
    background-color: #1b1515 !important;
    color: var(--inactive-color);
    font-size: 0.8em;
}
body > footer i {
    margin-right: 1em;
}