@import url('https://fonts.googleapis.com/css2?family=Cormorant+Infant:ital,wght@0,300..700;1,300..700&family=Playfair+Display:ital,wght@0,400..900;1,400..900&family=Playfair:ital,opsz,wght@0,5..1200,300..900;1,5..1200,300..900&family=Zalando+Sans+Expanded:ital,wght@0,200..900;1,200..900&display=swap');

:root{
      font-family: "Zalando Sans Expanded", sans-serif;
      font-size: 0.9rem;
      
      --text-color: #08183A;
      --secondary-text-color: #08183aa9;
      
      --spacing: 1.5rem;
      --border-width: 0.05rem;
      
      --h1-size: 2rem;
      color: var(--text-color);

      scroll-behavior: smooth;

      /* this is the bluish background effect for the dialog box  */
      --blur-background-color: rgba(47, 62, 94, 0.26);
      --blur-background-box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
      --blur-background-backdrop-filter: blur(9.4px);

      /* the glowy white background  */
      --glowy-filter: brightness(1) saturate(1.2);
      --glowy-background: rgba(255, 255, 255, 0.636);
      --glowy-box-shadow: 0px 0px 40px 50px rgba(255, 255, 255, 0.636);
    }

    h2{
        color: var(--secondary-text-color);
        font-size: 0.9rem;
    }
    
    body{
        main{
            .hero{

                /* ------------- BEFORE THE POP UP --------------  */

                display: flex;
                flex-direction: column;
                justify-content: space-between;
                align-items: center;
                height: 100svh;
                padding: var(--spacing);
                
                /* The arena links and the contributors info at the top of the page  */
                .external-links{
                    display: flex;
                    width: 100%;
                    justify-content: space-between;

                    .designer{
                        *{
                            text-align: right;
                        }
                    }

                    #channel-link{
                        border-radius: 2rem;
                        padding: 0.8rem;
                    }

                    #channel-link:hover{
                        background: var(--blur-background-color);
                        box-shadow: var(--blur-background-box-shadow);
                        backdrop-filter: var(--blur-background-backdrop-filter);
                    }
                }

                /* The hero content at the center of the page */
                .hero-text{
                    display: flex;
                    flex-direction: column;
                    text-align: center;
                    align-items: center;
                    gap: calc(var(--spacing)/2);

                    /* Butterflies, description stuffs */
                    .hero-content{
                        display: flex;
                        flex-direction: column;
                        align-items: center;
                        text-align: center;
                        gap: 0.5rem;


                        h1{
                            font-size: var(--h1-size);
                            font-weight: 700;
                            display: block;
                            inline-size: fit-content;
                            
                        }
                        
                        p{
                            color: var(--secondary-text-color);
                        }
                        
                        .updated-date{
                            display: flex;
                            width: fit-content;
                            align-self: center;
                            gap: 0.5rem;
                        }
    
                        p+p{
                            font-weight: 600;
                        }
                    }
                }
                


                .content{
                        
                        button{
                            padding-block: 0.3rem;
                            padding-inline: 0.8rem;
                            display: flex;
                            align-items: center;
                            gap: 0.5rem;
                            width: fit-content;
                            border: var(--border-width) solid var(--text-color);
                            border-radius: 2rem;
                        }

                        button:hover{
                            background: var(--blur-background-color);
                            box-shadow: var(--blur-background-box-shadow);
                            backdrop-filter: var(--blur-background-backdrop-filter);
                        }
                        
                        

                
                    /* ------------- AFTER THE POP UP --------------  */
                    
                    dialog{
                        /* Added a frosty blurred background for modal */
                        /* From https://css.glass */
                        /* Here we are adding a tinted background with low opacity then adding backdrop filter that blurs the stuffs behind the modal */
                        background:rgb(101 141 203 / 30%);
                        box-shadow:var(--blur-background-box-shadow);
                        backdrop-filter: var(--blur-background-backdrop-filter);
                        
        
                        /* Was having trouble with the modal not taking full height so asked chatgpt.  */
                        /* Apparently the dialog is inside a container with limited height and it was inheriting that height so I think this code makes it cover the entire viewport by defining its position and moving it to the top of the screen.  */
                        inset: 0; 
                        z-index: 2;
                        overflow-y: auto; /* to enable scrolling when the content exceeds the viewport height. */
                        padding: var(--spacing);
                        inline-size: 100vw;

                       
                        .top-bar, .controls{
                            position: sticky; /* went for position sticy instead of fixed because the dialog is already porition fixed, which causes stacking and makes it impossible for the items to be fixed in one position. */
                            z-index: 3;
                            top: 0;
                            left: 0;
                            
                        }

                        .top-bar{
                            display: flex;
                            justify-content: space-between;
                        }
                        
                        .controls{
                            top: 64%;/*  to move the controls to the bottom of the page */
                            display: grid;
                            justify-content: start;
                            bottom: var(--spacing);

                            .mobile-controls{
                                /* this is only seen in mobile  */
                                margin-block-start: var(--spacing);
                            }
                        }

                        /* this is to toggle the visibility of the menu controls when we click on the filter button in mobile  */
                        .display{
                            visibility: hidden;
                        }

                        .controls-content{
                            display: flex;
                            flex-direction: column;
                            gap: 0.5rem;
                            width: fit-content;
                            padding: 0.4rem;
                            background: rgba(255, 255, 255, 0.333);
                            border: var(--border-width) solid var(--text-color);
                            border-radius: 2rem;
                            
                            button{
                                border: none;
                            }

                            li:hover{
                                filter: var(--glowy-filter);
                                background:var(--glowy-background);
                                box-shadow: var(--glowy-box-shadow);
                                border-radius: 2rem;
                                   
                                    button{
                                        background: white;
                                    }
                            }

                            li:active{
                                    background: white;
                            }
                        }

                        .active-content{
                            background: white; 
                        }
                        
                        

                        /* Content list pulled from the channel blocks is displayed in a grid layout. 3 columns are defined and the content is spaced out evenly.  */
                        
                        #channel-blocks{
                            display: grid;
                            grid-template-columns: repeat(4, 16rem);
                            gap: calc(var(--spacing)*14);
                            align-items: center;
                            padding: var(--spacing);
                            padding-block-end: calc(var(--spacing)*4);


                            li:nth-child(4n){
                                padding-inline-end: var(--spacing);
                            }

                            /* giving style to the content */
                            li{
                                    /* border-radius: 8rem; */
                                    
                                    /* Used Gemini to get a blurred object so it looks a bit nostalgic and dreamy. The blur is done in a way that the center of the image is more visible and the edges are more blurred so it gives a nice glowing effect to the image. */

                                    mix-blend-mode:color-burn;

                                    /* this is what defines how much of the element to show*/
                                    mask-image: radial-gradient(circle, black 20%, rgba(0, 0, 0, 0) 80%),
                                    linear-gradient(to right, transparent, black 20%),
                                    linear-gradient(to left, transparent, black 20%),
                                    linear-gradient(to bottom, transparent, black 20%),
                                    linear-gradient(to top, transparent, black 20%); 
                                    mask-composite: intersect;

                                    filter: blur(0.1rem) brightness(1) saturate(1.2);
                                    background:var(--glowy-background);
                                    box-shadow: var(--glowy-box-shadow);
                                   
                                    
                                    /* added transition so when the user hovers on the object it is not abrupt */
                                    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);

                                }

                           
                            /* hover state to remove the glowy effect  */
                            li:hover, .highlight {
                                mix-blend-mode: normal;
                                filter: blur(0) brightness(1) saturate(1);
                                box-shadow: var(--glowy-box-shadow);
                                mask-image: none;
                                border-radius: 0;
                            }
                           

                            /*  --- DIFFERENT CSS FOR DIFFERENT CONTENT --- */

                            /* IMAGE block */

                            .image-block{

                                .metadata{
                                    display: none;
                                    justify-content: center;
                                    justify-self: center;
                                    text-align: center;
                                    gap: 0.2rem;
                                    margin-block-start: var(--spacing);
                                    background: var(--glowy-background);
                                    box-shadow: var(--glowy-box-shadow);
                                    border-radius: 4rem;

                                    position: absolute;
                                    left: 50%;
                                    transform: translateX(-50%);

                                    p{
                                        max-width: 18rem;
                                        font-weight: 500;
                                    }
                                }
                            }
                            
                            .image-block:hover{
                                .metadata{
                                    display: grid;
                                }
                            }

                            /* TEXT block */

                            .text-block, .metadata p{ 
                                
                                p{
                                    text-align: center;
                                    color: var(--secondary-text-color);
                                    line-height: 1.6rem;
                                    padding: var(--spacing);
                                }
                            }

                            

                            .text-block:hover, .other-block:hover{
                                background: var(--glowy-background);
                                box-shadow: var(--glowy-box-shadow);
                                color: var(--text-color);
                                font-weight: 500;
                                border-radius: 4rem;
                            }
                            

                            /* PDF block */
                            
                            .pdf-block, .link-block{
                                display: flex;
                                flex-direction: column;
                                align-items: center;
                                gap: var(--spacing);

                                a{
                                    border: var(--border-width) dotted var(--text-color);
                                    border-radius: 2rem; 
                                }
                            }
                            

                            .pdf-block{

                                .pdf-details{
                                    display: none;
                                }

                                a{ 
                                    overflow: hidden;  
                                    text-align: center;
                                    max-height: 18rem;
                                }
                                
                                img{
                                    border-radius: 2rem; 
                                    display: block; 
                                    inline-size: 100%;
                                    }

                            }

                            .pdf-block:hover{
                                    display: flex;
                                    flex-direction: column;
                                    
                                    .pdf-details{
                                        display: flex;
                                        flex-direction: column;
                                        align-items: center;
                                        gap: 2rem;

                                        img{
                                            max-width: 1.8rem;
                                        }

                                        h2{
                                            display: block;
                                            color: var(--secondary-text-color);
                                            font-size: 1.1rem;
                                            text-align: center;
                                        }
                                    }
                            }
                            
                            /* LINK block  */
                            
                            .link-block{
                                
                                a{
                                    display: flex;
                                    gap: 1rem;
                                     padding: 1rem;
                                }

                                a:hover{
                                    background: white;
                                }

                                picture{
                                    img{
                                        overflow: hidden;
                                        border-radius: 2rem; 
                                        border: var(--border-width) dotted var(--text-color);
                                        max-height: 18rem;
                                    }
                                   
                                }
                            }

                            /* Video design */
                            .video-block{
                                width: fit-content;

                                iframe, video{
                                    border: var(--border-width) dotted var(--text-color);
                                    border-radius: 2rem; 
                                    overflow: hidden;
                                    max-height: 18rem;
                                   inline-size: 100%;
                                }
                            }
                        

                            .other-block{
                                max-height: 18rem;
                            }

                             /* adding filter to the content */
                            .filter{
                                display: none;
                            }
                        }
                        
                    }

                    .human-vision-icon{
                        display: none;
                    }
                    
                    /* This is a class for getting the butterfly vision effect that gets added to the dialog from the JS. Basically it is overwriting the colors and filter in the dialog class. */
                    .butterfly-version{
                        background:rgba(2, 12, 27, 0.807);

                        .top-bar button, .mobile-controls{
                               filter: invert(100%) brightness(200%);
                        }

                       .top-bar {
                           button{
                               }

                           button:hover{
                            background: white;
                            color: var(--text-color);
                           }
                       }

                       .controls{

                           .controls-content{
                               li:hover{
                                   filter: invert(100%) brightness(200%);
                                       background: none;
                                       box-shadow: none;
                               }
                           }
                       }


                        #channel-blocks{
                            li{
                                border-radius: 8rem;
                                    mix-blend-mode:normal;
                                    mask-image: none;
                                    /* You can also use a filter to blur the whole thing slightly first */
                                    filter: saturate(250%) hue-rotate(30deg) brightness(1.1) contrast(120%);
                                    background: none;
                                    box-shadow: none;
                                    
                                    /* added transition so when the user hovers on the object it is not abrupt */
                                    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
                            }

                            li:hover{
                                mix-blend-mode: normal;
                                filter: saturate(250%) hue-rotate(30deg) brightness(1.1) contrast(120%);
                                box-shadow: none;
                                mask-image: none;
                                border-radius: 0;
                            }

                            .text-block, .metadata p{ 
                                p{
                                    color: white;
                                }
                            }

                            .text-block:hover, .other-block:hover{
                                 background: none;
                                    box-shadow: none;
                                    color: white;
                            }

                            .image-block{
                                .metadata{
                                    background:none;
                                    box-shadow: none;

                                    h2,p{
                                        color: white;
                                    }
                                }
                            }

                            .pdf-block:hover, .pdf-block{
                                
                                .pdf-details{
                                    img{
                                        filter: invert(100%) brightness(200%);
                                    }
                                    h2{
                                    color: white;
                                    }
                                }
                                    }
                            }
                            
                            .pdf-block, .link-block{
                                a{
                                    border: var(--border-width) dotted white;
                                }
                            }

                            /* Link design  */
                            .link-block{
                                
                                a{
                                    filter: invert(100%) brightness(200%);
                                }

                                a:hover{
                                    background: white;
                                }
                            }

       
                        }
                    }
                }
                    
        }

    }
    

