body { 
  background-color: #dae1ed; 
  font-family: sans-serif;
  padding: 50px;
 

   
  
  
} 

.main-wrapper {
  display: flex;
  justify-content: center;
  align-items: center;
  
  
 
}



.section {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 1000px;
  height: 800px;
  border-style: solid;
  border-color: #83878f;
  background-color: white;
  border-width: 1px;
   padding: 20px;
   

} 

.left-wrapper {
 display: flex;
 flex-direction: column;
 margin-bottom: auto;
  
}


.top-left {
 
 display: flex;
 flex-direction: column;
 width: 200px;
 height: 400px;
 border-style: solid;
 border-color: #83878f;
 background-color: white;
 border-width: 1px;
 margin-right: auto;
 margin-bottom: auto;
  
}

.top-left h4 {
 
 display: block;
 font-family: sans-serif;
 color: white;
 background-color: #9d9fa3;
 text-align: right;
 margin-bottom: auto;
 margin-top: 0;
 margin: 0;
 padding: 2px;
 padding-right: 10px;
 
 
}


.top-left a {
 
display: flex;
flex-direction: column;
padding: 10px;
padding-bottom: 0;

 
}


.middle-wrapper {
 
 display: flex;
 justify-content: center;
 align-items: center;
 padding-left: 10px;
 margin-bottom: auto;
  
  
}




.middle {
 
 display: flex;
 flex-direction: column;
 border-style: solid;
 border-color: #83878f;
 background-color: white;
 width: 800px;
 height: 800px;
 border-width: 1px;

 
}

.middle h4 {
  
  display: block;
  color: white;
  font-family: sans-serif;
 
   background: linear-gradient(15deg, #9d9fa3, #dfe2e8);
  text-align: center;
  margin-top: 0;
   padding: 2px;
  
  
}



.top-left a {
 color: black;
 font-family: sans-serif;
 text-decoration: none; 
  
}




.Gal-links a {
  
 display: flex;
 flex-direction: column;
 padding: 20px;
  
  
}


.Gal-links a {
  
 display: flex;
 flex-direction: column;
 color: black;
 font-family: sans-serif;
 text-decoration: none;
  
  
}