html body {
    background-color: #202020;
    height: 100%;
    width: 100%;
}

.box.heading {
    display: flex;
    align-items: flex-start;
    flex-direction: row;
}

.box.home {
    display: flex;
    align-items: flex-start;
    flex-direction: column;
    flex-wrap: wrap;
    margin-bottom: auto;
}

.box.social {
    display: flex;
    align-items: flex-start;
    flex-direction: row-reverse;
    top: 50%;
    left: 50%;
    margin: 0 -1em
}

.item {
    margin: 0 0.5em;
}

.item.image {
    margin-left: 86%;
    margin-top: -1.5%;
    height: 12%;
    width: 12%;
}

.box.icons {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -9%;
    margin-left: -46%;
    display: flex;
    align-items: flex-start;
    flex-direction: row;
}

.box.flow {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 80%;
}

.flex-gap > div {
    margin: 1em;
}

div.introduction {
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -17%;
    margin-left: -46%;
    font-family: Consolas, sans-serif;
}

p.opening {
    color: white;
    font-family: Consolas, monaco, monospace;
    font-size: 170%;;
    font-weight: bold;
    line-height: 200%;
    float: left;
}

p.description {
    position: relative;
    top: -1em;
    color: white;
    font-family: Consolas, monaco, monospace;
    font-size: 0.95vw;
    line-height: 1.45em;
}

p.about_me_usaco {
    position: absolute;
    margin-bottom: 1vw;
    color: white;
    font-family: Consolas, monaco, monospace;
    left: 2em;
    font-size: 2.35vw;
    font-weight: bold;
    line-height: 1.45em;
}

p.about_me_languages {
    position: relative;
    color: white;
    font-family: Consolas, monaco, monospace;
    left: 1em;
    font-size: 0.98vw;
    font-weight: bold;
    line-height: 1.45em;
}

p.scroll_down {
    color: white;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: 3.125em;
    margin-left: -43em;
    font-family: Consolas, monaco, monospace;
    font-size: 0.83vw;
    font-weight: bold;
    line-height: 1.5625em;
}

div.my_projects {
    color: white;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: 31.25em;
    margin-left: -18.75em;
    font-family: Consolas, sans-serif;
}

span.arrow_down {
    color: white;
    position: fixed;
    top: 50%;
    left: 50%;
    margin-top: -7.8em;
    margin-left: -8.25em;
    width: 3.125em;
    font-size: 4.15vw;
    line-height: 18.75em;
    animation: up-down 1s infinite alternate;
}

div.horizontal-line {
    background-color: dimgray;
    height: 0.1em;
}

div.vertical-line {
    width: 0.1em;
    background-color: dimgray;
    height: 100%;
    float: left;
}

@keyframes up-down {
    from {
        transform: translateY(0);
    }
    to {
        transform: translateY(1em);
    }
}