* {
  -webkit-box-sizing: border-box;
          box-sizing: border-box;
}

body {
  padding: 0;
  margin: 0;
}

#notfound {
  position: relative;
  height: 100vh;
  background: #111b3d; /* Dark navy blue background from photo */
  overflow: hidden;
}

/* Subtle background glow like the photo */
#notfound::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(circle at center, #1b2754 0%, #111b3d 100%);
  z-index: 0;
}

#notfound .notfound {
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50%, -50%);
      -ms-transform: translate(-50%, -50%);
          transform: translate(-50%, -50%);
  z-index: 1;
}

.notfound {
  max-width: 767px;
  width: 100%;
  line-height: 1.4;
  text-align: center;
}

.notfound .notfound-404 {
  position: relative;
  height: 200px;
  margin-bottom: 20px;
  z-index: 1;
}

/* Magic to turn <h1>404</h1> into 4 [UFO] 4 */
.notfound .notfound-404 h1 {
  font-family: 'Montserrat', sans-serif;
  font-size: 0px; /* Hide the original "404" */
  position: absolute;
  left: 50%;
  top: 50%;
  -webkit-transform: translate(-50% , -50%);
      -ms-transform: translate(-50% , -50%);
          transform: translate(-50% , -50%);
  margin: 0;
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 110px; /* Space for the UFO */
  
  /* The cute UFO SVG background */
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 200 150'%3E%3C!-- Stars --%3E%3Ccircle cx='20' cy='30' r='2' fill='%23fff'/%3E%3Ccircle cx='180' cy='20' r='3' fill='%23fff'/%3E%3Ccircle cx='160' cy='130' r='2' fill='%23fff'/%3E%3Ccircle cx='40' cy='120' r='2.5' fill='%23fff'/%3E%3Ccircle cx='100' cy='10' r='1.5' fill='%23fff'/%3E%3Ccircle cx='190' cy='90' r='2' fill='%23fff'/%3E%3Ccircle cx='10' cy='90' r='1' fill='%23fff'/%3E%3C!-- UFO Dome --%3E%3Cpath d='M 60 75 Q 100 20 140 75' fill='rgba(135,206,235,0.4)'/%3E%3C!-- Alien --%3E%3Crect x='80' y='45' width='40' height='30' rx='15' fill='%23b74b6a'/%3E%3Ccircle cx='100' cy='55' r='6' fill='%23222'/%3E%3Ccircle cx='102' cy='53' r='2' fill='%23fff'/%3E%3C!-- Antennas --%3E%3Cpath d='M 90 45 L 85 30' stroke='%23b74b6a' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='85' cy='30' r='3' fill='%23b74b6a'/%3E%3Cpath d='M 110 45 L 115 30' stroke='%23b74b6a' stroke-width='3' stroke-linecap='round'/%3E%3Ccircle cx='115' cy='30' r='3' fill='%23b74b6a'/%3E%3C!-- UFO Base --%3E%3Cellipse cx='100' cy='85' rx='70' ry='25' fill='%23e2e8f0'/%3E%3Cellipse cx='100' cy='90' rx='60' ry='15' fill='%2394a3b8'/%3E%3C/svg%3E") center center no-repeat;
  background-size: 180px;
}

/* Render the 4s */
.notfound .notfound-404 h1::before,
.notfound .notfound-404 h1::after {
  content: "4";
  font-size: 180px;
  color: #ffffff;
  font-weight: 900;
  text-shadow: 5px 5px 0px rgba(0,0,0,0.2);
}

/* Change "Page not found" to "Sorry, the page not found" */
.notfound .notfound-404 h2 {
  font-family: 'Montserrat', sans-serif;
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  font-size: 0px; /* Hide original text */
  margin: 0;
  text-align: center;
}

.notfound .notfound-404 h2::after {
  content: "Sorry, the page not found";
  font-size: 24px;
  font-weight: 700;
  color: #ffffff;
  text-transform: none;
}

/* Homepage Button styling */
.notfound a {
  font-family: 'Montserrat', sans-serif;
  display: inline-block;
  color: #fff;
  text-decoration: none;
  background: #3b82f6;
  padding: 12px 30px;
  border-radius: 30px;
  font-size: 15px;
  font-weight: 700;
  -webkit-transition: 0.2s all;
  transition: 0.2s all;
  margin-top: 40px;
  border: 2px solid #3b82f6;
}

.notfound a:hover {
  background: transparent;
  color: #3b82f6;
}

/* Mobile Responsiveness */
@media only screen and (max-width: 767px) {
  .notfound .notfound-404 h1 {
    gap: 80px;
    background-size: 140px;
  }
  .notfound .notfound-404 h1::before,
  .notfound .notfound-404 h1::after {
    font-size: 140px;
  }
  .notfound .notfound-404 h2::after {
    font-size: 18px;
  }
}

@media only screen and (max-width: 480px) {
  .notfound .notfound-404 h1 {
    gap: 60px;
    background-size: 100px;
  }
  .notfound .notfound-404 h1::before,
  .notfound .notfound-404 h1::after {
    font-size: 100px;
  }
}