.centered{
    text-align: center;
}

@keyframes slideIn {
    from{
        transform: translateY(100vh);
    }
    to{
        transform: translateY(0);
    }
}

@keyframes bubbli {
    0%{
        transform: translate(0,100vh);
        opacity: 0;
    }
    10%{
        transform: translate(10px, 90vh);
    }
    20%{
        transform: translate(-10px, 80vh);
        opacity: 100;
    }
    30%{
        transform: translate(10px, 70vh);
    }
    40%{
        transform: translate(-10px, 60vh);
    }
    50%{
        transform: translate(10px, 50vh);
    }
    60%{
        transform: translate(-10px, 40vh);
    }
    70%{
        transform: translate(10px, 30vh);
    }
    80%{
        transform: translate(-10px, 20vh);
    }
    90%{
        transform: translate(10px, 10vh);
        opacity: 100;
    }
    100%{
        transform: translate(0,0);
    }
}

body{
    background-color: black;
    font-family: 'Orbitron', sans-serif;
    max-height: 100vh;
    overflow-y: hidden;
}

.Logo{
    font-family: "Righteous", cursive;
    font-size: 6rem;
    color: aqua;
}

.wrapper{
    display: flex;
    justify-content: center;
    margin: 0 auto;
}

.side{
    display: flex;
    margin: 0 auto;
    width: 10vw;
}

.content{
    color: antiquewhite;
    margin-top: 10%;
    align-content: center;
    animation: slideIn 2s ;
}

.bubble{
    opacity: 0;
    width: 30px;
    animation: bubbli 6s linear 0s infinite;
}

.b1{
    animation-delay: 2s;
}

.b2{
    animation-delay: 4s;
}

.b3{
    animation-delay: 6s;
}