body {
  background: #12151f;
  color: #05f4b7;
}

.container {
  display: grid;
  grid-template-columns: repeat(1fr, 3);
  grid-auto-columns: auto;
  margin: 4%;
}

.resume {
  display: grid;
  grid-template-columns: 60% 30%;
  grid-gap: 5%;
}

.projectdesdiv {
  display: grid;
  grid-template-columns: 45% 45%;
  grid-gap: 6%;
  margin-bottom: 4%;
}

.proimgdiv {
  height: 30rem;
}
.proimgdiv img {
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
}

button {
  background-color: #7ed5ea;
  margin: 12%;
  border: #fdee30;
  border-width: 8pt;
  border-style: groove;
  border-radius: 50px;
  padding: 5%;
}

@media (max-width: 600px) {
  .container {
    display: grid;
    grid-template-columns: 100%;
    align-items: center;
    margin: 2%;
  }

  .resume {
    display: grid;
    grid-template-columns: 100%;
  }

  .projectdesdiv {
    display: grid;
    grid-template-columns: 1fr;
    grid-auto-columns: auto;
    place-items: center;
    grid-gap: 0%;
    margin-top: 5%;
    margin-bottom: 5%;
  }

  .proimgdiv {
    height: 17rem;
  }
}