@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(176, 176, 176);
    --tertiary-color: rgb(203, 203, 203);
    --background: rgb(244, 244, 242);
    --background-gradient: rgba(244, 244, 242, 0);

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

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

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

body{
    height: 100vh;
    color: var(--color);
    background-color: var(--background);
    font-family: "VT323", monospace;
    font-weight: 400;
    font-style: normal;
    font-size: var(--body-copy);
    text-wrap: balance;;
    color: var(--secondary-color);

    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), var(--background),var(--background-gradient));
    top: 0;
    height: 3rem;

    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;
        
            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;
                }
        }
            
        /* fix the width for channel details */
       #channel{
            width:10rem;
        }

    }
    
}


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

nav{
    width: max-content;
    /* 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;
    ul{
        row-gap: var(--space-bar-0);
        li{
            width: max-content;
        }
        li:hover {
            font-family: "Jacquard 24", system-ui;
            color: var(--color);
        }
        /* active state of the button */
        li:first-child{
            font-family: "Jacquard 24", system-ui;
            color: var(--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;
    }
    a:hover{
        color: var(--color);
    }
}


main{
    width: 100vw;
    /* adding height here so i can scroll for sketch purposes */
    height: 100%;
    overflow-x:hidden;

}
#channel-blocks{
    
    width: 100%;
    height: 150%;
    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{

        gap: var(--space-bar-0);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        font-size: var(--body-copy);
        filter: grayscale(100%);
        color: var(--secondary-color);
        max-height: 32vh;
        min-width: 15vw;
        max-width: 40vw;
        
        h2{
            max-width: 40ch;
            font-weight: 700;
            margin-block-end: 0.4rem;
            color: var(--color);
            opacity: 50%;
        }
        
        p{
            display: none;
            max-width: 45ch;
            text-wrap: balance;
            color: var(--secondary-color);
            font-family: "PT Sans", sans-serif;
            opacity: 0;
            font-size: 60%;

            transition: 0.5s;
            transition-timing-function: ease-out;
        }
        h3{
            max-width: 40ch;
        }
        h3 a:hover{
            font-family:"Jacquard 24", system-ui;;
        }

        audio{
            height: 3rem;
            width: 100%;
        }
        
        /* this is for hover animation */
        scale: 15%;
        transition: 0.5s;
        transition-timing-function: ease-out;
        
    }
    
    /* adding an animation to the cards */
    li{
        animation-duration: 30s;
        animation-iteration-count: infinite;
        animation-timing-function: linear;
    }
    li:nth-child(1n){
        animation-name: amovin;
    }
    li:nth-child(2n){
        animation-name: bmovin; 
    }
    li:nth-child(3n){
        animation-name: cmovin;
    }
/* this is for the description to show */
    li:hover p {
        display: block;
        opacity: 1;
        }
    li:hover{    
        color: var(--color);
        scale: 100%;
        filter: grayscale(0%);
        z-index: 2;
        }

     img, iframe, video, audio, html{
            max-width: 30vw;
            height: fit-content;
    }

}

.listview{
    display: flex;
    flex-wrap: wrap;
    flex-direction: column;
    row-gap: var(--space-bar-1);
    align-items: center;
    justify-content: center;
    li{
        width: 100%;
        display: flex;
        flex-direction: column;
        align-items: left;
        gap: var(--space-bar-0);
        color: var(--color);
        font-size: var(--body-copy);
        scale: 100%;

        p{
            display: block;
            opacity: 1;
        }
    }
}
    


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

    hgroup{
        width: 100%;
        height: fit-content;
        padding-block-end: 6rem;
        position: fixed;
        inset-block-start: 0rem;

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

                a{
                    opacity: 1;
                    font-family: "Jacquard 24", system-ui;
                    color: var(--color);
                }

                #channel-link{    
                    padding-inline: var(--space-bar-1);
                    #channel-description{
                        max-width: 45ch;
                        display: block;
                        justify-content: center;
                        padding-block-end: 1rem;
                    }
                }
            }
            /* channel info */
            #channel {
                width: max-content;   
            }
        
            /* h1 */
            li:nth-child(3) {
                order: -2;
            }
    }
    #channel-blocks{
        inset-block-start: 2rem;
        width: 100%;
        display: flex;
        flex-direction: column;
        row-gap: var(--space-bar-0);
        align-items: center;


        img, iframe, video, audio{
            max-width: 40vw;
        }

        li {
            max-height: fit-content;
            p{
            display: block;
            opacity: 1;
        }
            color: var(--color);
            align-items: left;
            gap: var(--space-bar-0);
            display: flex;
            flex-direction: column;
            font-size: var(--body-copy);
            scale: 100%;
            /* filter: grayscale(0%); */
        }

        li:hover{    
            z-index: 0;
        }
    }
    nav{
        background-image: linear-gradient(to bottom, var(--background-gradient), var(--background),var(--background));

        padding-block-start: var(--space-bar-3); 
        #viewtoggle{
            display: none;
        }
    }

    footer{
        display:none;
    }
    }
}

@media(width<500px){
    #channel-blocks{
        li {
            max-width: 70vw;
            animation-name: none;
            animation-duration: 0s;
        }
    }
}

@keyframes fontchange {
  0% {
    font-family: "Jacquard 24", system-ui;
  }
  20% {
    font-family: "Share Tech Mono", monospace;  
    font-family: "Micro 5", sans-serif;
  }
  40% {
    font-family: "Jacquard 12 Charted", system-ui;
  }
  60% {
    font-family: "Micro 5", sans-serif;
  }
  80% {
    font-family: "VT323", monospace;
  }
  100% {
    font-family: "Jacquard 24", system-ui;
  }
}

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

@keyframes bmovin {
  0% {
    translate: 0% 0%;
  }
  20% {
   translate: -10% 20%;
  }
  40% {
    translate: 10% 10%;
  }
  60% {
    translate: 0% 0%;
  }
  80% {
    translate: 5% 10%;
  }
  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%;
  }
}