/* --------- Navbar --------- */

.navBar {
 position: fixed;
 top: 0;
 left: 0;
 height: 100%;
 width: 200px;
 background-color: hsl(0, 0%, 25%);
 border-radius: 7px;
 border-right: 2px solid; 
 border-color: red;
}

.navBar a {
 color: white;
 text-decoration: none;
 padding: 15px;
 display: block;
 width: auto;
 font-size: 20px;
 text-align: center;
}

.navBar ul {
 list-style-type: none;
 padding: 0;
 margin: 0;
 display: flex;
 flex-direction: column;
 align-items: center;
}

.navBar a:hover {
 text-decoration: underline;
 color: hsl(207.69deg 69.19% 59.39%);
}

#logo {
padding: 0px;
margin: 15px;
}

#navFooter {
 margin-top: 540px; 
 color: white;
 text-decoration: none;
 display: block;
 width: auto;
 font-size: 20px;
 text-align: center;
}

/* --------- general --------- */
body {
background-image: url("../pictures/back.png");
background-size: cover;
background-repeat: no-repeat;
background-position: center;
background-attachment: fixed;
background-color: black; 

margin-left:  250px;
margin-right: 50px;
}

/* --------- Grid Layout --------- */
 
.project_grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(220px, 1fr));
  gap: 20px;
  padding: 20px;
  max-width: 2400px;
  justify-content: center;
}
 
.project_card { 
  background: hsl(0, 0%, 20%);
  border-radius: 15px;
  border: 2px solid;
  border-color: red; 
  padding: 15px;
  color: white; 
  height: 42vh; 
  overflow: auto;
  overflow-wrap: break-word;
  white-space: normal; 
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  overflow: hidden;
}

.project_card img {
width: 200px;
height: 200px; 
}