@media (max-width: 576px) {
  img {
    border-radius: 15px;
    width: 80%;
    height: 80%;
  }

  .tilted {
    position: absolute;
    margin-top: -1%;
    margin-left: -7%;
    transform: rotate(-18deg);
    font-family: Helvetica;
    font-size: 70%;
  }
}

@media (max-width: 768px) {
  img {
    border-radius: 15px;
    width: 90%;
    height: 90%;
  }

  .tilted {
    position: absolute;
    margin-top: -1%;
    margin-left: -7%;
    transform: rotate(-18deg);
    font-family: Helvetica;
    font-size: 80%;
  }
}

/* The code for the flicker effect below was found here: https://codepen.io/o-l-e/pen/VvbvPZ */
h1 {
  -webkit-animation: flicker 5s infinite;
  text-align: center;
  margin-top: 5%;
  font-family: Helvetica;
  font-weight: bold;
  font-size: 300%;
}

@-webkit-keyframes flicker {
  0% {
    opacity: 0;
  }

  9% {
    opacity: 0;
  }

  10% {
    opacity: .5;
  }

  13% {
    opacity: 0;
  }

  20% {
    opacity: .5;
  }

  25% {
    opacity: 1;
  }
}

body {
  background-color: #e2a970;
}

img {
  border-radius: 15px;
}

.imgContainer {
  position: relative;
  text-align: center;
  color: black;
}

.tilted {
  position: absolute;
  top: 35%;
  left: 44%;
  transform: rotate(-18deg);
  font-family: Helvetica;
}

.centered {
  text-align: center;
}

button {
  align: center;
  font-family: Helvetica;
  background-color: #CF755E;
  border-radius: 15px;
}
