@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;700;900&display=swap');

html,
body {
    font-family: 'Roboto', sans-serif;
    margin: 0;
    padding: 0;
    background-color: #020E26;
    color: #fff;
    overflow: hidden;
}

section {
    padding: 20px;
    margin: 0;
}

svg {
    max-width: 40px;
    max-height: 40px;
}

.title-container {
    max-width: 100vw;
    height: 100vh;
    position: relative;
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    transition: height 0.5s;
}

.title {
    font-size: clamp(40px, 10vw, 100px);
    line-height: 1;
    display: inline-block;
    color: #1BF28E;
    z-index: 2;
    letter-spacing: 10px;
    filter: drop-shadow(0 1px 3px);
    position: relative;
    margin: 0;
}

.title-container .description,
.title-container .links-section {
    display: inline-block;
    width: 100vw;
    color: #4D688C;
    margin-top: 20px;
}

.title-container svg {
    margin: 0 10px;
    fill: #4D688C;
    transition: fill 0.2s;
}

.title-container svg:hover {
    fill: #FFF;
}

/* -------------------------------------------------------------- */

.info-container {
    background-color: #4D688C;
    position: fixed;
    left: 0;
    bottom: -60vh;
    height: 60vh;
    width: 100%;
    text-align: center;
    display: flex;
    justify-content: center;
    align-items: center;
    transition: bottom 0.5s;
    z-index: 6;
}

.info-container:hover,
.info-container:focus {
    bottom: 0;
}

.info-container:hover ~ .title-container,
.info-container:focus ~ .title-container {
    height: 40vh;
}

.info-container .info {
    color: #020E26;
    font-size: 1.25rem;
}

@media only screen and (max-width: 1280px) {
    .info-container {
        width: auto;
        max-width: 100%;
    }
}

.info-container a {
    color: #1BF28E;
    font-weight: 500;
    text-decoration: none;
}

.info-container svg {
    position: absolute;
    top: 0;
    transition: transform 0.2s;
    transform: scaleY(-1);
}

.info-container:hover svg,
.info-container:focus svg {
    transform: scaleY(1);
}