@charset "utf-8";
/* CSS Document */

body {
	margin-left: 10px; 
	padding: 0px;
	
	background-Color: #E6#6FA;
background-color: midnightblue;    
    
}



.page {
  
  display:grid;
  grid-template-columns: 30vw auto;
  font-family: 'Exo 2', sans-serif;
  font-size: 20px;
  grid-column-start: 2;
  
  color:MidnightBlue;
  margin-right: -8px;
  margin-left: 10px;
  
  
}



#navbar {
  position: fixed; 
    
    /* overflow: scroll; */background-color: midnightblue;
  overflow: scroll;
  height: 100vh;
  width: 30vw;
  color: purple;
  font-family: 'Exo 2', sans-serif;
  font-size: 20px;
  text-decoration:none;
  background-color:MidnightBlue;
  margin-top: -10px;
  margin-bottom: -40px;
  margin-left: -10px;
  margin-right: 10px;
  padding-top: 10px;
  padding-left: 15px;
  font-size: 20px;
  
    
  

  }
  #navbar, a {
    text-decoration:none;
    color: AliceBlue;
    
  }
  #navbar a:hover {
    text-decoration:none;
    color: MediumOrchid;
  }
  
  .navheader {
  font-size: 30px;
    background-color: MidnightBlue;
}
  
nav {
    overflow: scroll;
}


.main {
  grid-column-start:2;
  
    

}

.main-section {
    margin-left:40px;
}


.main a {
  color:MidnightBlue;
  
}

.main a:hover {
  color:DarkViolet;
  
}


.headerMain {
  
  height:200px;
  background-color:MidnightBlue;
  color:Turquoise;
  font-size: 50px;
  margin-top: -10px;
  padding-top: 8px;
  padding-left: 10px;
  text-align: center;
 
  
}

.section img {
	float: right;
	
}


	
}
figcaption {
  position:absolute;
  background-color: rgba(0,0,0,.5);
  margin-left: 30px;
  margin-top: -28px;
  width: 300px;
  color: Gainsboro;
  z-index:1;
}

#souls {
  position:absolute;
  background-color: rgba(255, 160, 122,.4);
  margin-left: 30px;
  margin-top: -58px;
  width: 300px;
  color: RoyalBlue;
  z-index:1;
}

#sketch {
  position:absolute;
  background-color: rgba(240,248,255,.5);
  
  margin-left: 30px;
  margin-top: -58px;
  width: 375px;
  color: Silver;
  z-index:1;
}

#bestBand {
  position:absolute;
  background-color: rgba(240,248,255,.5);
  
  margin-left: 84px;
  margin-top: -28px;
  width: 200px;
  color: rgb(51, 50, 48);
  z-index:1;
}

#journal {
  position:absolute;
  background-color: rgba(240,248,255,.5);
  
  margin-left: 82px;
  margin-top: -58px;
  width: 375px;
  color: Silver;
  z-index:1;
}



/*
.banner {
  height:200px;
  background-color:MidnightBlue;
  color:Turquoise;
  font-size: 50px;
  margin-top: -10px;
  padding-top: 8px;
  padding-left: 10px;
  text-align: center;
  
}


.headerMain h1 {
  font-size: 40px;
  margin-top:8px;
}

.headerMain h2 {
  color: Salmon;
  font-size: 30px;
  margin-top: -15px;
  
}

.headerMain h3 {
  color: MediumAquamarine;
  font-size: 20px;
  margin-bottom: -10px;
  
}
*/

#Introduction {
  margin-left: 15px;
  padding-top: 10px;
  
  
}

#teacher {
  margin-left: 15px;
  padding-top: 10px;
  width: 50%
  
  
}

#References {
  margin-left: 15px;
  padding-top: 10px;
  
  
}

#Code_Editors {
  margin-left: 15px;
  padding-top: 10px;
  
  
}

#The_Tribute_Project {
  margin-left: 15px;
  padding-top: 10px;
  
  
}

#HTML {
  margin-left: 15px;
  padding-top: 10px;
  
  
}

#CSS {
  margin-left: 15px;
  padding-top: 10px;
  
  
}




.mainBackground {
  background-color:Lavender;
  margin-top: -28px;
  padding-top: 25px;
}

.code {
  background-color: rgba(11, 120, 130, 0.3);
}

.indent-1 {
  margin-left: 1em;
}

.indent-2 {
  margin-left: 2em;
}

#nav-link_introduction {
  font-size: 25px;
  margin-top: 20px;
  color: DarkSlateblue;
}
/*
@media (max-width: 450px;) { 
          #navbar {
  position: static;
  width: 25vw;
  }
  .page {
  
  display:grid;
  grid-template-columns: 25vw auto;
  font-family: 'Exo 2', sans-serif;
  font-size: 20px;
  grid-column-start: 2;
  }
}

*/

@media (max-width: 750px;) { 
  
  .page {
    grid-template-columns: 1fr;
    griad-template-areas: "navBar" "main";
    
  }
  
  #navBar {
    position:inherit;
  }
  
  
}
  
iframe {
  margin-left: 30px;
}

h2 {
  margin-left: 18px;
}

  #financial {
  position:absolute;
  background-color: rgba(240,248,255,.5);
  
  margin-left: 84px;
  margin-top: 0px;
  width: 480px;
  color: black;
  z-index:1;
  
   
}

#cat {
  position:absolute;
  background-color: rgba(240,248,255,.5);
  
  margin-left: 84px;
  margin-top: 0px;
  width: 480px;
  color: black;
  z-index:1;
  
   
}

#byline {
  font-weight: normal
  margin-top: 0px;
}

#intent {
  width:50%;
}



#projects {
  font-size: 2em;
}

#tools {
  width: 50%;
}

#community {
  width: 50%;
}


.hyperlink {
    text-decoration: underline;
}

.projects {
    margin-left: 10px;
}


nav {
    overflow: scroll;
}