/* RESPONSIVE DESIGN, MOBILE */

@media only all and (max-width:700px){
    /* ------------- Order ------------- */
    .blinkies.one           { order: 0; }
    .main                   { order: 1; }
    .articles               { order: 2; }
    .chat-webrings          { order: 3; }
    .verticalscroll         { order: 4; }

    /* -------- Display changes ---------- */
    .blinkies.two           { display: none;  }
    .verticalscroll         { display: flex;  }
    .scroll_below-clip-box  { display: block; }

    .navbar.bot > .about, .navbar.bot > .logo, .navbar.bot > .lang-picker { display: none; }

    /* Decoration */

    #try_hovering--blinkie  { display: none;     }
    #try_tapping--blinkie   { display: block; }

    /* ------------- Layout ------------- */

    .primary {
        width:              calc(100% - var(--scrolls-height) - var(--gap) * 2);
        height:             fit-content;
        flex-direction:     column;
        padding-right:      0;}

        .primary > * {
            width:              100%;}

            .main {
                height:             fit-content;
                flex-grow:          1;
                flex-basis:         auto;}
        
    .verticalscroll {
        position:           fixed;
        right:              0; /* There is a slight inconsistency with this, as scrollbar width isn't considered with fixed, but the blank version does contemplate, creating a gap wider than expected */
        margin:             var(--gap);
        justify-content:    center;
        height:             calc(100% - var(--mobile-botnavbar-height) - var(--mobile-topnavbar-height) - var(--gap) * 2);
        width:              var(--scrolls-height);
        overflow:           hidden;}

    .verticalscroll.blank {
        height:             100%;
        position:           relative;
        opacity:            0;}
        
        .vertical-scroll-wrapper {
            height:             fit-content;}

            .verticalscroll .clip-box {
                position:           absolute;
                top:                0;
                left:               0; 
                right:              0;
                bottom:             0;
                height:             fit-content;
                display:            flex;
                justify-content:    center;}

            .verticalscroll .auto-scroll{
                display:            flex;
                flex-direction:     column;}

            .verticalscroll p {
                writing-mode:       vertical-lr;
                text-orientation:   sideways;
                text-wrap:          nowrap;}

        .webrings {
            gap:                var(--blinkies-gap);
            height:             var(--webrings-mobile-height);
            flex-shrink:        0;
            padding-top:        0;
            padding-bottom:     0;}

            .webrings .clip-box {
                align-content:      center;}

            .webrings .auto-scroll {
                flex-direction:     row;
                animation-name:     scroll-webring-mobile;}

                .webrings .scroll_one, .webrings .scroll_two {
                    flex-direction:     row;}

                .webrings .auto-scroll > * > div img {
                    height: 60px;
                    width: auto;}

    .scroll_below-clip-box {
        position:           absolute;
        bottom:             0;
        top:                50px;
        width:              100%;
        height:             100%;
        pointer-events:     none;
        clip-path:          border-box;}

        .scroll_below {
            position:           fixed;
            left:               0px;
            bottom:             var(--mobile-botnavbar-height);
            margin-bottom:      0px;
            height:             fit-content;
            width:              fit-content;
            padding-left:       1em;
            padding-right:      1em;
            text-align:         center;}

    /* ----------- Animation ----------- */
    
    /* Blinkies */
    .blinkies.one .auto-scroll {
        animation-duration:     20s;
        animation-direction:    reverse;}

    /* Webrings */
    .webrings .clip-box {
        height:                 100%;
        width:                  100%;}

    @keyframes scroll-webring-mobile {
        from                    {transform: translateX(calc(-50%));}
        to                      {transform: translateX(0%);}}

    /* Vertical scroll text */
    .verticalscroll .auto-scroll {
        animation-name:             scroll-vertical;
        animation-direction:        reverse;
        animation-duration:         20s;}

    @keyframes scroll-vertical {
        from                        {transform: translateY(calc(-50%));}
        to                          {transform: translateY(0%);}}

    /* Opacity enhancements */
    .webrings .clip-box{
    mask-image:             linear-gradient(to right, 
                                            rgba(0,0,0,0) 0%, 
                                            rgba(0,0,0,1) 5%, 
                                            rgba(0,0,0,1) 95%, 
                                            rgba(0,0,0,0) 100%);}
}