@import url('https://fonts.googleapis.com/css2?family=Oswald:wght@200..700&display=swap');

/*
CSS Reference: https://www.w3schools.com/cssref/index.php

Some highlights:
________________________
Nesting:
Use the & symbol

One level deep: 
Use the > symbol
div > a
Every <a> that's a direct child of <div>

All levels deep:
div a
Any <a> within a <div>, no matter how deep
So <div><p><a> would still apply

Sibling:
div + a
The <a> tag right after the <div> tag

Anything after:
div ~ a
After the <div> tag, affects all <a> tags on the same level
So if the tags are:
<a> <div> <a> <p> <a>
Both <a> tags after <div> are affected
Note this doesn't account for children
So 
<div> 

<p>
    <a>
</p>

means the <a> isn't affected

And:
div, a
<div> and <a>
*/

footer.footer p.smallText{
    color: white;
}

a.header-link {
    display: flex;
    align-items: center;
    h1 {
        margin: 0;
    }

    img{
        max-height: 64px;
        min-height: 16px;
    }
}

/* Make sure header isn't too small*/
@media (max-width: 1200px){
    .container .navbar-brand{
        height: auto;
        max-height: 100px;
    }
}

legend.section-title{
    padding-left: 1rem;
    border-style: none;
}