@import url('https://fonts.googleapis.com/css2?family=IM+Fell+DW+Pica:ital@0;1&family=IM+Fell+English:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Overpass+Mono&display=swap');
/*IMPORT FONTS IN ONE FILE*/
/*nav bar styling*/



/*scroll bar */
/* width */
::-webkit-scrollbar {
    width: 15px;
    
  }
  
  /* Track */
  ::-webkit-scrollbar-track {
   background: #7b877100; 
   /*background: linear-gradient( 90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 
   45%, #d1e4c1 45%, #d1e4c1 55%, rgba(0, 0, 0, 0) 55%, rgba(0, 0, 0, 0) 
   100%);*/
   
   
  }
   
  /* Handle */

  ::-webkit-scrollbar-thumb {
    background: #49544067; 
  
    height: 10px;
  }
  
  /* Handle on hover */

  ::-webkit-scrollbar-thumb:hover {
    background: #495440;}
body{
   
    background: url(assets/tsbg.png) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  overflow: overlay;
 
 
    
    

}
a{color:inherit}
main{
    display: flex;
    flex-direction: column;
}
/*nav  bar* dynamic  creation */

header{
    display: inline-flex;
    justify-content: center;
    align-content: center;
    font-family: 'IM Fell DW Pica', serif;
    font-size: 24px;
    color: black;
    text-decoration: none;
  
}
.navTitle{
    text-decoration: none;
 padding-top: 15%;
 padding-left: 20%;
 color: inherit;
 z-index: 2;
}
nav{
    display: inline-flex;
position: absolute;
left: 77%;
z-index: 2;
}

.ulNav{
    display: inline-flex;
    text-decoration: none;
    list-style: none;


}
.liNav{
    padding-left: 20px;
    padding-right: 20px;
}
.aNav{
    text-decoration: none;
    color: inherit;
}
.aNav:hover{
    color: #5c6a55;
    text-decoration: underline;
}
.aNav :active{
    color: #5c6a55;
    text-decoration: underline;
}

footer{
    display: flex;
    align-self: center;
    justify-content: center;
    font-family: 'IM Fell DW Pica', serif;
    font-style: italic;
    font-size: smaller; 
    color: #5c6a55;


}

/*footer*/
.universalFoot{
    position: relative;
    bottom: 0;
    z-index: 2;
}
.ulFoot{
    display: inline-flex;
    text-decoration: none;
    list-style: none;
    color: inherit;
 

}
.liFoot{
    padding-right: 10px;
}
.aFoot{
    color: #3e4839;
    text-decoration: none;

}
.aFoot :hover{
    text-decoration: underline;
    color: black;
}

/*//////////////////////////////////////////////////////////////////////////////////////home page///////////////////////////////////////////////////////////////// */
h1{
    font-family: 'IM Fell DW Pica', serif;
    font-size: 36px;

}
#homeIntro{
    font-family: 'IM Fell DW Pica', serif;
    font-style: italic;
    font-size: larger; 
    text-align: center;
}
#subIntro{
    font-size: smaller;
    color: rgba(0, 0, 0, 0.687);
}

#displayName{
    font-style: italic;
}
#login{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}
button{
    font-family: 'IM Fell DW Pica', serif; 
    font-style: italic;
    background-color: #757c71;
    border: 0px;
    border-radius: 30px;
    padding: 15px;
    width: 200px;
    transition-delay: 0.2s;
}
button:hover{
    background-color: #757c7179;
    transition: 0.2s;
}
#loginImg{
    width: 400px;
}
#introImg{
    
    max-height: 500px;
}
/*data art*/
#enterArt{
    display: flex;
    align-items: center;
    justify-content: center;
}

#nodeBubble{
    stroke: black;
    stroke-width: 1px;
}
#nodeshortBubble{
    stroke: black;
    stroke-width: 1px;
}

#bubbleTool{
    position: absolute;
    background-color: black;
    color: rgb(78, 66, 66);
    font-family: 'IM Fell DW Pica', serif;
    opacity: 1;
    transform: translateX(-50%);
    transform: translateY(-60%);

}

