body {
    background-color: #0c0c0c !important;
}

#homepage-container {
    background: radial-gradient(circle at -10% -120%, #059379, #07685c, #06403b, #031919, #0c0c0c, #0c0c0c, #0c0c0c, #0c0c0c) !important;
}

.about-header {
    width: 100%;
    font-family: Oswald, sans-serif;
    color: white;
    display: flex;
    justify-content: space-around;
    padding: 2em 4em;
    position: relative;
}

.about-header>div {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: space-evenly;
    position: relative;
}

.about-header:nth-of-type(1)>div:nth-child(2) {
    align-items: end;
}

.about-header:nth-of-type(2)>div:nth-child(1) {
    align-items: start;
}

.about-header:nth-of-type(2)>div:nth-child(2) {
    text-align: right;
}

.about-header>div>h1 {
    font-size: 3em;
    width: 100%;
    margin-bottom: 0.5em;
}

.about-header:nth-of-type(1)>div:nth-child(1)>h1>div {
    width: 0.7em;
    height: 0.05em;
    position: absolute;
    bottom: 0em;
    left: 2.8em;
    background-color: rgb(255, 0, 153);
    animation: underline-animation-1 2s infinite;
}

.about-header:nth-of-type(2)>div:nth-child(2)>h1>div {
    width: 0.7em;
    height: 0.05em;
    position: absolute;
    bottom: 0em;
    right: 0em;
    background-color: rgb(255, 0, 153);
    animation: underline-animation-2 2s infinite;
}

.about-header>div>p {
    font-size: 0.7em;
    color: rgb(203, 203, 203);
}

.about-img {
    width: 15em;
    height: 15em;
}

hr {
    width: 70%;
    margin: 2em 0 2em 15%;
    border: solid 2px #059379;
}

@keyframes underline-animation-1 {
    0% {
        left: 2.8em;
        width: 0em;
    }

    30% {
        left: 2.8em;
        width: 0.7em;
    }

    70% {
        left: 0;
        width: 0.7em;
    }

    100% {
        left: 0;
        width: 0em;
    }
}

@keyframes underline-animation-2 {
    0% {
        right: 0em;
        width: 0em;
    }

    30% {
        right: 0em;
        width: 0.7em;
    }

    70% {
        right: 3.6em;
        width: 0.7em;
    }

    100% {
        right: 4.05em;
        width: 0em;
    }
}

@keyframes underline-animation-3 {
    0% {
        right: 0em;
        width: 0em;
    }

    30% {
        right: 0em;
        width: 0.7em;
    }

    70% {
        right: 2.2em;
        width: 0.7em;
    }

    100% {
        right: 2.6em;
        width: 0em;
    }
}

@media screen and (max-width: 900px) {
    .about-img {
        font-size: 0.9em;
    }
}

@media screen and (max-width: 800px) {
    .about-img {
        font-size: 0.8em;
    }
}

@media screen and (max-width: 500px) {
    .about-img {
        width: 13em;
        height: 13em;
    }

    .about-header {
        padding: 2em 2em;
        margin: 10% 0 15% 0;
    }

    footer {
        position: fixed;
        bottom: 0;
        left: 0;
        z-index: 100;
    }

    .about-header:nth-of-type(2)>div:nth-child(2)>h1>div {
        animation: underline-animation-3 2s infinite;
    }
}