html, body {
  height: 100%; /* of min-height: 100vh */
  margin: 0;
}

body {
  position: relative; /* zodat absolute kinderen hier t.o.v. positioneren */
  background:
    linear-gradient(rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0.356)),
    url("../assets/sardinie.jpg") no-repeat fixed center;
  background-size: cover;
}

.container {
  position: absolute;
  bottom: 100px;
  left: 30%;
  transform: translateX(-50%);
  width: 50%;
}

.container h1,
.container p,
.container a {
  background: linear-gradient(90deg, #f19a5c, #f9db6f);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.container p,
.container h1,
.container a {
  font-size: 24px;
  font-weight: bold;
}

.schildpad {
  width: 160px;
  border-radius: 55px;
}

.col-afbeelding {
  max-width: 200px;
}

.col-informatie {
  padding-left: 30px;
}


@media (max-width: 600px) {
  .container {
    width: 90%;
    top: 50%;
    bottom: auto;
    left: 50%;
    transform: translate(-50%, -50%);
  }

  .row {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }

  .col-afbeelding,
  .col-informatie {
    padding-left: 0;
    max-width: 100%;
  }

  .col-informatie {
    padding-top: 15px;
  }
}