* {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
}

#container {
    scroll-snap-type: y mandatory;
    overflow-y: scroll;
    height: 100vh;
}

#container .main {
    height: 100vh;
    /* Center the text vertically and horizontally in the div */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    font-size: 100px;

    /* Add the colorful glowing effect with a vibrant gradient background */
    background-image: -webkit-linear-gradient(left, #ffcc00, #00ff00 10%, #35c7fb 20%, #8E2DE2 40%, #4A00E0 50%, #8E2DE270 60%, #35c7fb 80%, #00ff00 90%, #ffcc00);
    background-size: 200% 100%;
    -webkit-text-fill-color: transparent;
    -webkit-background-clip: text;
    background-clip: text;
    animation: text-glow 5s linear infinite;
    scroll-snap-align: start;
}

#container #app {
    /* Center the text vertically and horizontally in the div */
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    scroll-snap-align: start;
}

#switcher {
    display: flex;
    justify-content: center;
}


@keyframes text-glow {

    0% {
        background-position: 0 0
    }

    to {
        background-position: 200% 0
    }
}