main {
    width: 100vw;
    display: flex;
    justify-content: center;
}

article {
    max-width: 1440px;
    width: 100%;
    display: flex;
    justify-content: center;
    height: 100vh;
    margin: auto;
}

.container {
    max-width: 1200px;
    width: 100%;
    display: flex;
}

.flex-row {
    display:flex;
    flex-direction: row;
}

.flex-column {
    display:flex;
    flex-direction: column;
}

.mousey{
    width: 2px;
    padding: 4px 5px;
    height: 20px;
    border: 1px solid var(--main-blue);
    border-radius: 25px;
    opacity: 0.75;
    box-sizing: content-box;
    position: absolute;
    bottom: 20px;
    z-index: 100000;
}

.scroller {
    width: 2px;
    height: 10px;
    border-radius: 25%;
    background-color: var(--main-blue);
    animation-name: scroll;
    animation-duration: 2.2s;
    animation-timing-function: cubic-bezier(.15,.41,.69,.94);
    animation-iteration-count: infinite;
}

@keyframes scroll {
    0% { opacity: 0; }
    10% { transform: translateY(0); opacity: 1; }
    100% { transform: translateY(15px); opacity: 0;}
}


@media only screen and (max-width : 1200px) {

    article {
        max-width: 1200px;
    }

    .container {
        max-width: 1024px;
    }
}

@media only screen and (max-width : 480px) {
    .mousey{
        bottom: 100px;
    }
}