@import url('https://fonts.googleapis.com/css2?family=Arimo:ital,wght@0,400..700;1,400..700&family=Noto+Sans:ital,wght@0,100..900;1,100..900&family=Zalando+Sans+Expanded:ital,wght@0,200..900;1,200..900&display=swap');
@import url('https://fonts.googleapis.com/css2?family=M+PLUS+Rounded+1c&display=swap');

:root {
    --color-primary: #1f1e20;
    --color-secondary: #ffffff;
    --font-header: 'Zalando Sans Expanded', sans-serif;
    --font-body: 'M PLUS Rounded 1c', serif;
    --color-focus: rgb(255, 250, 184);
}

*, *::before, *::after { /* *::before, *::after are used to make sure pseudo elements are affected */
    margin: 0;
    padding: 0;
    box-sizing: border-box; /* Changes how px is calculated */
    overflow-wrap: normal;
}

html {
    height: 100%; /* allows footer to stay at the bottom */
    scroll-behavior: smooth;
}

body {
    display: flex;
    flex-direction: column;
    height: 100%; /* allows footer to stay at the bottom */
    text-wrap: pretty;
}

main {
    font-family: var(--font-body);
    margin-bottom: 50px;
}

/* Nav */
.nav-wrapper {
    background-color: var(--color-primary);
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    padding: 1em 0;
    font-family: var(--font-header);
}

.nav-wrapper a {
    text-decoration: none;
}

/* Nav logo */
.logo {
    font-weight: bolder;
    font-size: x-large;
    color: #ffffff;
}

/* Contact button */
.contact-button {
    background-color: var(--color-secondary);
    border-radius: 1em;
    padding: 10px;
    color: var(--color-primary);
}

.contact-button:hover {
    color: var(--color-secondary);
    background-color: var(--color-primary);
    border: 1px solid var(--color-secondary);
    transition: all .5s;
}

/* Footer */
footer {
    margin-top: auto; /* allows footer to stay at the bottom */
    color: var(--color-secondary);
    font-family: var(--font-header);
}

.footer-wrapper {
    background-color: var(--color-primary);
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 1em 0;
    gap: .5em;
}

/* Buttons (exluding contact button) */
.btn {
    background-color: var(--color-primary);
    color: var(--color-secondary);
    padding: .7em;
    border-radius: 50px;
    text-decoration: none;
    width: 100px;
    text-align: center;
}