/**
 * Project specific stylesheet
 * 2019-06-09/urs
 */
#header h1 {
    padding: 0.5em;
}

#header #nav {
    padding: 2em 0;
}

#footer .container {
    display: flex;
    flex-direction: row;
    justify-content: center;
}

#footer .container ul {
    padding: 1em 0;
    list-style: none;
    display: block;
    margin-right: 2em;
}

#footer .container ul h4 {
    margin: 0;
}

#footer .container ul li {
    padding: 0;
    list-style: none;
}

#footer .container ul li,
#footer .container ul li a {
    font-size: 1rem;
}

@media (min-width: 768px) {
    #header h1 {
        font-size: 2.5rem;
        letter-spacing: 2px;
    }

    #header h1 a {
        #color: gold;
    }

    body.home > #header {
        height: 28vh;
        background-image: url('../image/home_visual.jpg');
        background-size: cover;
    }

    body.home > #header h1,
    body.home #nav a {
        text-shadow: 2px 2px 4px black;
    }


    body.home > #header h1 a {
        transition: all 0.2s ease-in;
    }

    body.home > #header h1 a:hover {
        /*font-size: 2.54rem;*/
        color: #8dc92d;
        /*transition: font-size 0.2s ease-out;*/
        transition: all 0.2s ease-out;
    }

    body.home #nav .active a,
    body.home #nav a:hover,
    body.home #nav-toggle:hover {
        transform-origin: center center;
        transform: scale(1.1);
        border-bottom: 4px #a33 solid;
    }

    h1, h2, h3 {
        font-family: 'Ribeye', cursive;
    }

    p, strong, li {
        font-family: 'Nunito Sans', sans-serif;
        font-weight: 400;
    }

    p.info {
        font-style: italic;
    }

    p.intro {
        font-size: 1.3rem;
    }

    strong {
        font-weight: 700;
    }

    ul.col-2 > * {
        width: calc(50% - 3em);
    }

}

body.home #main {
    padding: 2em 0.4em;
}

ul.col {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
    padding-left: 0;
}

ul.col > * {
    margin-bottom: 1em;
}

li.listitem {
    display: flex;
}

li.listitem > img,
li.listitem > div.thumbnail {
    width: 5em;
    height: 5em;
    margin-right: 1em;
}

li.listitem > div.thumbnail {
    background-size: cover;
}

li.listitem .itemcontent {
    width: 100%;
}

@media screen and (max-width: 600px) {
    #footer .container {
        display: block;
    }
}