/* if you want to add this through js https://www.pexels.com/photo/red-fire-illustration-97494/ */

/* Header CSS (Header, NavBar) */ 

#mainHeaderImage {
   text-align: center;
   margin-right: 10px;
   background-image: url(../images/mainHeader.jpg);
   width: 100%;
   background-size:cover;
   height:275px;
  

}

#mainTitle {
   font-size: 89px;
   font-family: 'Cheboygan', sans-serif;
   background: -webkit-linear-gradient(#261b04, #d83f03, #7d2800, #524e4e, #090101);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent; 
   float: right; 
   margin: 50px 250px 50px 50px;
  
   z-index: 1;
   position:relative;
}
.menu-text{
   font-family: 'Cheboygan', sans-serif;
   background: -webkit-linear-gradient(#261b04, #d83f03, #7d2800, #524e4e, #090101);
   -webkit-background-clip: text;
   -webkit-text-fill-color: transparent;                                          
}

/* Contributors CSS */

#contributors {
   margin: 100px;
}

#contributors h3 {
   font-size: 28px;
   margin-bottom: 50px;
}

#contributors img {
   margin-left: 150px;
}
#heather, #justin, #megan, #mike {
   margin-top: 50px;
   margin-bottom: 150px;
   
  
}


/* Project CSS */
#projectContainer{
   width: 100%;
}

#conceptContainer, #processContainer, #storyContainer, #futureContainer{
   width: 70%;
   margin-left:10%;
}

#projectContainer h2 {
   font-size: 2em;
   color:rgb(36, 34, 34);
   font-weight: bolder;
   text-decoration: underline;
   margin-left: -10%;
   margin-bottom: 25px;
}

#projectContainer h3 {
   font-size: 1.3em;
   font-weight:bold;
   margin-bottom:10px;
}

#projectContainer p {
   margin-bottom: 25px;
}

#project {
   text-align: center;
   font-size: 3em;
   font-family: 'Cheboygan', sans-serif;
   background: radial-gradient( #0a0404, #711818, #d1730b);
   margin: 30px 20px 50px 20px;
}




hr {
   margin-top: 50px;
   margin-bottom: 50px;
   background-color: rgb(104, 103, 103);
}


/* Media Quries */

@media screen and (max-width: 1264px){
   #mainTitle {
      font-size: 60px;
      margin: 10% 10% 10% 10%;
   }
}

@media screen and (max-width: 725px) {
   #mainTitle {
      font-size: 28px;
      margin: 10% 10% 10% 10%;
   }

   #mainHeaderImage {
      height:125px;
      width:100%;
     
   
   }
}