body {
  background: rgb(54, 54, 54);
}

/* header design start */
.header {
  background: white;
}

.header h1 {
  color: black;
  text-shadow: none;
  font-weight: 600;
}

.header ul {
  background: white;
}

.header ul li a {
  color: black;
}

.header ul li a:hover {
  color: var(--main);
}

/* header design end */
/* body posts start */
.projects h1 {
  width: 21vw;
  color: white;
  font-size: 6vw;
}

.projects {
  color: white;
  font-family: "Times New Roman", Times, serif;
  position: relative;
  margin-top: 100px;
  margin-left: 100px;
}

.projects h2 {
  margin-top: 120px;
  color: var(--main);
  background: white;
  width: fit-content;
  padding: 20px;
  text-shadow: 1px 1px 1px black;
  border-radius: 20px;
}

.projects p {
  width: 80%;
  margin-top: 13px;
  text-shadow: 1px 1px 5px black;
  font-size: 2.5vh;
}

.project-image {
  width: 50vw;
}

.project-image img {
  width: 100%;
  margin-top: 4vh;
  margin-bottom: 20vh;
  box-shadow: 1px 4px 9px white;
  border: 1px solid;
}

@media screen and (max-width: 700px) {
  .projects {
    margin-left: 20px;
  }

  .projects p {
    width: 90%;
  }

  .projects h2 {
    width: 90%;
    margin-top: 50px;
  }

  .project-image {
    width: 100%;
  }

  .project-image img {
    width: 90%;
    margin-bottom: 7vh;
  }
}

@media screen and (max-width: 400px) {
  .projects {
    margin: 0;
  }
}

/* body posts end */