.d3-charts :hover{
 background-color: rgba(255, 255, 255, 0);
}
#enterSvg{
align-self: center;
}
 
  

 #backLong #backShort #backTop #backFolklore #backEvermore :hover{
    color: #5c6a55;
    text-decoration: underline;
   }
 #enterArt{
    display: none;
 }
 #shortArt{display: none;}
 #shortBut{display:none;}

 #taylorTopTracks{display: none;}

 #taylorTopBut{display: none;}

 #toptrackLi{
    font-family: 'Overpass Mono', monospace;

 }
 #folkloreBut{
    display: none;
 }
    #folkloreArt{
    display: none;
  }
  #evermoreArt{
    display: none;
  }
  #evermoreBut{
    display: none;
  }
  #midnightsArt{
    display: none;
  }
  #midnightsBut{
    display: none;
  }
  #restart{
    display: none;
  }

/*///////////////////////////////////////////////////////////////////////////////////////////////////////////blog selection*/

h1{
    display: flex;
    align-self: center;
    justify-content: center;
}
article{
    display: flex;
    flex-direction: row;
    border-width: 5px;
   padding-top: 2%;
   padding-bottom: 2%;
  
   
}
article:hover{
    background-color: #868f76a5;
}
#blogOneImg{
    width: 150px;
    filter: grayscale(1);
    
}
h2{
    font-family: 'IM Fell DW Pica', serif;
    font-style: italic;
    color: black;
    padding-left: 5%;  
    padding-right: 5%;
    padding-top: 25px;
}
#blogTitle{
    font-size: 28px;
}
#blogLinks{
    text-decoration: none;
    font-family: 'IM Fell DW Pica', serif;
    font-style: italic;
    color: inherit;
    
}
#blogLinks:hover{
    color:#5c6a55
}
#hr1{
    border: 2px solid black;
    background-color: black;
 transform: rotate(30deg);
}


/*/////////////////////////////////////BLOG/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/

/*blog template for all blogs*/
/*mini nav*/
#btHeading{
    display: flex;
    align-self: center;
    justify-content: center;
}
.blogQuickSelect{
    margin: 0;
  display: inline-flexbox;
  justify-content: flex-start;
  font-family: 'IM Fell DW Pica', serif;
  max-height: 30px;
color: inherit;
    padding: 0;
}
#blogQuickUl{
   display: inline-flex;
    list-style: none;
    width: 90%;
    margin-left: 5%;
    background-color: #878d8458;
}
.blogQuickSelect ul li a {
    font-size: 14px;
  text-decoration: none;
  list-style: none;
   padding: 10px;
    color: black;
   
    max-height: 30px;
   
}
#aBTR{
    color: #000000;
    
    font-weight: 300;
    font-family: 'IM Fell DW Pica', serif;

}
#aBT{
padding-top: 10px;
}
#refBut{
    background-color: rgba(125, 125, 125, 0);
    padding: 5px;
    width: 100px;
    border-radius: 10px;
}

/*blog info*/

#hr2{
 margin-right: 10%;
  background-color: black;
}

#blogInfo{
   margin-left: 10%;
   font-family: 'IM Fell DW Pica', serif;
   font-size: large;
   color: rgb(115, 115, 115);
}
.blogPostList{
    list-style: circle;
    display: flex;
    flex-direction: column;

}
#point{
    font-size: 20px;
}
/*main text*/
#blogBody{
    background-color: rgba(255, 255, 255, 0.632);
}
#blogMain{
    max-width: 90%;
   padding-left: 10%;
   padding-right: 10%;
   padding-bottom: 5%;
   padding-top: 5%;
   font-family: 'Overpass Mono', monospace;
}

#blogImg{
max-width: 60%;
}
/*reference list*/ 

#referenceList ol li a {
    display: flexbox;
    flex-direction: column;
    padding: 1em;
}
#referenceList{
    display: flexbox;
    flex-direction: column;
    background-color: #7f885766;
    border-radius: 10px;
    width: 90%;
    margin-left: 5%;
    padding: 1em;

    font-family: 'Overpass Mono', monospace;
    line-height: 200%;
}

