@import url('https://fonts.googleapis.com/css2?family=Roboto:wght@100&display=swap');

body {
    font-family: 'Roboto', sans-serif;
    background-color: #25252a;
    width: 100%;
    height: 100vh;
    overflow-y: hidden;
}

*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'poppins', sans-serif;
}

a {
    margin-bottom: 35%;
}

.banner{
    position: relative;
    background-size: cover;
    background-position: bottom;
    display: flex;
    width: 100%;
    height: 100vh;
    justify-content: center;
    align-items: center;
}
.banner #text{
 position: relative;
 font-size: 12em;
 color: white;
}
.banner .cloud{
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
    pointer-events: none;
}
.banner .cloud img{
    position: absolute;
    bottom: 0;
    max-width: 100%;
    animation: animate calc(3s*var(--i)) linear infinite;
}

section{
    position: relative;
    padding: 75px 100px;
}
section h2{
    position: relative;
    font-size: 2.5em;
    margin-bottom: 20px;
}
.logo{
    font-size: 2.5em;
    margin-bottom: 20px;
}

@keyframes animate{
    0%{
        opacity: 0;
        transform: scale(1);
    }
    25%,75%
    {
        opacity: 1;
    }
    100%
    {
        opacity: 0;
        transform: scale(3);
    }
}