body {
  margin: 0;
  width: 100%;
  min-height: 100vh;
  background: #B57EDC;
  color: rgb(247, 245, 248);
  background-image: url("images/grey.jpg");
  background-size:cover;
  background-position: center;
  background-repeat: repeat-y; 

}

@font-face {
  font-family: "MyMCFont";
  src: url("fonts/NicomediaGradientItalic-ALw62.otf") format("truetype");
  font-weight: normal;
  font-style: normal;
}
@font-face {
  font-family: "MyFont";
  src: url("fonts/SmoochSans-SemiBold.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}


h1{
  display:block;
  background-color: black;
   padding: 5rem; 
  text-align: center;
  text-shadow: 15px 15px 10px rgba(188, 187, 187, 0.4);
  font-family: "MyMCFont", sans-serif;
  font-size: 5rem;
  outline: 2px solid white;

}

h2{
  text-align: center;
  color: #fffeff; 
  font-weight: bold;
  text-shadow: 10px 10px 5px rgb(196, 194, 194);
}


p{
  text-align: center;
  font-weight:bold;
  color: #bdbdc0;
}

p1{

  text-align: center;
  font-weight: bold;
  font-size: 1.7rem;
  color:rgb(247, 243, 243);
}


.project_description{

  font-size: 1.3rem;
  font-family: "MyFont", sans-serif;

}

.projects_container{
  display: flex;
  gap: 0.5rem;
   flex-wrap: wrap; 
  /* margin: 3rem auto; */
}

.project_image{
   width: 35rem;
  height: 20rem; 
  margin: 1rem auto;
  background-size:cover;
 
   background-position: center;  

}

.text-center{
 text-align: center;
}

#whatisadiamond{
  background-image: url("images/whatisadiamond.png");
 outline: 5px solid black;
 
 
}

 #whatisadiamond:hover{
 background-image: none;
 background-color: rgba(27, 27, 27, 0.461);
 box-shadow: 20px 20px 10px black;
 outline: 2px solid white;

 
} 

#lightlock{
  background-image: url("images/lightlock.png");
  outline: 5px solid black;
}
#lightlock:hover{
  
  background-image: none;
  background-color: rgba(27, 27, 27, 0.461);
 box-shadow: 20px 20px 10px black;
  outline: 2px solid white;

}


#hackattack{
  background-image: url(images/HAHA.png);
   outline: 5px solid rgb(110, 195, 248);
}
#hackattack:hover{
  background-image: none;
  background-color: rgba(27, 27, 27, 0.461);
 box-shadow: 20px 20px 10px black;
  outline: 2px solid white;
}

#adventuretime{
  background-image: url(images/advnTime.png);
   outline: 5px solid black;
}
#adventuretime:hover{
  background-image: none;
  background-color: rgba(27, 27, 27, 0.461);
 box-shadow: 20px 20px 10px black;
  outline: 2px solid white;
}

#arduino{
  background-image: url(images/arduino.png);
   outline: 5px solid rgb(239, 236, 236);
}
#arduino:hover{
  background-image: none;
  background-color: rgba(27, 27, 27, 0.461);
 box-shadow: 20px 20px 10px black;
  outline: 2px solid white;
}

.project_image h2,
.project_image p,
.project_image p1{
  opacity: 0;
}

.project_image:hover h2,
.project_image:hover p,
.project_image:hover p1{
  opacity: 1;
}

.project_description h2{
  font-family: "MyFont", sans-serif;
  font-size: 1.7rem;
}


.project_description h2{
  text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.16);
}
.project_description p, 
.project_description p1
{
  text-shadow: 5px 5px 5px rgba(0, 0, 0, 0.16);
}



@keyframes wobble {
  0% { transform: rotate(0deg); }
  15% { transform: rotate(-0.5deg); }
  30% { transform: rotate(0.5deg); }
  45% { transform: rotate(-0.5deg); }
  60% { transform: rotate(0.5deg); }
  75% { transform: rotate(-0.2deg); }
  100% { transform: rotate(0deg); }
}

/* @media screen and (max-width: 768px) {
  .project_image  {
    flex-direction: column;
    align-items: flex-start;
  }
  
  .project_image  img {
    max-width: 100%; 
    margin-bottom: 1rem;
  }
} */