:root {
    --primary-color: #fff;
    --secondary-color: #1a0c0c;
    --background: rgb(56, 56, 56);
    color: #fff;
}


header {
    padding: 1em;
}

main {
    z-index: 2;
}

footer {
    z-index: 2;
}

.overlay {
    position:absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    background-color:var(--secondary-color);
    opacity: 0.5;
    height: 100%;
    z-index: 0;
}


.landing {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://picsum.photos/id/999/1920/1080/?blur);
    width: 100%;
    height: 100vh;
    background-size: cover;
}


.about {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://picsum.photos/id/916/1920/1080/?blur);
    width: 100%;
    height: 100vh;
    background-size: cover;
}

.projects {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://picsum.photos/id/961/2560/1440/?blur);
    width: 100%;
    height: 900px;
    background-size: cover;
}

.contact {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://picsum.photos/id/921/1920/1080/?blur);
    width: 100%;
    height: 360;
    background-size: cover;
    position: relative;
    bottom: 0;
}

.illustrations {
    background-image: linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.5)), url(https://picsum.photos/id/980/2560/1440/?blur);
    width: 100%;
    height: 100vh;
    background-size: cover;
}

.illustrationspadding {
    padding-top: 100px;
}

.padding {
    padding-top: 150px;
}

.landpadding {
    padding-top: 300px;
}

a {
    text-decoration: none;
    color: var(--primary-color);
}

.headshot{
    border-radius: 50%;
}

.projectimg {
    height: 250px;
    padding: 0rem 1rem;
}