/* Base design */

/* ---------------- Variables ---------------- */

html {
    --chat-gap:                     1em;
    --updates-gap:                  1em;
    --blinkies-gap:                 1em;
    --blinkies-height:              40px;
    --scrolls-height:               50px;
    --secondary-width:              200px;
    --webrings-heigth:              200px;
    --webrings-mobile-height:       100px;
    --title-height:                 3em;
}


/* --------- Display changes ---------------- */

.verticalscroll, .scroll_below-clip-box, #try_tapping--blinkie, #try_hovering--blinkie { display: none; }

/* --------- Hierarchical layout --------- */

.blinkies {
    padding-top:            0;
    padding-bottom:         0;
    gap:                    var(--blinkies-gap);
    width:                  100%;
    height:                 var(--blinkies-height);
    flex-grow:              0;
    align-content:          center;}

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

        .scroll_one, .scroll_two {
            display:                flex;
            gap:                    var(--blinkies-gap);}

            .blinkies img { height: 30px; }

.content {
    overflow-y:         auto;
    overflow-x:         hidden;}

.articles, .chat-webrings { width: var(--secondary-width); }

.articles { flex-grow: 0; }

    .articles .content {
        display:            flex;
        flex-direction:     column;
        gap:                calc(var(--gap) / 2);
    }

.main { 
    display:            flex;
    flex-direction:     column;
    flex:               1;
    gap:                var(--gap);}

    .updates { 
        flex-grow:          1;
        overflow-y:         auto;
        flex-basis:         30%;
        flex-shrink:        0;}

        .updates .update {
            display:                grid;
            grid-template-columns:  fit-content 1fr;
            grid-template-rows:     fit-content 1fr;
            gap:                    var(--updates-gap);}

            .update .title {
                /* Grid placement */
                grid-column-start:      2;
                grid-column-end:        3;
                grid-row-start:         1;
                grid-row-end:           2;

                text-align:             center;
                margin-bottom:          0;}
            
            .update .date {
                /* Grid placement */
                grid-column-start:      1;
                grid-column-end:        2;
                grid-row-start:         1;
                grid-row-end:           3;

                writing-mode:           sideways-lr;}

            .update .content {
                /* Grid placement */
                grid-column-start:      2;
                grid-column-end:        3;
                grid-row-start:         2;
                grid-row-end:           3;

                text-align:             justify;}

    .provided {
        position:           relative;   
        flex-grow:          1;
        overflow-y:         auto;
        overflow-x:         hidden;}

        .provided .content {
            display:            flex;
            flex-direction:     column;
            gap:                calc(var(--gap) / 4);
            overflow-y: auto;}

        .services-hint {
            /* Internal layout and positioning */
            display:                    flex;
            align-items:                center;
            justify-content:            center;
            gap:                        calc(var(--gap) / 3);
            background-color:           var(--hint-background);}

            .services-hint p {
                flex-grow:                  0;
                vertical-align:             center;
                padding-left:               calc(var(--gap) / 3);
                border-left:                2px solid red;
            }

            .services-hint img {
                height: 32px;
                flex-grow:                  0;
                flex-shrink:                0;
                margin-right:              calc(var(--gap) / 3);}

        .services {
            display:            flex;
            gap:                var(--gap);
            flex-wrap:          wrap;
        }

            .services > div {
                display:            flex;
                flex-direction:     column;
                flex-grow:          1;
                gap:                calc(var(--gap) / 2);
            }


.chat-webrings {
    display:            flex;
    flex-direction:     column;
    flex-grow:          0;
    flex-shrink:        0;
    gap:                inherit;}

    .chat {
        display:            flex;
        flex-direction:     column;
        flex-grow:          1;
        overflow:           hidden;}

        .chat > .content {
            flex-grow:          1;
            display:            flex;
            gap:                var(--chat-gap);
            flex-direction:     column;
            overflow:         hidden;}

            .chat-account { 
                width:              100%;
                height:             fit-content;
                display:            flex;
                flex-direction:     column;
                flex-grow:          0;
                gap:                calc(var(--gap) / 4);}

                .chat-account-inputs, .chat-account-buttons {
                    height:             auto;
                    gap:                calc(var(--gap) / 2);
                    display:            flex;
                    flex-grow:          0;
                    width:              100%;}

                .chat-account input, .chat-account button {
                    height:             fit-content;
                    width:              50%;}      

                .chat-history {
                    display:            flex;
                    flex-direction:     column;
                    padding-top:        calc(var(--gap) / 2);
                    padding-bottom:     calc(var(--gap) / 2);
                    gap:                calc(var(--gap) / 2);
                    width:              100%;
                    flex-grow:          1;
                    overflow-y:         auto;}
                    
                    .message > .date_sent { margin: 0;}

                .chat-input {
                    width:          100%;
                    flex-grow:      0;}
                    
                    .chat-input input { width: 100%; }
    
    .webrings {
        display:            flex;
        gap:                var(--blinkies-gap);
        height:             var(--webrings-heigth);
        flex-grow:          0;
        justify-content:    center;}

        .webrings .auto-scroll {
            width:              100%;
            display:            flex;
            flex-direction:     column;}

            .webrings .scroll_one, .webrings .scroll_two {
                display:            flex;
                flex-direction:     column;
                gap:                var(--blinkies-gap);}
    
        .webrings .auto-scroll > * img {
            width: 100%;
        }


/* ----------- Animation ------------- */

/* Personalized marquee, did my thing 
because I didn't quite get what the owner 
of https://minx98.neocities.org/ was doing, 
got the idea to use two separate divs and 
transform them, not sure how the original
owner clipped them though               */

/* Global */
.auto-scroll { width: fit-content; }
.auto-scroll:hover { animation-play-state: paused !important; }
.clip-box { overflow: hidden; }

.auto-scroll {
    animation-duration:             10s;
    animation-timing-function:      linear;
    animation-delay:                0s;
    animation-iteration-count:      infinite;
    animation-direction:            normal;
    animation-fill-mode:            none;
    animation-play-state:           running;
}

/* Blinkies */

.blinkies .clip-box { clip-path: content-box; }

    .blinkies .auto-scroll {
        animation-name:             scroll_blinkies;
        animation-duration:         20s;}

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

/* Second blinkie */

.blinkies.two .auto-scroll { animation-direction: reverse; }

/* Webrings */

.webrings .clip-box { 
    clip-path:                      content-box;
    width:                          100%; }

    .webrings .auto-scroll { animation-name: scroll-webring; }

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