body:has(dialog[open]) { overflow: hidden; }




@media (width>500px) {

    :root{
      --h1-size: 2.5rem;
      font-size: 1rem;
}
    
body{
    main{
        .hero{
            background-image: url("../Images/hero-butterfly.png");
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
                   
            .butterfly-image{
                    display: none;
            }

            .hero-content{
                h1,p{
                    /* to give the blur effect to the paragraphs and heading */
                            background: rgba(255, 255, 255, 0.636);
                            box-shadow:0px 0px 20px 15px rgba(255, 255, 255, 0.636);
                }

                h1{
                    box-shadow:0px 0px 30px 25px rgba(255, 255, 255, 0.636);
                }
            }

            .content{
                dialog{
                    
                    .controls{
                            top:94%;
                            bottom: var(--spacing);
                            display: grid;
                            justify-content: center;
                        }

                    .mobile-controls{
                        display: none;
                    }

                    .display{
                            visibility: visible;
                        }
                    
                    .controls-content{
                        flex-direction: row;
                    }

                    #channel-blocks{
                            grid-template-columns: repeat(5, 25rem);
                            gap: calc(var(--spacing)*18);
                            
                            
                            li:nth-child(5n){
                                padding-inline-end: var(--spacing);
                            }

                            li:nth-child(3n+1){
                                justify-self: end;
	                            align-self: end;
                            }

                            li:nth-child(2n+1){
                                justify-self: start;
	                            align-self: start;
                            }

                            
                            .pdf-block:hover{
                                    flex-direction: row;

                                    .pdf-details{
                                        
                                        align-items: start;

                                        h2{
                                            text-align: left;
                                        }
                                    }
                            }

                }
            }
        }
    }
}
}
}


@media (width>650px) {

:root{
      --h1-size: 3rem;
      font-size: 1rem;
}
    body{
        main{
            .hero{
                p{
                        margin: 0 auto;
                        max-width: 40rem;
                        margin-block-end: 0.8rem;

                    }
            }

            .content{

            }
        }
    }
}
@media (width>1400px) {
    :root{
        font-size: 1rem;

        --spacing:2rem;

        --h1-size:4rem;
    }

    body{
        main{
            .hero{
                .content{
                    dialog{
                        #channel-blocks{
                             grid-template-columns: repeat(4, 20rem);
                             gap: calc(var(--spacing)*14);
                        }
                    }
                }
            }
        }
    }
}
@media (width>1800px) {
    

    body{
        main{
            .hero{
                .content{
                    dialog{
                        #channel-blocks{
                             grid-template-columns: repeat(5, 32rem);
                             gap: calc(var(--spacing)*14);
                        }
                    }
                }
            }
        }
    }
}