/*buttons*/ 

#buttonNav{
    display: flex;
    justify-content: center;
    align-content: center;
    padding: 1em;
    background-color: none;
    text-decoration: none;
    color: inherit;
}
#buttonNav a{
    text-decoration: none;
    color: black;
}
#buttonNav button{
    margin: 1em;
}

/*////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////*/
/*design*/

#designImg{
    width: 150px;
    
}
#designLinks{
    text-decoration: none;
    font-family: 'IM Fell DW Pica', serif;
    font-style: italic;
    color: inherit;
    
}
#designLinks:hover{
    color:#5c6a55;}

    /*/////////////////////////////////////////////////////////////////////////////////////////DATAVISUALIZATIONS///////////////////////////////////////////////////////////////////////*/
/*data static and interactive*/

.midnightsMain{
    display: flex;
    max-width: 90%;
    background-color: #d0ac7692;
    padding-left: 10%;
    z-index: -1;
    transform: translateY(-120px);
 margin-top: 20px;
    font-family: 'IM Fell DW Pica', serif;
}
#midnightsIntro{
    display: inline-flex;
  width: 90%;
    margin: 0;
    align-items: flex-start;
    justify-content: flex-start;
    padding:none;
}
#midnightsIntroImg{
    transform: translateX(-200px);
    z-index: inherit;
    opacity: 0.9;
}
#midnightsIntroP{
    font-family: 'Overpass Mono', monospace;
    padding: 12px;
    margin-top: 130px;
    line-height: 140%;
    z-index: inherit;
}
#quoteIcon{
    font-size: 16px;
}
#midnightsTooltip{
    font-family: 'IM Fell DW Pica', serif;  
    font-size: large;
    transition-delay: 0.3s;
 
}
#mdntContainer{
    align-self: center;
}
.evermoreMain{
    display: flex;
    max-width: 95%;
    background-color: #dd89559b;
    padding-left: 10%;
    padding-right: 5%;
    margin: 0;
    z-index: -1;
    transform: translateY(-120px);
 margin-top: 20px;
    font-family: 'IM Fell DW Pica', serif;
    height: fit-content;
}
#evermoreIntroP{
    font-family: 'Overpass Mono', monospace;
  
    padding-top: 10%;
    font-size: 18px;
    margin-top: 130px;
    line-height: 120%;
    z-index: inherit;
}
.folkloreMain{
    display: flex;
    max-width: 95%;
    background-color: #828282b1;
    padding-left: 10%;
    padding-right: 5%;
    margin: 0;
    z-index: -1;
    transform: translateY(-120px);
 margin-top: 20px;
    font-family: 'IM Fell DW Pica', serif;
    height: fit-content;
}
#folkloreList{
    font-size: 36px;
    align-items: center;
    justify-content: center;
    background-color: #b9c49500;
  
}
#folkloreButtons{
    background-color: #00000000;
    
    font-size: 36px;
    width: 900px;
    margin: 20px;
    align-self: center;
    transition-delay: 0.3s;


}
#folkloreButtons :hover{
    background-color: #00000000;
    font-size: 40px;
    color: #3f3f3f;
    border: solid #3f3f3f 2px;
    padding-left: 20%;
    transition: 0.3s;

}
#chart1{display: none;} #chart2{display: none;}#chart3{display: none;}#char4{display: none;}
#dataImg{
    width: 150px;
    
}
#dataLinks{
    text-decoration: none;
    font-family: 'IM Fell DW Pica', serif;
    font-style: italic;
    color: inherit;
    
}
#dataLinks:hover{
    color:#5c6a55;

}

    .bar:hover{
        fill:#792713;
    }


    #tooltip{
        position:absolute;
        width: 200px;
        height: auto;
        padding: 10px;
        background-color: #5c6a55;
        box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
    }
    
    #tooltip p{
        margin: 0;
        font-family: 'IM Fell DW Pica', serif;
        font-size: 16px;
        line-height: 20px;

    }
