.body{
    background-color: var(--background);
    
}
.projects_container{
    /* background-color: var(--red); */
    margin: 0px auto 0px auto;
    width: 60vw;
    overflow: auto;
    padding: 0px 15px;

}
.projects_container h1{
    margin: 15px auto;
    text-align: center;
    color: var(--primary_text);
}


.project{
   background-color: var(--main_containers);
    overflow: hidden;
    padding: 30px;
    border-radius: 50px;
    margin: 30px 0px;
    display: flex;
}

.project img{
    padding: 10px;
    border-radius: 20px;
    width: 300px;

}
.project h3{
    color: var(--primary_text);
    font-size: 25px;
}
.project p{
    color: var(--primary_text);
    font-size: 20px;
    
}
/* .reference-div{
    box-sizing: content-box;
} */
.project text_container{
    overflow-x:auto;
    overflow-y: hidden;
}
.projects_container h2{
    margin: 15px 15px;
    text-align: left;
    font-size: 25px;
    color: var(--primary_text);
}
.projects_container ul{
   color: var(--primary_text); 
   font-size: 20px;
   
}


.sidebar-box {
  flex: 2;
  position: relative;
  /* overflow: hidden; */
}
.sidebar-box .read-more { 
  position: absolute; 
  bottom: 0; 
  left: 0;
  width: 100%; 
  text-align: center; 
  margin: 0; padding: 30px 0; 
	
  /* "transparent" only works here because == rgba(0,0,0,0) */
  background-image: linear-gradient(to bottom, transparent, var(--main_containers));
}
.load_more {
  text-decoration: none;
  background-color: var(--sidebar_containers);
  color: var(--primary_text);
  padding: 2px 6px 2px 6px;
  border-radius: 10px;
  font-size: 20px;
  display: block;
  width: 60%;
  margin: 0 auto; 
  text-align: center;
  
}
.load_more:hover{
    background-color: var(--blue);
    cursor:pointer;
}
.load_more.hidden{
    display: none;
}
.content {
  overflow: hidden;
  transition: max-height 0.4s ease;
}
.content.collapsed.nav {
  max-height: 440px;
}
.content.collapsed.claw {
  max-height: 515px;
}
.content.collapsed.maze {
  max-height: 425px;
}
.content.collapsed.jaws {
  max-height: 400px;
}
.content.nav:not(.collapsed) {
  max-height: 1200px; /* adjust as needed */
  
}
.content.claw:not(.collapsed) {
  max-height: 1000px; /* adjust as needed */
  
}
.additional_article{
    margin: 10px auto;
    text-align: center;
    border-radius: 15px;
    /* height:30px; */
    font-size: 20px;
    background-color: var(--sidebar_containers);
    color: var(--primary_text);
    text-decoration: none;
    width: 100%;
    display: block;
}
.additional_article:hover{
    background-color: var(--blue);
}