#homeBlock {
  display: grid;
  grid-template-columns: 12fr;
  grid-template-areas:
    "titel"
    "tekst"
    "foto"
    "prof"
    "tekst2"
    "foto2"
    "contact";
  gap: 50px;
}
#titeltje {
  grid-area: titel;
}
#prof {
  grid-area: prof;
}
#profImage {
  grid-area: foto2;
}
#tekst {
  grid-area: tekst;
}
#tekst2 {
  grid-area: tekst2;
}
#profiel {
  grid-area: foto;
}
#profiel img,
#profImage img {
  width: calc(100vw - 100px);
}
#contact {
  grid-area: contact;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

input {
  height: 50px;
}
input[type="submit"] {
  margin-top: 10px;
  background: none;
  border: 1px solid white;
  border-radius: 10px;
  color: white;
  font-family: "Courier New", Courier, monospace;
  font-weight: 300;
  font-size: 30px;
  cursor: pointer;
  transition-duration: 0.5s;
}
input[type="submit"]:hover {
  background: #ffd869;
  color: #151515;
}
label {
  color: white;
}
form {
  width: 100%;
  color: white;
}
input,
textarea {
  width: 100%;
  border-radius: 10px;
  background: none;
  border: 1px solid white;
  color: white;
  padding-left: 20px;
  display: block;
  margin: 20px 0;
  font-size: 18px;
  line-height: 25px;
  font-family: "Courier New", Courier, monospace;
}
textarea {
  padding-top: 10px;
}

@media screen and (min-width: 768px) {
  input,
  textarea {
    width: 75%;
  }
  #homeBlock {
    display: grid;
    grid-template-columns: 6fr 6fr;
    grid-template-areas:
      "titel ."
      "tekst foto"
      "prof prof"
      "tekst2 foto2"
      "contact contact";
    gap: 60px;
  }

  #titeltje {
    grid-area: titel;
    height: fit-content;
    align-self: end;
  }
  #tekst {
    grid-area: tekst;
    height: fit-content;
    margin: 0;
  }
  #profiel {
    grid-area: foto;
  }
  #profiel img,
  #profImage img {
    width: 100%;
  }
  #contact {
    grid-area: contact;
  }
}
@media screen and (min-width: 1024px) {
  #homeBlock {
    display: grid;
    grid-template-columns: 9fr 3fr;
    grid-template-areas:
      "titel foto"
      "tekst foto"
      "prof foto2"
      "tekst2 foto2"
      "contact contact";
    gap: 50px;
  }
  #tekst,
  #tekst2 {
    width: 80%;
  }

  form {
    width: calc(100vw - 160px);
  }
  input,
  textarea {
    width: 40%;
    display: inline-block;
    margin: 10px 10px 10px 0;
  }
  textarea {
    padding-top: 20px;
    width: 60%;
  }
}