@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=Jacquard+12+Charted&family=Jacquard+24&family=Micro+5&family=PT+Sans:ital,wght@0,400;0,700;1,400;1,700&family=Quantico:ital,wght@0,400;0,700;1,400;1,700&family=Share+Tech+Mono&family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&family=VT323&display=swap');

:root{
    --color: rgb(17, 17, 17);
    --secondary-color: rgb(119, 119, 119);
    --tertiary-color: rgb(203, 203, 203);
    --background: rgb(244, 244, 242);
    --background-gradient: rgba(244, 244, 242, 0);

    --card-height:1rem;
    --card-width: auto;

    --heading-font-shadow: "Jacquard 12 Charted", system-ui;
    --heading-font: "Jacquard 24", system-ui;
    --body-font: "VT323", monospace;

    --body-copy: 1.5rem;
    --heading-copy: calc(var(--body-copy) * 1.4);
    --caption-copy: calc(var(--body-copy) * 0.8);

    --space-bar-0: 1rem;
    --space-bar-1: 1rem;
    --space-bar-2: calc(var(--space-bar-1) * 1.8);
    --space-bar-3: 4rem;
    --space-page-margin: 2rem;
}

body{
/*  want to add a grid pattern to the bg */
/* how to make a grid pattern: https://stackoverflow.com/questions/3540194/how-to-make-a-grid-like-graph-paper-grid-with-just-css */

/* bg size is the size of the individual grid squares */
    background-size: 4rem 4rem;
/* using radial-gradient here to 'remove' the lines */
/* inside radial-gradient, circle shape, center of the circle gradient, start of the outer color of the circle */
    background-image: radial-gradient(circle, var(--tertiary-color) 1px, var(--background) 1px);

    animation-name: movinggrid;
    animation-timing-function: ease-in-out;
    animation-duration: 60s;
    animation-iteration-count: infinite;

    height: 100vh;
    color: var(--color);
    background-color: var(--background-gradient);
    font-family: var(--body-font);
    font-weight: 400;
    font-style: normal;
    font-size: var(--body-copy);
    text-wrap: balance;

    display: grid;
    grid-template-rows: min-content 1fr min-content;
    align-items: center;
}


hgroup, main, footer, nav{
    padding-inline: var(--space-page-margin);
    padding-block: var(--space-bar-0);

}

hgroup, footer{
    position: fixed;
    width: 100%;
    z-index: 1;
}

hgroup{
    background-image: linear-gradient(to bottom,  var(--background),var(--background),var(--background-gradient));
    top: 0;
    z-index: 3;
    
    ul{
        display: flex;
        justify-content:space-between;
        column-gap: var(--space-bar-1);
        font-size: var(--body-copy);
        white-space: nowrap;

        #about{
            /* making about only show on mobile */
            
            /* MDN: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Properties/visibility */

            /* im not sure which one (visibility or display) to use */
            /* I came across https://stackoverflow.com/questions/3695813/difference-between-visibilitycollapse-and-displaynone */
            /* i learnt that disply hide the element entirely including its surrounding properties like column-gap */
            display: none;
        }
        /* i want the info to appear on hover. this is my reference: https://codepen.io/jimbennett/pen/OMPrjL */
    
        /* I referenced how the selector were written such as .textanim-container:hover .textanim-hidden */

        li{
            width: min-content;
            height: 3rem;
        
            h1{
                color: var(--color);
                animation-name: fontchange;
                animation-duration: 1s;
                animation-iteration-count: infinite;
                animation-timing-function: steps(5, end);
                font-size: var(--heading-copy);
            }
    
            a{
                opacity: 0.1;
            }
            a:hover{
                font-family: "Jacquard 24", system-ui;
                color: var(--color);
                opacity: 1;
            }
            .channel-link{       
                .channel-description{
                    display: none;
                    white-space: wrap;
                    width: 60ch;
                    position:relative;
                    top: var(--space-bar-1);
                    color: var(--secondary-color);
                    font-family: "VT323", monospace;
                }
            }
            
            .channel-link:hover .channel-description {
                display: block;
                background-image: linear-gradient(to bottom, var(--background-gradient), var(--background), var(--background), var(--background), var(--background), var(--background), var(--background-gradient));
                }
        }
            
        /* fix the width for channel details */
       #desktop-channel{
            width:13rem;
        }

    }
    
}


footer, nav ul{
    display: flex;
    column-gap: var(--space-bar-1);
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
}

