/* Author: Julien Stanley*/

/* body*/
body {
    font: 16px/1.6 Arial, sans-serif," Helvetica";
    color: rgb(1, 1, 1);
    background-color: hsl(210, 50%, 98%);
    background: hsl(210,40%,98%);
  }
  
  /* Headings & text */
  h1 { 
    font-size: 32px; 
    margin-bottom: 8px; 
    text-align: center;
    color:hsl(460, 100%, 30%);
  }
  h2 { 
    font-size: 20px; 
    color: rgb(0, 128, 192); 
    margin: 16px 0 8px; 
  }
  h3 { 
    font-size: 20px; 
    color: rgb(0, 128, 192); 
    margin: 16px 0 8px; 
  }
  p  { 
    margin-left: 8px ;
    margin-top: 0px;
    margin-bottom:0px;
    margin-right:8px;
  }
  
  
  /* Links + pseudo-classes */
  a { 
    color: blue; 
    text-decoration: none; 
  }
  a:hover { 
    color: hsl(200, 80%, 40%); 
    text-decoration:none; 
    background-color: rgb(98, 200, 147);
  }
  a:visited { 
    color: purple; 
  }
  
  /* Figures */
  figure {
    border: 2px solid rgb(200,200,200);
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0,0,0,0.4);/* subtle shadow */
    background: white;
  }
  figure img {
    width: 100%;
    transition: transform 0.3s;
  }
  figure img:hover {
    transform: scale(1.05);
  }
  figcaption {
    background: hsl(0, 0%, 95%);
    font-size: 14px;
    text-align: center;
    padding: 4px;
  }
  
  /* Card styling for projects */
  .card {
    background: white;
    border: 1px solid rgb(220,220,220);
    border-radius: 8px;
    padding: 16px;
    box-shadow: 0 6px 18px rgba(0,0,0,0.1);
  }
/* nav block */

#nav {
  background: transparent;
  border-bottom: 1px solid rgb(230,230,230); /* soft background */
  padding: 8px;
  text-align: center;  /* center the links */
}

/* nav links */
#nav a {
  display: inline-block;      /* line them up horizontally */
  margin: 0 15px;             /* space between links */
  text-decoration: none;      
  color: blue;
  font-weight: bold;
}

/* hover state pseudo-class + transform  */
#nav a:hover {
  color: rgb(0, 100, 200);
  transform: scale(1.1);
  transition: transform 0.2s;
}


footer{
  text-align: center;
  font-size: 14px;
  color: rgb(100, 100, 100);
  margin: 16px 0;
  padding: 8px;
  border-top: 1px solid rgb(200,200,200);
}
/* Boxes for the two columns on the home page  */
.home#content,
.home#sidebar {
  background: rgb(255, 255, 255);
  border: 1px solid rgb(220, 220, 220);
  border-radius: 10px;
  box-shadow: 0 8px 20px rgba(0, 0, 0, 0.08);
  padding: 20px;
}