.examMain{
    background-color: #54434a79;
    z-index: -2;
    transform: translateY(-120px);
    padding: 0;
    margin: 0;
    width: 100%;
}
#examWarning{
    max-width: 800px;
    align-self: center;
    font-family: 'IM Fell DW Pica', serif;
    font-size:large;
    color: rgb(121, 19, 19); 
    border: 3px solid rgb(121, 19, 19);
}
#examExplanation{
    font-family: 'Overpass Mono', monospace;
}
#dataArtworkExam{ align-self: center;}

.examSvg :hover{
    border: solid black 1px;
}
.examtooltip{
    font-family: 'IM Fell DW Pica', serif;
    font-size: 20px;
    align-items: center;
    justify-items: center;
    align-content: center;
    border: rgb(107, 16, 16);
    color: rgb(107, 16, 16);
    
}

  /*/////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////////wireframes*/
  #authMain{

    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    justify-content: center;
}
  .wfMain{
   margin-left: 10%;
   margin-right: 10%;
   background-color: rgb(255, 255, 255);
   padding-left: 5%;
   padding-right: 5%;
   border-radius: 3px;
  }

h3{
    font-family: 'IM Fell DW Pica', serif;
    font-style: italic;
    color: black; 
    justify-self: center;
    justify-content: center;
}
h4{
    font-family: 'IM Fell DW Pica', serif;
    justify-self: center;
}
#wfSection{
    display: flex;
    align-content: center;
    align-items: center;
    margin-right: auto;
    margin-left: auto;
}
#wfSection ol li{
    list-style: none;
    
}
#wfA{
    text-decoration: underline;
}
#wfImg{
    max-width: 600px;

}
#wfAn{
    max-block-size: 40%;
    font-family: 'Overpass Mono', monospace;
    color: black;
}
 #wfHR{
    border: 2px solid black;
    background-color: black;
 }

/*//////////////////////////////////////////NEW WIREFRAMES///////////////////////////////////////////////////////*/
.wireframeMain{
    width: 90%;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: black;
    padding-left: 5%;
}

#wireframeCard{
    display: inline-flex;
  background-color: #b1bbab;
}
#wireframeImage{
    max-width: 45%;
    padding: 10px;
   
 
}
#wireframeAnnotations{
    max-width: 50%;
    
}
#wfSmall{
    font-size: 11px;
}
#wireframeSub{

    align-self: center;
    justify-self: center;
}
#wireframeList{
    font-family: 'Overpass Mono', monospace;
}
#wireframeDivider{
    
    
    border: 0;
    height: 1px;
    background: rgb(1, 1, 1);
   
    
}
#oldWireframes{
  display: inline-flex;
    background-color: black;
  
}
#wfIframe{
    padding-left: 10%;
}
#oldTitle{
color: white;
writing-mode: vertical-lr;
}
#oldP{
    font-family: 'Overpass Mono', monospace;
    color: white;
    padding: 0;
    margin: 0;
    max-width: 300px;

}
.wireframeP{
    font-family: 'Overpass Mono', monospace;
    align-self: center;
    justify-self: center;
}

#oldPS{
    font-family: 'Overpass Mono', monospace;
    color: white;
    padding-left: 20%;
}
#oldContent{
    background-color: black;
    
}
#oldContent :hover{
    background-color: black;
}
#oldWireframesSlide{
    display: inline-flex;
    
}
#oldWireframesSlide{
    display: grid; 
  grid-auto-flow: column dense; 
  grid-template-columns: max-content max-content max-content; 
  grid-template-rows: max-content max-content max-content; 
  gap: 10px 10px; 
  grid-template-areas: 
    "wfdataartwork wfhome wfselection"
    "wfdataartwork wfselection2 blogtemplate"
    "wfgrid datawf blogtemplate"; 
  justify-content: center; 
  align-content: center; 
  justify-items: center; 
  align-items: center; 
    background-color: black;
    padding-top: 20px;
 
    
}


