body {
  background: #fff;
  font-family: "Arvo", serif;
  overflow: hidden;
}

/* ORIGINAL STYLES */
.page_404 img {
  width: 100%;
}

.four_zero_four_bg {
  background-image: url(bg.gif);
  height: 500px;
  background-position: center;
}

.four_zero_four_bg h1 {
  font-size: 80px;
}

.four_zero_four_bg h3 {
  font-size: 80px;
}

.link_404 {
  color: #fff !important;
  padding: 10px 20px;
  background: #39ac31;
  margin: 20px 0;
  display: inline-block;
  border-radius: 20px;
}

.contant_box_404 {
  margin-top: -50px;
}

/* ---------- CENTER THE PAGE ---------- */
html, body {
  height: 100%;
}

body {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
}

.page_404 {
  width: 100%;   /* ⭐ PC SIZE */
  text-align: center;
}

/* ---------- RESPONSIVE IMAGE SIZE ---------- */
.four_zero_four_bg {
  background-image: url(bg.gif);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
  height: 300px;      /* ⭐ PC Height */
}

/* ---------- MOBILE VERSION ---------- */
@media (max-width: 767px) {
  .page_404 {
    max-width: 100%;     /* ⭐ USE 90% OF PHONE SCREEN */
  }

  .four_zero_four_bg {
    height: 280px;      /* ⭐ Bigger image on phone */
  }

  .four_zero_four_bg h1 {
    font-size: 65px;    /* ⭐ Bigger text */
  }
}