/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */



/*header*/
  #header_homepage {
     /*sets position and dimensions of header*/
      position: fixed; /*makes the header stay in the same place even when scrolling*/
      top: 0; /*places the header at 0 pixels from the top edge of the viewport*/
      left: 0; /*places the header 0 pixels from the left edge of the viewport*/
      right: 0; /*places the header 0 pixels from the right edge of the viewport*/
      height: 80px; /*height of the header is 80 pixels*/
            
    /*color of header*/
      background: #000; /*the background color is black*/
      color: #fff; /*the text color is white*/
            
    /*overlapping problem solving*/
      z-index: 3; /*gives the header priority over elements with lower z-index meaning it sits on top of them if it would overlap*/
            
    /*aligns box (which the title is inside of) in center*/
        display: flex; /*makes the header a flex container meaning its immediate children become flex items; enables flexible, easy horizontal or vertical layout*/ 
      align-items: center; /*vertically centers the flex items*/
      justify-content: center; /*horizontally centers the flex items*/
  }
        
  #header_homepage h1 {
    /*aligns title*/
      margin: 0; /*removes default outer spacing around the text so it doesn't push other elements away*/
      font-size: 24px; /*font size of the headers text is 24 pixels*/
      text-align: center; /*aligns the text of the header in the center*/
      line-height: 1; /*sets the line height to 1 * the font size which causes tight single line spacing*/
  }
        
/*sidebar menu*/
  .sidenav {
    /*sets position and dimensions of sidebar*/
      position: fixed; /*makes the sidebar stay in the same place even when scrolling*/
      top: 80px; /*places the sidebar 80 pixels below the top edge of the viewport, so it sits belown the header and doesn't overlap*/
      left: 0; /*places the sidebar 0 pixels from the left edge of the viewport*/
      width: 160px; /*width of sidebar is 160 pixels*/
      height: calc(100% - 80px); /*height of sidebar is full viewport height minus 80 pixels, meaning it fills full space below header*/
      padding-top: 20px; /*adds 20 pixels of inner space at the top, meaning it pushes the content down*/
          
    /*color of sidebar*/
      background-color: #000; /*the background color is black*/
      
    /*overlapping problem solving*/
      z-index: 2; /*gives the sidebar priority over elements with lower z-index meaning it sits on top of them if it would overlap, although it sits below the header if they would overlap*/
  }
        
/*navigation menu links*/
  .sidenav a {
    padding: 6px 8px 6px 16px; /*sets the links space to the top to 6 pixels, from the right to 8 pixels, from the bottom to 6 pixels, from the left to 16 pixels (which pushes the link inwards)*/
    text-decoration: none; /*removes the underlines from the link which normally are there*/
    color: #FFF; /*sets the links color to white*/
    display: block; /*turns the links each into a block-level element so it fills the sidebar width, accepts vertical padding and stacks vertically*/ 
  }
  
/* When you mouse over the navigation links, change their color */
  .sidenav a:hover {
    color: #00ff00;
  }
        
/*style page content*/
  .main {
    margin-left: 160px; /*sets a margin for the page content to the left of 160 pixels*/
    margin-top: 80px; /* sets a margin for the page content to the top of 80 pixels, so it sits below the header*/
    padding: 10px; /*sets a padding to the top so the text of the page content starts 10 pixels lower*/
  }
        
/* On smaller screens, where height is less than 450px, change the style of the sidebar (less padding and a smaller font size) */
  @media screen and (max-height: 450px) { /*when the viewport side is 450 pixels or less*/
    .sidenav {padding-top: 15px;} /*reduces top padding of sidebar to 15 pixels so its content fits better in the shorter viewport*/ 
    .sidenav a {font-size: 18px;} /*decreases link text size to 18 pixels to save vertical space and avoid overflow*/
  }
  
body {
  background-color: white;
  color: black;
  font-family: Verdana;

}