* {
    margin: 0;
    padding: 0;
}

body {
    width: 100%;
    height: 100vh;
    margin: 0;
    font-family: "Roboto Mono", monospace;
    background-image: url('../images/img-01.png');
    background-repeat: repeat;
    background-size: 18%;
    background-position: 20%;
    background-attachment: fixed;
}

body::-webkit-scrollbar {
    width: 0;
}

img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}

h1 {
    font-size: 3.5rem;
    text-transform: uppercase;
}

h2 {
    font-size: 2.1rem;
    text-transform: uppercase;
}

h3 {
    font-size: 1.3rem;
}

h4 {
    font-size: 1.3rem;
    text-transform: uppercase;
    margin: 25px 0;
}

h5 {
    font-size: 1.1rem;
}

ul {
    padding-left: 25px;
}

li {
    margin: 10px 0;
}

i {
    color: #000000;
    font-size: 1.8rem;
}

a {
    font-size: 1.125rem;
    color: #525252;
}

p,
li {
    font-size: 1.325rem;
    color: #525252;
}

a,
a:link,
a:visited,
a:active {
    color: #525252;
}

a:focus {
    outline: 0 none;
    border: 0 none;
}

#page {
    width: 100%;
    height: 100%;
    display: block;
    margin: 0 auto;    
}

#header,
#main,
#footer {
    width: 100%;
    height: auto;
    display: block;
}

.content {
    width: 100%;
    height: auto;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
}

.two-column {
    width: 50%;
    height: auto;
    display: block;
}

#primary-image {
    height: 100vh;
    object-position: center;
}

.header-title,
.two-column p,
.margin-column {
    margin: 180px 80px 20px 80px;
}

.two-column p,
.two-column ul {
    margin: 20px 80px 20px 80px;
}

.header-title {
    float: right;
    text-align: right;
}

.color-one-column {
    background-color: #85f6d0db;
}

.color-two-column {
    background-color: #ffffff;
}

.one-column-item {
    width: 100%;
    height: auto;
    display: block;
}

.two-column-item {
    width: 50%;
    height: auto;
    display: block;
}

.one-column-item a {
    margin-top: 20px;
    float: right;
}

.react-image {    
    margin: 180px 80px 20px 80px;
}

.react-image i {
    margin-bottom: 5px;
    margin-right: 2.5px;
    font-size: 0.94rem;
}

#content-0 i {
    margin-top: 50px;
    font-size: 2.8rem;
}

#footer .two-column {
    padding-bottom: 150px;
}


@media(max-width: 992px) {    
    .content {
        flex-direction: column;
    }

    .content-mobile {
        flex-direction: row;
    }

    .two-column {
        width: 100%;
    }

    #content-0 i {
        display: none;
    }

    .header-title,
    .header-description {
        text-align: center;
    }

    .header-title {
        float: none;
    }

    .header-title,
    .header-description {
        margin: 80px 25px;
    }

    .margin-column {
        margin: 80px 25px;
    }
    
    .two-column p,
    .two-column ul {
        margin: 20px 25px 80px 25px;
    }

    .react-image {
        margin-top: 80px;
        margin: 25px;
        text-align: center;
    }

    .two-column p {
        text-align: center;
    }

    #footer .two-column {
        padding-bottom: 25px;
    }
}


@media(max-width: 567px) {
    h1 {
        font-size: 2.5rem;
    }

    #primary-image {
        height: 50vh;
    }
}