/* General */

@font-face {
    font-family: 'Barlow';
    src: url('/Barlow/Barlow-Regular.ttf') format('embedded-opentype'), /* Internet Explorer */
         url('/Barlow/Barlow-Regular.ttf') format('woff2'),             /* Super Modern Browsers */
         url('/Barlow/Barlow-Regular.ttf') format('woff'),              /* Pretty Modern Browsers */
         url('/Barlow/Barlow-Regular.ttf') format('truetype'),          /* Safari, Android, iOS */
         url('/Barlow/Barlow-Regular.ttf') format('svg');               /* Legacy iOS */
}


:root {
    background-color: black;
    color: white;
    font-family: "Barlow";
    box-sizing: border-box;
}



@media only screen and (max-width: 800px) {
    nav, main {
        width: 90%;
        border: 5px solid white;
        margin: 0 auto;
        padding: 1em;
    }

    body {
        margin-top: 2em ;
    }
}

@media only screen and (min-width: 800px) {
    nav, main {
        width: 80%;
        border: 5px solid white;
        margin: 0 auto;
        padding: 1em;
    }

    body {
        margin-top: 4em;
    }
}

@media only screen and (min-width: 1000px) {
    nav, main {
        width: 50%;
        border: 5px solid white;
        margin: 0 auto;
        padding: 1em;
    }

    body {
        margin-top: 6em
    }
}




/* Template */

nav {

    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

@media only screen and (max-width: 800px) {
    nav {
        display: flex;
        flex-direction: column;
        align-content: center;
        justify-items: center;
    }  

    nav > h1, nav > div > ul {
        text-align: center;
    }
}

nav > div > ul {
    list-style: none;
    display: flex;
    color: white;
}

.homepage-content {
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
}

.homepage-content > p{
    width: 70%;
}

.homepage-content > picture{
    width: 20%;
}

.homepage-img {
    width: 100%;
    height: auto;
    display: block;

}

/* Typography */

a {
    color: white;
    font-family: "Barlow";
    font-weight: bold;
    text-decoration: none;
    cursor: pointer;
}

a:hover {
    cursor: pointer;
}

p {
    text-align: justify;
}

p > a {
    text-decoration: underline;
    text-decoration-thickness: 2px;
}

p > picture > img {
    width: 90%;
    margin: 0 auto;
    display: block;
    height: auto;
}

.nav-link {
    margin: 0em 1em;
    color: white;
}

.nav-link:hover {
    outline: 3px solid white;
    outline-offset: 0.5em;
}

.collection-item {
    border: 5px solid white;
    margin: 0 auto;
    padding: 1em;
}

.collection-title:hover {
    text-decoration: underline;
}