* {
    font-family: sans-serif;
}

html {
    height: 100%;
}

body {
    height: 100%;
    margin: 0px;
    background-color: rgb(46, 46, 46);
}

h1,
h2 {
    color: lightgray;
    margin-top: 0;
}

h1 {
    font-size: 2em;
}

a {
    color: lightgray;
}

a:hover {
    color: rgba(32, 159, 227, 1);
}

section {
    height: 100%;
}

/* Section 1 */

h1 {
    text-align: center;
}

.section1 > .content {
    width: 100%;
}

.logo-container {
    display: flex;
    justify-content: center;
    background: linear-gradient(
        rgba(0, 0, 0, 0) 35%,
        rgba(32, 159, 227, 1) 35%,
        rgba(32, 159, 227, 1) 50%,
        rgba(219, 154, 57, 1) 50%,
        rgba(219, 154, 57, 1) 65%,
        rgba(0, 0, 0, 0) 65%
    );
}

.logo {
    height: 10em;
    width: 10em;
    transition: all 500ms;
    border-radius: 50%;
    border: solid 0.4em;
    border-color: rgba(32, 159, 227, 1) rgba(219, 154, 57, 1)
        rgba(219, 154, 57, 1) rgba(32, 159, 227, 1);
}

.logo:hover {
    transition: all 500ms;
    transform: scale(1.2);
}

.section1 {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.links-container {
    margin-top: 1em;
    display: flex;
    flex-direction: row;
    justify-content: center;
}

.links-container span {
    color: gray;
    margin: 0.2em;
    transition: all, 500ms;
}

.links-container span:hover {
    color: rgba(32, 159, 227, 1);
    transition: all, 500ms;
}