@import 'root.css';

header {
    width: calc(100% - 6em);
    padding: 1em 3em;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--secondary-background-color);
}

header a {
    text-decoration: none;
    color: var(--primary-color);
}

header a:hover {
    text-decoration: underline;
}

header ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
}

header ul li {
    list-style: none;
    margin: 0.5em 1em;
}

@media (width <= 700px) {
    header {
        padding: 0 3em;
    }

    header h1 {
        display: none;
    }

    header ul {
        padding: 0;
        justify-content: space-around;
    }

    header ul li {
        margin: 1em;
    }
}