nav{
    width: 100%;
    /* i want to make the nav centered at the bottom */
    /* saw this example:https://stackoverflow.com/a/22278778 */
    /* the anchor point of the nav element is top left corner */
    /* left:50% shifts it to the right for half of the screen width
    then, translate 50% to the left to offset the element to the center  */
    position: fixed;
    bottom: 0rem;
    left: 50%;
    transform: translate(-50%,0);
    
    z-index: 3;
    display: flex;
    flex-direction: column;
    row-gap: var(--space-bar-1);
    padding-block-end: var(--space-bar-2);

    /* making the box click transparent */
    pointer-events: none;

    display: flex;
    flex-direction: column;
    align-items: center;

    button{
        pointer-events: auto;
    }
    #viewtoggle{
            column-gap: var(--space-bar-2);
            row-gap: var(--space-bar-1);
         
            #field-view-button{
                font-family: var(--heading-font);
                color: var(--color);
                
                &.button-unclicked {
                    font-family: var(--heading-font-shadow);
                }
                &.button-clicked {
                    font-family: var(--heading-font);
                }
            }
        
            #field-view-button:hover, button:hover{
                font-family: var(--heading-font);
            }
        } 

    #randomize{
        width: 2rem;
        height: auto;
        color: var(--color);
    }
    #randomize:hover{
        fill: var(--secondary-color);
    }
}

footer{
    
    color: var(--tertiary-color);
    font-family: "PT Sans", sans-serif;
    font-size: 60%;
    bottom: 0;
    display: flex;
    column-gap: var(--space-bar-0);
    justify-content: space-between;

/* for the skrim */
    background-image: linear-gradient(to bottom, var(--background-gradient), var(--background),var(--background));

    padding-block-start: var(--space-bar-3);
    a{
        text-decoration: underline;
        pointer-events: auto;
    
    }
    a:hover{
        color: var(--color);
    }
}

main{
    width: 100vw;
    height: 100%;
    overflow-x:hidden;
}

#channel-blocks{
    
    width: 100%;

    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    row-gap: 0rem;
    column-gap: 0rem;
    justify-content: space-evenly;
    align-items: space-evenly;
    text-align: center;

    padding-block: 10vh;

    
    li{
        font-size: var(--body-copy);
        color: var(--secondary-color);
        filter: grayscale(100%);
        align-self: center;

        section {
            a, p a{
                display: none;
            }
        }

        a h3{
            color: var(--color);   
            svg{
                fill: var(--color);   
            }   
        }
        a h3:hover{
            color: var(--secondary-color);  
            svg{
                fill: var(--secondary-color);   
            }    
        }
    /*cover all media types */
        div, a, figure{
            display: flex;
            flex-direction: column;
            align-items: center;
            align-self: center;
            gap: var(--space-bar-0);
            background-image: linear-gradient(to bottom, var(--background-gradient), var(--background), var(--background), var(--background), var(--background), var(--background), var(--background), var(--background), var(--background-gradient));
            /* i saw riya's code for the mask with transparent gradient, i like the effect of it */
            mask-image: radial-gradient(circle, black 0%, rgba(0, 0, 0, 0) 90%);
            /* all description texts */
            max-width: 25vw;
            
             picture, img, video, audio{
                /*need the inline width to make small ones hoverable */
                width: 100%;
                height: auto;
            }
            iframe{
                width: fit-content;
            }

            section p, section a{
                display: none;
                padding-block-end: var(--space-bar-0);
                max-width: 45ch;
                text-wrap: balance;
                color: var(--secondary-color);
                font-family: "PT Sans", sans-serif;
                font-size: 60%;

            }

            h2, h3{
                max-width: 40ch;
            }

            h2{
                margin-block-end: 0.4rem;
                color: var(--color);
                font-family: var(--body-font);
                font-weight: 700;
                line-height: 120%;
            }
            
            h3{
              
                font-family: var(--heading-font);
                display: flex;
                flex-direction: column;
                row-gap: calc(var(--space-bar-0)* 0.5);
                justify-content: center;
                align-items: center;
    
                svg{
                        width: 1rem;
                        height: auto;
                        align-items: baseline;        
                }    
            }

           

            audio {
                block-size: revert;
                inline-size: 100%;
            }
        }

        
        /* this is for hover animation */
        scale: 28%;
        transition: 1200ms;
        transition-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
        /*values from https://easings.net/#easeInQuartic */

        animation-timing-function: linear;
        animation-duration: 30s;
        animation-iteration-count: infinite;

    }
    
    li:nth-child(1n){
        animation-name: amovin;
        translate: 25% 30%;
    }
    li:nth-child(2n){
        animation-name: bmovin; 
        translate: 0% 0%;
    }
    li:nth-child(3n){
        animation-name: cmovin;
        translate: -20% -10%;
    }


    li:hover{ 
        scale: 100%;
        filter: grayscale(0%);
        z-index: 2;
        animation-play-state: paused;

        div, a, figure{
             mask-image: radial-gradient(circle, black 90%, rgba(0, 0, 0, 0) 100%);
        }

    }
   
}

