@media screen and (max-width: 1135px){
    html, body{
        overflow-y: auto;
    }

    .top-bar-link{
        text-align: center;
        pointer-events: all;
    }

    #mainBackground{
        top: 450px;
    }

    /*--------------footer--------------------*/
    #footer .content{
        justify-content: center;
        grid-column-gap: 2vw;
        grid-template-columns: 12vw 9vw 0vw;
        margin-top: 230px;
        padding-right: 3vw;
        margin-left: 55px;
    }


}

/* tablet */
@media screen and (max-width: 768px){
    html, body{
        overflow-y: auto;
    }
    .body{
        width: 768px;
        overflow-x: hidden;
    }

    #mainBackground{
        position: absolute; 
        min-width: 75vmax;
        min-height: 75vmax;
        top: 450px;
        left: 50%;
        transform: translate(-50%, -50%);
        background: radial-gradient(transparent,rgba(175, 222, 237, 1),rgb(255, 255, 255),transparent, transparent, transparent, transparent);
        animation: lightUp 3s cubic-bezier(0, 12, 0.6, 0.91) forwards;
    }

    @keyframes lightUp {
        0% {
        height: 0;
        width: 0;
        }
        100% {
        height: 150vmax;
        width: 150vmax;
        }
    }

    .top-bar .top-bar-link{
        text-align: center;
    }

    /* ----------------banner------------------*/

    .inner{
        top: 200px;
        right: 120px;
        left: 0px;
        width: 100%;
    }

/*--------------footer--------------------*/
    #footer .content{
        justify-content: center;
        grid-column-gap: 2vw;
        grid-template-columns: 12vw 9vw 0vw;
        margin-top: 200px;
        margin-left: 55px;
    }

    }

@media screen and (max-width: 480px){
    html, body{
        overflow-y: auto;
    }

    .top-bar span{
        padding-left: 0px;
    }
    .container .top-bar-link{
        padding-right: 0px;
    }

    .top-bar-login{
        padding-right: 0px;
    } 
    /*.inner{
        top: 200px;
        right: 120px;
        left: 0px;
        width: 100%;
        overflow-wrap: break-word;
    }*/

    #footer .content{
        margin-top: 600px;
        grid-column-gap: 10vw;
        grid-template-columns: 15vw 15vw 0vw;
        font-size: 4vmin;
    }

    #storeBannerTitle {
        font-family: 'UbuntuBold';
        font-size: 14px;
    }

    #storeBannerImage {
        border: 8px solid var(--main-color-darkblue);
        border-radius: 15px;
        max-height: 13vh;
        margin-right: 10vw;
        z-index: 1;
        align-self: center;
    }

    #storeBannerContent {
        font-size: 10px    
    }

}


@media screen and (max-width: 335px){
    #footer{
        top: 900px;
    }
}