@import url('https://fonts.googleapis.com/css2?family=Space+Mono:ital,wght@0,400;0,700;1,400;1,700&display=swap');

@import url('https://fonts.googleapis.com/css2?family=VT323&display=swap');


:root{
    --spacing: 4rem;
    font-size: 120%;
}


@media (width<1400px){
    :root{
        --spacing: 3rem;
        font-size: 120%;
    }   
}

@media (width<1200px){
    :root{
        --spacing: 2rem;
        font-size: 120%;
    }   
}

@media (width<900px){
    :root{
        --spacing: 1rem;
        font-size: 120%;
    }   
}

@media (width<500px){
    :root{
        --spacing: 0.8rem;
        font-size: 120%;
    }   
}

@media (width<450px){
    :root{
        --spacing: 0.5rem;
        font-size: 120%;
    }   
}

body {
    text-wrap: balance;
    line-height: 2rem;
    font-family: "Space Mono", monospace;
    color: black;
    background-color:white;
    

    header{
        background-color: rgb(2, 2, 3);
        color: white;

        hgroup{
            
            text-align: center;

            h1 {
            font-size: 4rem;
            line-height: 4rem;
            font-family: "VT323", monospace;
            }

            p {
                padding-block-start: 2rem;
            }
        }

        
    }
    
    header, nav, main, footer{
            padding-block: var(--spacing);
            padding-inline: calc(var(--spacing)*4);
        }

    footer {
        padding-block-start: 0;
        }
    
    nav {
        padding-block: calc(var(--spacing)/4);
        background-color: blue;
        color: white;
        text-transform: uppercase;
        display: flex;
        justify-content: space-around;

        position: sticky;
        inset-block-start: 0;


            
        a{
                color: white;
            }
            a:hover{
                color: darkgray;
            }


        @media (width<800px){
        padding-block: var(--spacing);
        display: flex;
        flex-direction: column;
        align-items: center;
        }   
        }       


    }



    

    main{
        .allcontent{
            display: grid;
            grid-template-columns: 1fr;
            gap: calc(var(--spacing)/2);
            
            
            .block {
                padding: calc(var(--spacing)/2);
                background-color: #0000000f;
                border-radius: 1rem;
 
                .blocktitle{
                    border-bottom: solid black 0.05rem;
                }

                summary{
                    h2 {
                        color: black;
                        padding-block-end: 1rem;
                        font-size: 2rem;
                        line-height: 3rem;
                    }
                }   
               
                

                .list{


                    h3 {
                        font-weight: 600;
                        text-transform: uppercase;padding-block-start: calc(var(--spacing)/2);
                        padding-block-end: calc(var(--spacing)/8);
                    }

                
                    summary, p {
                        color:#606060;
                        font-size: 0.8rem;
                        line-height: 1.4rem;
                    }

                     p{
                            display: none;
                        }

                    details:hover{
                        p{
                            display: block;
                        }
                    }

                }

            }


        }
        
        /* details > summary {
                list-style-type: '▶️';
            }

        details[open] > summary {
                list-style-type: '🔽';
            }     */

            
      

        }
        
        
main, footer{
        a{
                color: black;
            }
        a:hover{
                color: #0400ff;
            }
} 




em {
    font-style: italic;
}