#wfdataartwork { grid-area: wfdataartwork; max-width: 500px;  }
#wfhome { grid-area: wfhome;  max-width: 500px; ;  }
#wfselection { grid-area: wfselection; max-width: 500px;   }
#wfselection2 { grid-area: wfselection2; max-width: 500px;   }
#blogtemplate { grid-area: blogtemplate; max-width: 500px;   }
#datawf { grid-area: datawf; max-width: 500px; }
#wfgrid { grid-area: wfgrid; max-width: 500px;  }
#hideOld{
    display: none;
}

#expandIcon{
    padding-left: 10px;
    transition-delay: 0.2s;
}
#expandIcon:hover{
   color: #414c30c1;
   transition: 0.5s;
   
}
/*design guide */
  .designguideMain{
    display: flex;
    flex-direction: column;
    align-content: center;
    justify-content: center;
    background-color: rgba(252, 252, 252, 0.494);
    max-width: 90%;
    margin-left: 5%;
    box-shadow: outset;
  }
  #dgImg{
    max-width: 80%;
    padding-left: 10%;
  }
  #dgTitle{
    align-self: center;
    justify-self: center;
    color: black;
  }
  #dgAn{
    max-width: 80%;
    padding-left: 10%;
    font-family: 'Overpass Mono', monospace;
    color: black;
  }
  @keyframes fade {
    from {
      opacity: 0.4;
    }
    to {
      opacity: 1;
    }
  }




/*//////////////    MEDIA QUERIES ////////////////////////////////////////////////////////////////////////////////////////////// /////////////*/

