body, html {
    margin: 0;
}

body {
    display: flex;
    flex-direction: column;
}

.navigation {
    position: fixed;
    display: flex;
    flex-direction: row;
    background: url("images/blackTexture.png");
    margin: 0;

    align-items: center;

    width: 100%;
}

#navigation-header {
    font-family: sans-serif;
    color: white;
    margin: 0 0 0 5vw;
    text-decoration: none;
}

#navigation-list {
    list-style: none;
    margin: 0 0 0 15vw;
}

.navigation-list-item {
    display: inline;

    padding: 1.4vh;
}

.link {
    text-decoration: none;
    color: white;
    font-family: sans-serif;

    padding: 1.4vh 1vw;
}

#home:hover, #about-me:hover, #skills:hover, #contact-me:hover, #copyright:hover {
    background: white;
    color: black;
}

.info-bar {
    background: url("images/blackTexture.png");
    height: 60vh;
    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;
}

#info-bar-header {
    font-family: sans-serif;
    color: white;
    font-size: 6em;
}

#info-bar-text {
    font-family: sans-serif;
    color: white;
}

.icons {
    width: 2vw;
    margin: 1vh 0.5vw;
}

.main-bar {
    height: 210vh;
    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

}

.main-bar-box {
    width: 50vw;
    height: 200vh;

}

#john-doe {
    float: right;
    width: 17vw;
    margin: 0 0 2em 2em;
}

#about-me-header {
    font-family: sans-serif;
    margin-top: 2em;
}

#about-me-text {
    font-family: sans-serif;
    line-height: 1.5em;
    margin: 3em 0 0 0;
}

#coding-image {
    float: left;
    margin: 0 2em 2em 0;
    width: 20vw;
}

#coding-header {
    font-family: sans-serif;
    text-align: center;
    margin-top: 8em;

}
#coding-text {
    font-family: sans-serif;
    line-height: 1.5em;
    text-align: center;
}

#skills-header {
    font-family: sans-serif;
    margin-top: 2em;
}

#skills {
    margin-top: 5em;
}

#design {
    margin-top: 20em;
}

#design-image {
    float: right;
    width: 20vw;
    margin: 0 0 2em 2em;
}

#design-header {
    font-family: sans-serif;
    margin-top: 17em;
    text-align: center;
}

#design-text {
    font-family: sans-serif;
    line-height: 1.5em;
    text-align: center;
}
.contact {
    height: 90vh;
    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;

}

.contact-box {
    width: 50vw;
    height: 60vh;
}

#contact-header {
    font-family: sans-serif;

}

.input-text {
    display: block;
    width: 50vw;
    margin: 2em 0;
}

#text-area {
    width: 50.5vw;
}

#send-button {
    margin: 3em 0 0 30em;    
    background: white;
    border: 2px solid black;
    color: black;
    width: 5vw;
    height: 4vh;
    border-radius: 20px;
}

#send-button:hover {
    margin: 3em 0 0 30em;    
    background: black;
    border: 2px solid black;
    color: white;
    width: 5vw;
    height: 4vh;
    border-radius: 20px;

}
.footer {
    height: 20vh;
    background: url("images/blackTexture.png");
    color: white;
    font-family: sans-serif;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}