/* ===== 🇵🇱 DZIEŃ NIEPODLEGŁOŚCI ===== */

/* pasek flagi u góry */
body::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 6px;
  background: linear-gradient(to right, white 50%, red 50%);
  z-index: 9999;
}

/* HEADER */
header {
  border-bottom: 2px solid red;
}

/* LOGO */
.logo {
  color: red;
  font-weight: 900;
  letter-spacing: 1px;
}

/* flagi przy logo */
.logo::before {
  content: "🇵🇱 ";
}

.logo::after {
  content: " 🇵🇱";
}

/* LINKI */
nav a:hover {
  color: red;
}

nav a::after {
  background: red;
}

/* BOXy */
.about-box,
.form-pro,
.info,
.mega-item {
  border: 1px solid rgba(255,0,0,0.2);
  box-shadow: 0 0 10px rgba(255,0,0,0.15);
}

/* HOVER */
.mega-item:hover {
  background: red;
  color: white;
}

/* NAGŁÓWKI */
h1, h2 {
  color: red;
}

/* INPUTY */
.form-pro input:focus,
.form-pro textarea:focus {
  border-color: red;
  box-shadow: 0 0 10px rgba(255,0,0,0.4);
}

/* PRZYCISK */
#submitBtn {
  background: linear-gradient(45deg, #ff0000, #b30000);
  color: white;
}

#submitBtn:hover {
  box-shadow: 0 0 15px rgba(255,0,0,0.5);
}

/* STOPKA */
footer {
  border-top: 2px solid red;
}

/* delikatny efekt sekcji */
section {
  position: relative;
}

section::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 2px;
  background: linear-gradient(to right, transparent, red, transparent);
  opacity: 0.3;
}

/* RESPONSYWNOŚĆ */
@media (max-width: 600px) {
  .logo {
    font-size: 18px;
  }
}
@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;
  }

}