/* general */

* {
    box-sizing: border-box;
}

body {
    background-color: #181818;
    color: #333333;
    margin: 0;
    font-family: 'Lato', sans-serif;
    text-align: center;
}

@media print {
    body {
        -webkit-print-color-adjust: exact;
        print-color-adjust: exact;
    }
}


.main {
    background-color: #000000;
    margin: 0 auto 0;
    padding: 0;
    max-width: 90em;
}

a {
    text-decoration: none;
    color: #ffffff;
}

p, h1, h2, h3, h4, h5, h6 {
    margin: 0;
    padding: 0;
    font-weight: lighter;
}

img {
    width: 100%;
    vertical-align: middle;
}

video {
    width: 100%;
    height: auto;
    padding: 2em 7%;
    margin: 0;
}

@media only screen and (max-width: 48em) {
    video {
        padding: 2em 0;
    }
}

/* navbar */

.navbar {
    display: flex;
    list-style-type: none;
    width: 100%;
    margin: 0 auto;
    padding: 0;
    background-color: #000000;
    max-width: 90em;
    border-bottom: 1px solid #4050ff;
}

.navbar a {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 8em;
    height: 3em;
    font-size: 1.2em;
    z-index: 1;
}

.navbar a:hover {
    background-color: #4050ff;
    color: #000000;
    transition: 0.5s;
}

@media only screen and (max-width: 40em) {
    .navbar {
        flex-direction: column;
    }
}

/* intro */

.intro {
    padding: 4em 6%;
    background-color: #ffffff;
}

.name {
    font-size: 2em;
    padding-bottom: 0.4em;
}

.title {
    font-size: 1.1em;
    padding-bottom: 1.2em;
}

.introtext {
    color: #666666;
    padding: 0.8em 0;
    font-size: 1.1em;
    line-height: 1.7;
    text-align: left;
    letter-spacing: 0.02em;
}

.intro a { /* GET IN TOUCH BUTTON */
    text-decoration: none;
    color: #666666;
    border: 2px solid #666666;
    font-size: 1.3em;
    padding: 0.7em 1em;
    display: inline-block;
    margin-top: 2em;
    font-family: 'Open Sans', sans-serif;
}

.intro a:hover {
    color: #ffffff;
    background-color: #666666;
    transition: 0.5s;
}

/* section dividers */

.sectiondivider {
    background-color: #000000;
    color: #ffffff;
    padding: 5em 7%;
}

.sectiondivider h1 { /* SECTION TITLE */
    font-size: 1.8em;
    padding-bottom: 0.7em;
    letter-spacing: 0.02em;
}

.sectiondivider h2 { /* SECTION SUBTITLE */
    font-size: 1.2em;
    letter-spacing: 0.017em;
    font-style: italic;
}

/* projects */

.project {
    padding: 4em 7%;
}

.project h3 { /* PROJECT TITLE */
    font-size: 1.6em;
    letter-spacing: 0.02em;
    padding-bottom: 0.25em;
    color: #4050ff;
}

.project h4 { /* PROJECT SUBTITLE */
    font-size: 1.1em;
    letter-spacing: 0.017em;
    padding-bottom: 1em;
}

.project > p { /* PROJECT DESCRIPTION */
    padding: 0.8em 0;
    font-size: 1.1em;
    line-height: 1.5;
    text-align: left;
    letter-spacing: 0.02em;
}

.skillboxes {
    list-style-type: none;
    padding-top: 0.8em;
    margin: 0;
    font-size: 1em;
}

.skillboxes p {
    float: left;
    padding: 0.5em;
    margin: 0 0.5em 0.5em 0;
    border: 1px solid #4050ff;
    font-size: 1.1em;
    letter-spacing: 0.02em;
}

.rec {
    padding: 1em 2em;
    margin: 1em 10% 0;
    background-color: #99a2ff;
    color: #333333;
    font-size: 1.1em;
    text-align: left;
}

@media only screen and (max-width: 48em) {
    .rec {
        padding: 0 1em;
        margin: 1em 0 0;
    }
}

.rectext {
    padding: 1em 0 0 0;
}

.recperson {
    padding: 0.5em 0 1em 7%;
}

/* contact */

.contact {
    background-color: #000000;
    color: #d0d0d0;
}

.contact p {
    font-size: 1.2em;
    font-style: italic;
    padding: 0 7%;
    text-align: left;
}

.email {
    padding: 2em 0;
}

.contacticons {
    display: flex;
    flex-direction: row;
    justify-content: center;
    gap: 1em;
    padding: 1em 0 3em;
}

.contacticons a {
    width: 3em;
    height: 3em;
}

.contact a {
    text-decoration: underline;
    font-size: 1.8em;
}

/* project images */

.img-container {
    display: flex;
    padding: 3em 0 2em;
    row-gap: 2em;
    column-gap: 5%;
}

.img-container img {
    width: 30%;
}

.img-container-column {
    display: flex;
    padding: 3em 0 2em;
    row-gap: 2em;
    flex-direction: column;
}

.img-container-column img {
    width: 100%;
}

.westvan-large {
    display: flex;
    row-gap: 2em;
    padding-top: 3em;
}

.westvan-large img {
    width: 33.33%;
}

.westvan-small {
    display: flex;
    row-gap: 2em;
    padding-bottom: 2em;
}

.westvan-small img {
    width: 16.67%;
}

.udm-image-small {
    display: none;
}

.img-container-lowgap {
     display: flex;
     padding: 3em 0 2em;
     row-gap: 2em;
     column-gap: 2%;
}

.img-container-lowgap img {
    width: 32%;
}

@media only screen and (max-width: 48em) {
    .img-container {
        flex-direction: column;
    }
    .img-container img {
	width: 100%;
    }
    .westvan-large {
	flex-direction: column;
	padding-bottom: 2em;
    }
    .westvan-small {
	flex-direction: column;
    }
    .westvan-large img, .westvan-small img {
	width: 100%;
    }
    .udm-image-large {
	display: none;
    }
    .udm-image-small {
	display: block;
    }
    .img-container-lowgap {
	flex-direction: column;
    }
    .img-container-lowgap img {
	width: 100%;
    }
}

/* allwhite */

.allwhite {
    background-color: #ffffff;
}

/* allblack */

.allblack {
    background-color: #000000;
    color: #d0d0d0;
}

.samecolorseparator {
    background-color: #4050ff;
    width: 100%;
    height: 0.3em;
}

/* clearfix */

.clearfix::after {
    content: "";
    clear: both;
    display: table;
}

/* footer */

.footer {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #000000;
    max-width: 90em;
    height: 10em;
    border-top: 1px solid #4050ff;
    margin: 0 auto;
    row-gap: 1em;
}

.footer p {
    color: #808090;
}

.footer a {
    color: #808090;
    text-decoration: underline;
}