*{
    font-family: 'Philosopher', sans-serif !important;
}
.projects{
    width:1200px;
    height:700px;
    background-color: #438BCF;
    margin: auto;
   padding-top: 30px;
   padding-bottom:10px ;
   justify-content:flex-start;
   box-shadow:  8px 8px grey;
}
#project-page-ctn{
    width: 800px;
    height: auto;
    margin-top: 80px;
}
#proj-toggle-switch{
    max-height: 20px;
    margin-top: 10px;
}
.projects img{
    width: 400px;
    height:250px ;
    border: 2px solid black;
}
.project1{
   display: flex;
   flex-direction: column;
   margin-top: 50px;
   align-items: center;
   margin-bottom: 30px;
}
.project2{
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-bottom: 25px;
}
.project3{
  display: flex;
  flex-direction: column;
  align-items: center;
}
.project4{

  display: flex;
  flex-direction: column;
  align-items: center;
}
.project5{

  display: flex;
  flex-direction: column;
  align-items: center;
}
.projects a{
    margin: 20px;
   border-radius: 10%;
   width: 160px;
   height: 30px;
   background-color: #cf8743;
   text-align: center;
   padding-top: 15px;
   text-decoration: none;
   
}
.projects button{
   margin: 20px 0; 
   background-color: #cf8743;
}
.projects h1{
   font-size: 35px;
   font-weight: 800px;
   text-align: center;
   margin: auto;
}
.projects h3{
   font-size:20px ;
}


@media all and (max-width: 500px){
    #proj-header{
        display: flex;
        margin-bottom: 40px;
        justify-content: center;
        align-items: center;
        
    }
    
    body{
        max-width: fit-content;
        max-height: fit-content;
        padding: 10px;
       
    }
    html{
        max-width: 500px;
    }

}
@media all and (max-width: 1000px){
   
    #proj-header{
        display: flex;
        margin-bottom: 25px;
        justify-content: center;
        align-items: center;
        height: 350px;
        margin-left: 50px;
    } 
    #proj-header h1{
        font-size: 35px;
        font-weight: 800px;
        position: relative;
        left: 250px;
        
     }
     
    #project-page-ctn {
        width: 700px;
        height: 2200px;
        margin-top: 80px;
        margin: 60px auto;
    }
}