body {
  background: radial-gradient(circle at top, #1a0000 0%, #000 85%);
  color: #eee;
  animation: flicker 10s infinite;
}

header {
  background: linear-gradient(90deg, #140000, #1a0000);
  box-shadow: 0 0 30px rgba(255, 80, 0, 0.5);
}

.logo {
  color: #ff7518;
  font-size: 24px;
  text-shadow:
    0 0 5px orange,
    0 0 20px red,
    0 0 40px rgba(255,100,0,0.7);
}

.pumpkin-icon {
  display: inline-block;
  margin: 0 6px;
  animation: pumpkinGlow 2s infinite alternate;
}

nav a {
  color: #ccc;
}

nav a:hover {
  color: #ff7518;
  text-shadow: 0 0 10px orange;
}

nav a::after {
  background: linear-gradient(90deg, orange, red);
}

.overlay {
  background: rgba(0,0,0,0.7);
}

.prev, .next {
  background: #000;
  box-shadow: 0 0 10px rgba(255,100,0,0.3);
}

.prev:hover, .next:hover {
  background: #ff7518;
  box-shadow: 0 0 25px orange;
}

.about-box,
.form-pro,
.info,
.mega-item {
  background: #1a1a1a;
  border: 1px solid rgba(255,120,0,0.25);
  box-shadow: 0 0 20px rgba(255,120,0,0.15);
  transition: 0.3s;
}

.about-box:hover,
.form-pro:hover,
.info:hover {
  transform: translateY(-3px);
  box-shadow: 0 0 30px rgba(255,120,0,0.3);
}

h1, h2 {
  color: #ff7518;
  animation: glow 2.5s infinite alternate;
}

.form-pro input,
.form-pro textarea {
  background: #111;
  border: 1px solid #333;
}

.form-pro input:focus,
.form-pro textarea:focus {
  border-color: #ff7518;
  box-shadow: 0 0 15px rgba(255,100,0,0.5);
}

#submitBtn {
  background: linear-gradient(45deg, #ff7518, #ff0000);
  color: white;
}

#submitBtn:hover {
  transform: scale(1.05);
  box-shadow: 0 0 20px orange;
}

footer {
  background: #140000;
  box-shadow: 0 0 15px rgba(255,120,0,0.3);
}

body::before {
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  background: url("https://www.transparenttextures.com/patterns/spider-web.png");
  opacity: 0.05;
  pointer-events: none;
}

/* MGŁA */
body::after {
  content: "";
  position: fixed;
  width: 100%;
  height: 100%;
  background: radial-gradient(circle, rgba(255,80,0,0.05), transparent 70%);
  pointer-events: none;
}

.ghost-text {
  display: block;
  font-size: 40px;
  text-align: center;
  margin-top: 10px;
  animation: ghostFloat 3s ease-in-out infinite;
}


@keyframes glow {
  from { text-shadow: 0 0 5px orange; }
  to { text-shadow: 0 0 30px red; }
}

@keyframes flicker {
  0%,100% { opacity:1; }
  10% { opacity:0.9; }
  20% { opacity:1; }
  30% { opacity:0.8; }
}

@keyframes ghostFloat {
  0% { transform: translateY(0px); }
  50% { transform: translateY(-15px); }
  100% { transform: translateY(0px); }
}

@keyframes pumpkinGlow {
  from {
    transform: scale(1);
    text-shadow: 0 0 5px orange;
  }
  to {
    transform: scale(1.2);
    text-shadow: 0 0 20px red;
  }
}


/* TABLETY */
@media (max-width: 900px) {
  .logo {
    font-size: 20px;
  }

  .pumpkin-icon {
    font-size: 20px;
  }

  .ghost-text {
    font-size: 30px;
  }
}

@media (max-width: 600px) {
  .logo {
    font-size: 18px;
  }

  .pumpkin-icon {
    font-size: 18px;
  }

  .ghost-text {
    display: none;
  }

  h1 {
    font-size: 20px;
  }

  .form-pro input,
  .form-pro textarea {
    font-size: 14px;
  }
}
.logo::before {
  content: "🎃 ";
}

.logo::after {
  content: " 🎃";
}.logo::before,
.logo::after {
  animation: pumpkinGlow 2s infinite alternate;
}

@keyframes pumpkinGlow {
  from {
    text-shadow: 0 0 5px orange;
  }
  to {
    text-shadow: 0 0 20px red;
  }
}
@media(max-width:768px){

  body {
    overflow-x: hidden;
  }

  .nav {
    padding: 0 15px;
  }

  .logo {
    font-size: 16px;
  }

  nav ul {
    gap: 15px;
  }

  section {
    padding: 40px 15px;
  }

  h1 {
    font-size: 22px;
  }

  h2 {
    font-size: 20px;
  }

  p {
    font-size: 14px;
  }

}