@media only screen and (max-width:768px ) { /*IPAD MINI//////////////////////////////////////////////////////////////////////////////*/
   
.navTitle{
    position: relative;
margin-top: 10%;
    padding-left: 5%;
}
.liNav{
    padding-left: 15%;
    padding-right: 15%;
}
.aNav:hover{
    background-color: black;
    color: white;
    text-decoration: none;
}
    nav{
        position: absolute;
        left: 60%;
    }
    #hr1{ display: none;}
    article{
max-width: 90%;
padding-left: 5%;
        border: solid black;
        
       
        margin-bottom: 5px;
    }
    #introImg{
        max-height: 300px;
    }
    button{
        padding: 5px;
    }
    #homeIntro{
        font-size: medium;
    }
    footer{
       transform: translateY(-20%) ;
      
    }
    .blogmain{
display: flex;
align-content: center;
justify-content: center;
    }
    #blogTitle{
        padding-left: 20%;
    }
    #referenceList{
        max-width: 80;
        padding: 10px;
       margin: 0;
       align-self: center;
       justify-self: center;
    }
    #figmaPrototype{
        width: 600px;
    }
    .wfMain{
        margin: 0;
    }
    #wfImg{
        max-width: 500px;
    }
    #wfSection{
        flex-direction: column;
    }
    #wireframeImage{
        max-width: 600px;
     
    }
    #wireframeAnnotations{
        min-width: 500px;
        padding-left: 5%;
        
        
    }
    #wireframeCard{
        max-width: 90%;
        display: flex;
        flex-wrap: wrap;
        padding-left: 10%;

    }
    .wireframeMain{
        width: 100%;
        display: flex;
        flex-direction: row;
      
        background-color: black;
        padding-left: 10%;}
       
        
          #oldContent{
              background-color: black;
              display: none;
              
          }
         
          #oldWireframesSlide{
              display: grid; 
            grid-auto-flow: column dense; 
            grid-template-columns: max-content max-content max-content; 
            grid-template-rows: max-content max-content max-content; 
            gap: 0px 0px; 
            grid-template-areas: 
              "wfdataartwork wfhome wfselection"
              "wfdataartwork wfselection2 blogtemplate"
              "wfgrid datawf blogtemplate"; 
            justify-content: center; 
            align-content: center; 
            justify-items: center; 
            align-items: center; 
              background-color: black;
              padding-top: 10px;
           
              
          }
          
          
          #wfdataartwork { grid-area: wfdataartwork; max-width: 250px;  }
          #wfhome { grid-area: wfhome;  max-width: 250px; }
          #wfselection { grid-area: wfselection; max-width: 250px;  }
          #wfselection2 { grid-area: wfselection2; max-width: 250px;   }
          #blogtemplate { grid-area: blogtemplate; max-width: 250px;   }
          #datawf { grid-area: datawf; max-width: 250px; }
          #wfgrid { grid-area: wfgrid; max-width: 250px;  }
          .midnightsMain{
            display: flex;
            max-width: 100%;
            background-color: #d0ac7692;
            padding-left: 0;
            z-index: -1;
            transform: translateY(-120px);
         margin-top: 20px;
            font-family: 'IM Fell DW Pica', serif;}
            #midnightsIntroImg{
                transform: translateX(-50px);
                z-index: inherit;
                opacity: 0.9;
                max-width: 50%;
            }
            #midnightsIntroP{
                font-family: 'Overpass Mono', monospace;
                padding: 0;
                margin-top: 120px;
                line-height: 100%;
                z-index: inherit;
                font-size: 11px;}
         body{
            max-width: 100%;
            overflow-x: hidden;
         }
         #midnightsTooltip{
            font-family: 'IM Fell DW Pica', serif;  
            font-size: large;
            max-width: 90%;
            transition-delay: 0.4s;
            margin-left: 70px;
            transform: translateY(-100px);
         
        }
    

        .evermoreMain{
            display: flex;
            max-width: 100%;
            background-color: #dd89559b;
            margin: 0;
            z-index: -1;
            transform: translateY(-100px);
         margin-top: 20px;
            font-family: 'IM Fell DW Pica', serif;
            
        }
        #evermoreIntroP{
            font-family: 'Overpass Mono', monospace;
          
            
            font-size: 12px;
            margin-top: 80px;
            line-height: 100%;
            z-index: inherit;
        }

        .folkloreMain{
            display: flex;
            max-width: 95%;
            background-color: #828282b1;
            padding-left: 10%;
            padding-right: 5%;
            margin: 0;
            z-index: -1;
            transform: translateY(-80px);
         margin-top: 20px;
            font-family: 'IM Fell DW Pica', serif;
           
        }
        #folkloreList{
            font-size: 24px;
            align-items: center;
            justify-content: center;
            background-color: #b9c49500;
          list-style: none;
        }
        #folkloreButtons{
            background-color: #00000000;
            
            font-size: 26px;
            width: 600px;
            margin: 0px;
            align-self: center;
        
        
        }
}
/*IPHONE 12 media queriesssssssss/////////////////////////////////////////////////////////////////////////////////////////*/
@media only screen and (max-width:400px ){
    .navTitle{
        position: relative;
    margin-top: 20%;
        padding-left: 45%;
    }
    .liNav{
        padding-left: 15%;
        padding-right: 15%;
    }
    .aNav:hover{
        background-color: black;
        color: white;
        text-decoration: none;
    }
        nav{
            position: absolute;
            left: 40%;
        }
        #hr1{ display: none;}
        article{
    min-width: 500px;
   
            border: solid black;
            
           
            margin-bottom: 5px;
        }
        #login{
            display: flex;
            align-items: center;
            justify-content: center;
            transform: translateX(30px);
            position: absolute;
        }
        #introImg{
            max-height: 300px;
        
        }
        button{
            padding: 5px;
        }
        #homeIntro{
            font-size: medium;
        }
        footer{
           transform: translateY(800px) ;
          padding-left: 40px;
        }
        .blogmain{
    display: flex;
    align-content: center;
    justify-content: center;
    overflow-y: hidden;
        }
        #blogBody{
          width: 100%;
          min-width: 300px;
         align-content: center;
         transform: translateX(100px);
        }
        #blogTitle{
            padding-left: 10%;
        }
        #referenceList{
            max-width: 80;
            padding: 10px;
           margin: 0;
           align-self: center;
           justify-self: center
        }
        #figmaPrototype{
            width: 600px;
        }
        .wfMain{
           width: 380px;
        }
        #wfImg{
            max-width: 500px;
        }
        #wfSection{
            flex-direction: column;
        }
        #wireframeImage{
            max-width: 500px;
         
        }
        #wireframeAnnotations{
            min-width: 500px;
            padding-left: 5%;
            
            
        }
        #wireframeCard{
            min-width: 100%;
            display: flex;
            flex-wrap: wrap;
            
            background-color: #ffffff00;
    
        }
        .wireframeMain{
            width: 100%;
            display: flex;
            flex-direction: row;
          
            background-color: black;
            }
           
            
              #oldContent{
                  background-color: black;
                  display: none;
                  
              }
             
              #oldWireframesSlide{
                  display: grid; 
                grid-auto-flow: column dense; 
                grid-template-columns: max-content max-content max-content; 
                grid-template-rows: max-content max-content max-content; 
                gap: 0px 0px; 
                grid-template-areas: 
                  "wfdataartwork wfhome wfselection"
                  "wfdataartwork wfselection2 blogtemplate"
                  "wfgrid datawf blogtemplate"; 
                justify-content: center; 
                align-content: center; 
                justify-items: center; 
                align-items: center; 
                  background-color: black;
                  padding-top: 10px;
               transform: translateX(30px);
                  
              }
              
              
              #wfdataartwork { grid-area: wfdataartwork; max-width: 200px;  }
              #wfhome { grid-area: wfhome;  max-width: 200px; }
              #wfselection { grid-area: wfselection; max-width: 200px;  }
              #wfselection2 { grid-area: wfselection2; max-width: 200px;   }
              #blogtemplate { grid-area: blogtemplate; max-width: 200px;   }
              #datawf { grid-area: datawf; max-width: 200px; }
              #wfgrid { grid-area: wfgrid; max-width: 200px;  }
              .midnightsMain{
                display: flex;
                max-width: 100%;
                background-color: #d0ac7692;
                padding-left: 0;
                z-index: -1;
                transform: translateY(-120px);
             margin-top: 20px;
                font-family: 'IM Fell DW Pica', serif;}
                #midnightsIntroImg{
                    transform: translateX(-50px);
                    z-index: inherit;
                    opacity: 0.9;
                    max-width: 50%;
                    display: none;
                }
                #midnightsIntroP{
                    font-family: 'Overpass Mono', monospace;
                    padding: 0;
                    margin-top: 120px;
                    line-height: 100%;
                    z-index: inherit;
                    font-size: 11px;}
             body{
                max-width: 100%;
                overflow-x: hidden;
             }
             #midnightsTooltip{
                font-family: 'IM Fell DW Pica', serif;  
                font-size: large;
                max-width: 90%;
                transition-delay: 0.4s;
                margin-left: 70px;
                transform: translateY(-100px);
             
            }
        
    
            .evermoreMain{
                display: flex;
                max-width: 100%;
                background-color: #dd89559b;
                margin: 0;
                z-index: -1;
                transform: translateY(-100px);
             margin-top: 20px;
                font-family: 'IM Fell DW Pica', serif;
                
            }
            #evermoreIntroP{
                font-family: 'Overpass Mono', monospace;
              
                
                font-size: 12px;
                margin-top: 80px;
                line-height: 100%;
                z-index: inherit;
            }
    
            .folkloreMain{
                display: flex;
               
                background-color: #828282b1;
                
               align-items: flex-end;
               align-self: center;
               justify-self: center;
              margin-left: 15%;
                z-index: -1;
                transform: translateY(-80px);
             margin-top: 20px;
                font-family: 'IM Fell DW Pica', serif;
               
            }
            #folkloreList{
                font-size: 16px;
                align-items: center;
                justify-content: center;
                background-color: #b9c49500;
              list-style: none;
            }
            #folkloreButtons{
                background-color: #00000000;
                
                font-size: 16px;
                width: 300px;
                margin: 0px;
                align-self: center;
            
          
            }
            #chart1{
                width: 805;
            }
}