:root {
    font-size:16px;
    font-family: Helvetica, Arial, "Nimbus Sans L", sans-serif;

    --header-font:"Courier New","DejaVu Sans Mono",monospace;

    --page-width:970px;
    --page-margin:auto;
    --accent-color:#bbb;
    --orange:#f5ab25;
    --secondary-color:#333;
}

p {
    line-height:1.5;
}

h1,h2,h3,h4,h5,h6 {
    font-family: var(--header-font);
    font-weight:normal;
}

h3 {
    color: var(--orange);
    text-decoration: none;
    font-weight: bold;
    letter-spacing: 0.06rem;
    text-transform: uppercase;
    @media (min-width: 768px) {
        margin-top:0;
    }
}

body {
    margin:0;
}

#topnav {
    background-color: var(--secondary-color);
    padding-top:1rem;
    padding-bottom:1rem;
    .contact {
        font-size:0.8em;
        color:white;
        padding-left:2rem;
        padding-right:2rem;
        margin:var(--page-margin);
        max-width:var(--page-width);
        .orange {
            color:var(--orange);
        }
    }
}

#header {
    margin-top:1rem;
    padding-left:2rem;
    padding-right:2rem;

    .section {
        margin:var(--page-margin);
        max-width:var(--page-width);
        border-bottom:1px dashed var(--accent-color);
        padding-bottom:1rem;
    }
}

#main {
    margin:var(--page-margin);
    max-width:var(--page-width);
    padding-left:2rem;
    padding-right:2rem;
    box-sizing: content-box;
    #content {
        margin-bottom:2rem;
    }
}

#start {
    margin-top:1rem;
    margin-bottom:2rem;
    border-bottom:1px dashed var(--accent-color);
}

#references {

    .slideshow-item {
        display: flex;
        justify-content: space-between;
        flex-flow: column nowrap;
        margin-bottom:2rem;

        @media (min-width: 768px) {
            margin-bottom:4rem;
            flex-flow: row nowrap;
            &:nth-child(even) {
                .slideshow-image {
                    order:2;
                }
            }
        }



        .slideshow-image {

            @media (min-width: 768px) {
                max-width:calc(50% - 1rem);
                margin:0;
            }

            img {
                padding:3px;
                border:1px solid var(--accent-color);
                width:100%;
                height:auto;
            }

            .slideshow-image-source {
                font-size: 0.65em;
                text-transform: uppercase;
            }

        }
        .slideshow-description {
            @media (min-width: 768px) {
                max-width:calc(50% - 1rem);
                margin:0;
            }
        }
    }
}

#footer {
    background-color: var(--secondary-color);
    padding:1rem;
    color:white;
    text-align:center;
    .section {
        margin:var(--page-margin);
        max-width:var(--page-width);
    }
}