/****** body *********/ 

body {
    /* background-color: rgb(232, 232, 232); */
     height: 100vh;
     font-size: 1.1em;
     font-family: Helvetica, Arial, sans-serif;
     margin: 0%;
     line-height: 1.4;
     background-color: white;
     color: black;
 
 
 }


/****** text ********/ 

header p { 
margin-left: 5%;
margin-right: 5%;
}

#footer {
    display: flex;
    flex-direction: column;
}

#update {
    margin-top: auto;
    font-size: 0.7em;
    text-align: center;
}

/**** grid page ******/ 

.grid-container {
    min-height: 100%;
    min-width: auto;
    display: grid;
    grid-template-columns: auto;
    grid-template-rows: 100px auto auto 100px; 
    grid-template-areas: 
        "n n n"
        "h h h"
        "c c c"
        "f f f"
    
    }


    nav {
        grid-area: n;
        margin: 0%;
    
        }
    
    header {
    grid-area: h;


    }
    

    
    main {
    grid-area: c;


    }
    
    
    footer {
    grid-area: f;

    }

    
    

/***** sub grid main ***********/ 

.grid-sub-container-main {
    display: grid;
    grid-template-columns: 10% auto 10%;
    grid-template-rows: 1fr;
}


/***** sub grid nav ***********/ 

.grid-sub-container-nav {

    display: grid;
    grid-template-columns: 20% auto 20%;
    grid-template-rows: 1fr;

}

ul {
    list-style-type: none; 
    padding: 0; 
    margin: 0; 
}


 /****** articles ************/ 
    
 .collapsible {
    display: flex;
    padding: 0px 0px;
    border-bottom: 1px solid;
    justify-content: space-between;
    cursor: pointer;
    

}

.collapsible:hover {
    opacity: 0.5;
}

    
    .content {
        overflow: hidden;
        max-height: 0;
        transition: max-height 0.15s ease-out;

    }
    .content.active {
        max-height: 500px;
        transition: max-height 0.25s ease-in;   
     }
    



/******** images **********/ 

#imageName {
    height: 100px;
    width: auto;
    margin-left: 25%;
}

@media (max-width: 400px) {
    #imageName {
        height: 70px;
        margin-top: 20px;
    }
}