html{
    font-size:18px;
    font-family: 'Cabin', sans-serif;
}

h1, h2, h3, p{
    color:#FEFCD7;
}

body{
    margin:0;
    padding:0;
    background-color:#03254C;
}

#particles-js{
    width:100%;
    height:100%;
    z-index:-1;
    position:fixed;
}

.main-header{
    display:flex;
    flex-direction:column;
    justify-content:center;
    text-align:center;
    height:calc(100vh - 309px);
}

.main-header h1, .main-header h2{
    color:#FEFCD7;
}

.main-header h1{
    margin-top:100px;
    margin-bottom:0px;
}

.cityskyline{
    height:309px;
    background-image:url("./public/citySkyline.png");
    background-repeat:repeat-x;
    animation:passingby;
    animation-duration:10s;
    animation-iteration-count:infinite;
    animation-timing-function:linear;
}

@keyframes passingby{
    0% {background-position:0px;}
    100% {background-position:-1452px;}
}

.main-body{
    background-color:black;
}

.container{
    width:80%;
    margin:auto;
}

.profile{
    display:flex;
    flex-wrap: wrap;
    align-items:center;
    padding-top:20px;
    padding-bottom:20px;
}

.headshot {
    margin: auto;
}

.headshot img{
    width: 250px;
}

.description{
    max-width: auto;
    line-height: 1.5em;
}

.contact-info{
    display:flex;
    align-items:center;
}

.contact-info h3{
    font-weight:bold;
    font-size:smaller;
    color:#8b8a72;
    margin-top:0;
}

.contact-info a{
    color:#8b8a72;
    text-decoration:none;
    transition-property:color;
    transition-duration:500ms;
}

.contact-info a:hover{
    color:#FEFCD7;
}

.projects{
    display: flex;
    flex-direction: column;
    gap: 40px;
    padding-bottom: 40px;
}

.project {
    display:flex;
    align-items: center;
    flex-wrap: wrap;
}

.project-img{
    max-width: 50%;
    min-width: 350px;
}

.caveskyline{
    display:flex;
    justify-content:center;
    align-items:center;
    height:175px;
    background-image:url("./public/cave.png");
    background-repeat:repeat-x;
}

.icon{
    height:50px;
    width:50px;
    border-radius:100%;
    padding:10px;
}

.bouncing{
    animation:bounce;
    animation-duration:1s;
    animation-iteration-count:infinite;
    animation-delay:1s;
}

@keyframes bounce{
    0% {margin-bottom:0px;}
    50% {margin-bottom:10px;}
    100% {margin-bottom:0px;}
}

#github{
    animation-delay:333ms;
}

#linkedin{
    animation-delay:666ms;
}

#resume{
    animation-delay:999ms;
}

.contact h2{
    margin-bottom:0;
    padding-bottom:20px;
}

.main-footer{
    background-color:black;
    text-align:center;
    color:white;
}

@media screen and (min-width: 800px) {
    .profile, .project {
        flex-wrap: nowrap;
    }

    .description {
        margin-left: 20px;
    }

    .project-desc {
        margin-left: 20px;
    }
}