/* Error page styles */
.error-container{
  max-width:720px;
  margin:3rem auto;
  padding:2rem;
  border-radius:8px;
  background:#fff7f7;
  border:1px solid #ffd2d2;
  box-shadow:0 6px 18px rgba(0,0,0,0.04);
  text-align:center;
}
.error-container h1{margin:0 0 0.5rem;font-size:1.6rem;color:#b00020}
.error-container p{margin:0;color:#333;font-size:1rem}

/* 404 ghost animation */
.error-404 .ghost {
  margin: 0 auto 1.5rem;
  width: 90px; height: 90px;
  background: #fff;
  border-radius: 50% 50% 40% 40%/60% 60% 100% 100%;
  position: relative;
  box-shadow: 0 2px 12px #e0e0e0;
  animation: floatGhost 2.2s ease-in-out infinite;
}
.error-404 .face {
  position: absolute; left: 0; right: 0; top: 32px;
  display: flex; justify-content: center; align-items: center;
  flex-direction: row;
}
.error-404 .eye {
  width: 10px; height: 10px; background: #222;
  border-radius: 50%; margin: 0 7px;
  animation: blink 3s infinite;
}
.error-404 .mouth {
  width: 18px; height: 8px; border-radius: 0 0 12px 12px/0 0 16px 16px;
  background: #222; margin-left: 10px;
  margin-top: 2px;
}
@keyframes floatGhost {
  0%,100% { transform: translateY(0); }
  50% { transform: translateY(-18px); }
}
@keyframes blink {
  0%, 90%, 100% { opacity: 1; }
  92%, 98% { opacity: 0; }
}

/* 500 server rack animation */
.error-500 .server {
  margin: 0 auto 1.5rem;
  width: 70px; height: 80px; position: relative;
}
.error-500 .rack {
  width: 70px; height: 16px; background: #bdbdbd;
  border-radius: 4px; margin-bottom: 7px;
  position: relative;
  box-shadow: 0 2px 6px #e0e0e0;
}
.error-500 .rack:nth-child(2) { background: #e57373; }
.error-500 .rack:nth-child(3) { background: #bdbdbd; }
.error-500 .smoke {
  position: absolute; left: 50%; top: 10px;
  width: 18px; height: 18px;
  background: #e57373;
  border-radius: 50%; opacity: 0.7;
  filter: blur(2px);
  animation: smokeUp 2.5s infinite;
  z-index: 2;
}
@keyframes smokeUp {
  0% { opacity: 0.7; transform: translate(-50%,0) scale(1); }
  60% { opacity: 0.5; transform: translate(-50%,-30px) scale(1.2); }
  100% { opacity: 0; transform: translate(-50%,-50px) scale(1.4); }
}