#channel-blocks.indexview-channel{
            display: grid;
            animation: none;
            row-gap: var(--space-bar-3); 

            li{                
                /* margin-inline: var(--space-bar-0); */
                animation:none;
                transition: none;
                translate: 0% 0%;
                scale: 100%;
                border-block-start: 0.04rem dotted var(--secondary-color);
                padding-block-start: var(--space-bar-1);
                
                /* remove all links in description */
                section { 
                    p{
                            display: block;
                        }
                    a, p a{
                            display: none;
                        }
                }

                div, a, figure{
                    background-image: none;    
                    display: grid;
                    grid-template-columns: repeat(5, minmax(0, 1fr)); 
                    align-items: flex-start;
                    column-gap: var(--space-bar-3);
                    mask-image: none;
                    max-width: 100vw;
                    
                    *{
                        justify-content: flex-start;
                        text-align: left;
                    }

                    /* moving h3 to the front */
                    h3{
                        opacity: 1;
                        order: -1;
                        justify-content: start;
                        align-items: start;
                        overflow: hidden;
                        overflow-wrap: break-word; /*force word wrap*/
                    } 
                    
                    h2, picture, img, iframe, video, audio{
                        grid-column: span 2;   
                    }

                    
                    picture,img, iframe, video, audio{
                        aspect-ratio: 16 / 9;
                        width: 100%;
                        max-height: auto;
                        overflow: hidden;
                        object-fit: cover;
                    }
                    section{
                         grid-column: 4 / span 2;
                    }
    
                }
            }
            
        }

button{
            font-family: var(--heading-font-shadow);
            width: max-content;
            cursor: pointer; 
            
            &.button-clicked {
                font-family: var(--heading-font);
                color: var(--color);
            }
        }
button:hover{
            font-family: var(--heading-font);
            color: var(--color);
        }


.trail-particle {
    pointer-events: none;
    position: absolute;
    background:var(--tertiary-color);
    border-radius: 50%;
    width: 0.2rem;
    height: 0.2rem;
    animation-name: fade;
    animation-duration: 40s;
    animation-timing-function: cubic-bezier(0.075, 0.82, 0.165, 1);
}

@keyframes fade {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}



@media(width<1000px){
    :root{
         --space-page-margin: 1rem;
    }

    hgroup{

        padding-block-end: var(--space-bar-2);
        position: fixed;
        inset-block-start: 0rem;

        ul{
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: space-between;
            row-gap: 0.6rem;
            text-align: center;
            li{
                height: max-content;
            }
            #about{
                display: inline;
            }

            #desktop-channel{
                display: none;
            }
            /* h1 */
            li:nth-child(3) {
                order: -2;
                height: 2rem;
            }
        }     
  
        dialog{
         
                width: 100vw;
                /* When JS adds the `open` attribute… */
                &[open] { 
                        height: 100vh;
                        display: flex;
                        flex-direction: column;
                        justify-content: center;
                        align-items: center;
                        row-gap: calc(var(--space-bar-3)*0.6) ;
        
                        background-image: linear-gradient(to bottom, var(--background-gradient), var(--background), var(--background), var(--background), var(--background), var(--background), var(--background-gradient));
                        border-radius: var(--space-bar-0);
                        filter: drop-shadow(0 0.2rem 0.2rem rgba(0, 0, 0, 0.5)); 
                      
                        /* Defaults to `position: absolute;`, this centers it: */
                        inset-block-start: 50%;
                        inset-inline-start: 50%;
                        position: fixed; /* In the viewport. */
                        translate: -50% -50%;
        
                        li{
                            display: flex;
                            flex-direction: column;
                            align-items: center;
        
                            a{
                                font-family: var(--heading-font);
                                color: var(--color);
                                opacity: 1;
                                
                                .channel-description{
                                    display: block;
                                    text-wrap: wrap;
                                    width: 80vw;
                                    color: var(--secondary-color);
                                    font-family: var(--body-font)
                                }
                                svg{
                                    width: 1rem;
                                    height: auto;
                                    align-items: baseline;         
                                }
                            }
                        }
                         
                    } /* `block` is default, but we can override. */
        
                    #close { 
                        font-family: "Jacquard 12 Charted", system-ui;
                        cursor: pointer; 
                        width: 1.5rem;
                        height: auto;
                        fill: var(--color);
                    } /* Always have a clear “close” `button`! */
        
                    &::backdrop {
                        backdrop-filter: blur(0.4rem);
                        background-color:rgb(244, 244, 242 / 10%); /* A dark overlay. */
                        pointer-events: none; /* Let clicks pass through to our `document` listener. */
                    }
                    
                
        }
    }

    nav{
        background-image: linear-gradient(to bottom, var(--background-gradient), var(--background),var(--background));
    }
    #channel-blocks{
        inset-block-start: 2rem;
        width: 100%;
        height: 125%;
        display: flex;
        flex-direction: column;
        row-gap: var(--space-bar-2);
        align-items: center;    
        
        
        li {
            max-height: max-content;
            scale: 50%;
            div, a, figure{
                max-width: 45vw;
                p{
                    display: none;
                }
                h2, picture, img, iframe, video, audio{
                    width: 100%;                
                }
                align-items: left;
                gap: var(--space-bar-0);
                display: flex;
                flex-direction: column;
                font-size: var(--body-copy);
                filter: grayscale(0%);

            }
            &.highlight {
                scale: 100%;
                opacity: 1;
                animation-play-state: paused;
                translate: 0% 0%;
                div, a, figure{
                    mask-image: none;
                }
            }

        }
        
        
    }

    #channel-blocks.indexview-channel{
        li{
             div, a, figure{
                column-gap: var(--space-bar-2);
                
        }
        }
    }
}

