body {
    font-family: 'Montserrat', sans-serif;
  }
  
  h1 {
    font-family: 'Climate Crisis', cursive;
    color: #b9fc00;
  }
  
  h2{
    font-family: 'Lexend Mega', sans-serif;
    color: #b9fc00;
  }
  
  
  
  ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: #333;
  }
  
  li {
    float: left;
  }
  
  li a {
    display: block;
    color: white;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
  }
  
  
  a:link {
    text-decoration: none;
  }
  
  a:visited {
    text-decoration: none;
    color: gray
  }
  
  a:hover {
    text-decoration: underline;
  }
  
  a:active {
    text-decoration: underline;
    color: #b9fc00;
  }
  
  footer {
    background-color: #797979;
    padding: 50px;
    text-align: center;
    font-size: .8em;
    color: white;
  }
  
  .banner {
  background-color: #242325;
  color: white;
  width: 100%;
  padding:160px 0 170px 50%;
  text-align: left;
  
  }
  
  .banner p {
    width: 700px
  }
  
  .right {
    width: 1000px;
    background-color: #242325;
    color: white;
    padding: 40px;
    margin-bottom: 300px;
    margin-top: 100px;
    margin-left: 100px
  }
  

  
  

  
  .commission {
      background-color: #242325;
    width: 100;
    padding:160px 0;
  text-align: center;
    padding: 100px;
    
    
  }
  
  .commission p {
    color: white;
  }
  
  .info {
    margin-left: 150px;
    margin-top: 100px;
    background-color: #242325;
    margin-right: 1200px;
    padding: 100px;
    margin-bottom: 50px;
  }
  
  .info p {
    color: white
  }
  
  .info h3 {
    color: #b9fc00; 
  }
  .price p {
    color: #b9fc00;
    position: absolute;
    margin-left: 350px;
    margin-top: -40px
  }
  
  .info ul {
    background-color: #242325;
  }
  
  .info li {
    float:none;
    color: white;
    background-color: #242325;
  }
    
  
  .info2 {
    margin-left: 150px;
    margin-top: 100px;
    background-color: #242325;
    margin-right: 600px;
    padding: 100px;
    margin-bottom: 50px;
  }
  
  .info2 p {
    color: white
  }
  
  .info2 h3 {
    color: #b9fc00; 
  }
  .timeline {
    color: #b9fc00;
    text-align: right;
  
  }
  
  .info2 ul {
    background-color: #242325;
  }
  
  .info2 li {
    float:none;
    color: white;
    background-color: #242325;
  }
  
  .portphoto img {
    position: absolute;
    margin-left: 600px;
    margin-top: -50px
     }
  
  .portphoto2 {
    position: absolute;
    margin-left: 300px;
    scale: 50%
    
  }
  
  .portphoto3 {
    position: absolute;
      scale: 80%;
    margin-left: 600px;
    
  }

 /* tried alot to get all the photos aligned in css for the portfolio page but could 
 not get it to work with my current understanding and just wanted to get done with this 
 final project. */