* {
    margin    : 0;
    padding   : 0;
    box-sizing: border-box;
}

html,
body {
    height: 100%;
}

body {
    background:
        radial-gradient(at top 35% left 45%,
            #0d11286c,
            transparent 35%),
        radial-gradient(at bottom center,
            #0d112852,
            transparent 35%),
        radial-gradient(circle at top -5% left 35%,
            #0d11288a,
            transparent 25%),
        radial-gradient(circle at top 15% left 20%,
            #0d11288a,
            transparent 25%),
        radial-gradient(at top 65% left 5%,
            rgba(0, 204, 255, 0.315),
            transparent 50%),
        radial-gradient(at top 10% left 80%,
            #0d11288a,
            transparent 60%),
        radial-gradient(at top 80% left 75%,
            #0d11288a,
            transparent 40%),
        radial-gradient(circle at top 75% left 75%,
            #0d11288a,
            transparent 25%),
        radial-gradient(at top 30% left 75%,
            rgba(13, 219, 168, 0.623),
            transparent 70%);
    background-size      : cover;
    background-color     : #0D1128;
    display              : flex;
    flex-direction       : column;
    min-height           : 100vh;
    background-repeat    : no-repeat;
    background-attachment: fixed;
}

.content {
    margin: auto;
}

h1.title {
    font-family: "Circular", "Helvetica", sans-serif;
    color      : #f1f2f6;
    text-align : center;
    font-size  : 4em;
    margin     : 1em auto 0.7em;
    line-height: 1em;
    width      : 8.5em;
}

.styled_separator {
    width     : 35%;
    height    : 0.3em;
    background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, #a7afbda2 50%, rgba(0, 0, 0, 0) 100%);
    margin    : 0em auto 2em;
}

.boxes {
    display        : flex;
    flex-wrap      : wrap;
    flex-direction : row;
    justify-content: center;
    text-align     : center;
}

.feature {
    font-family      : "Circular", sans-serif;
    font-size        : 1.4em;
    color            : #f1f2f6ed;
    width            : 17em;
    margin           : 2em 2em;
    opacity          : 0.0;
    animation        : fadeIn forwards 0.8s;
    -webkit-animation: fadeIn forwards 0.8s;
}

.feature_content {
    font-family: "BrownRegular", sans-serif;
    font-size  : 0.85em;
    color      : #a4b0bed5;
    margin-top : 1em;
}

hr.blurred {
    border: 1px solid #57606f;
}

footer {
    opacity        : 0.75;
    border-top     : 1px solid #57606f77;
    font-family    : "BrownRegular", sans-serif;
    font-size      : 1em;
    color          : #a4b0be;
    display        : flex;
    justify-content: space-between;
    margin-top     : auto;
}

.footer_element {
    margin: 2em 4em;
}

/* Animations */
@keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}

@-webkit-keyframes fadeIn {
    0% {
        opacity: 0;
    }

    100% {
        opacity: 1;
    }
}