@media(width<700px){
    #channel-blocks{
        li { 
            div, a, figure{
                max-width: 65vw;

                h2, picture, img, iframe, video, audio{
                    width: 100%;
                }
            }
        }
    }
    #channel-blocks.indexview-channel{
                display: grid;
                animation: none;
                row-gap: var(--space-bar-2); 
                height: 100%;
                
                
                li{
                    border-block-start: none;
                    padding-block: var(--space-bar-0);
                    
                    div, a, figure{

                        display: flex;
                        flex-direction: column;   

                        h3{
                            order: 0;
                            width: 100%;
                            padding-block-start: var(--space-bar-1);
                            border-block-start: 0.04rem dotted var(--secondary-color);
                        } 
                        /* this get rid of the word ch limit for desktop */
                        h3,  h2, picture, img, iframe, video, audio,section p, section a{
                            max-width: 100%;
                        }
                        
                        h2, picture, img, iframe, video, audio{
                            padding-block-end: var(--space-bar-1);
                        }


                    }  
                            
                }
        
        
            nav{
                background-image: linear-gradient(to bottom, var(--background-gradient), var(--background),var(--background));
                padding-block-start: var(--space-bar-3); 
            
            }
        
        }

    footer{
        display: none;
    }
}

@keyframes fontchange {
  0% {
    font-family: var(--heading-font);
  }
  20% {
    font-family: "Share Tech Mono", monospace;  
    font-family: "Micro 5", sans-serif;
  }
  40% {
    font-family: var(--heading-font-shadow);
  }
  60% {
    font-family: "Micro 5", sans-serif;
  }
  80% {
    font-family: "VT323", monospace;
  }
  100% {
    font-family: var(--heading-font-shadow);
  }
}


@keyframes amovin {
  0% {
    translate: 25% 30%;
  }
  15% {
   translate: 15% 20%;
  }
  30% {
    translate: 10% 10%;
  }
  45% {
    translate: -5% 0%;
  }
  60% {
    translate: -12% -15%;
  }
  80% {
    translate: -20% 20%;
  }
  100% {
    translate: 25% 30%;
  }
}

@keyframes bmovin {
  0% {
    translate: 0% 0%;
  }
  20% {
   translate: -10% 20%;
  }
  40% {
    translate: 10% 10%;
  }
  60% {
    translate: 5% 10%;
  }
  80% {
    translate: -10% -5%;
  }
  100% {
    translate: 0% 0%;
  }
}

@keyframes cmovin {
  0% {
    translate: -20% -10%;
  }
  20% {
   translate: -10% -5%;
  }
  40% {
    translate: 0% 0%;
  }
  60% {
    translate: -5% 0%;
  }
  80% {
    translate: -10% -5%;
  }
  100% {
    translate: -20% -10%;
  }
}