/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

body {
  color: black;
  font-family: Verdana;
  margin: 0;
  padding-top: 250px;
  background-image: url("background2.png"); /* ścieżka do pliku */
  background-size: cover;   /* rozciąga obraz na całe okno */
  background-repeat: no-repeat; /* nie powtarza obrazka */
  background-position: center;  /* wyśrodkowanie */
}

@font-face {
  font-family: "Techno";
  src: url("https://sadhost.neocities.org/fonts/Techno.ttf") format("truetype");
  font-weight: normal;
  font-style: normal;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 200px;
  background: #fff;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: flex-start; /* logo + menu razem od lewej */
  gap: 50px;                   /* odstęp między logo a menu */
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  z-index: 1000;
  background-image: url("background.png"); /* ścieżka do pliku */
  background-size: cover;   /* rozciąga obraz na całe okno */
  background-repeat: no-repeat; /* nie powtarza obrazka */
  background-position: center;  /* wyśrodkowanie */
  font-family: "Techno", sans-serif; /* Techno jako główny, sans-serif jako fallback */
  font-size: 75px;  /* wielkość zależna od szerokości okna */
  white-space: nowrap; /* tekst zawsze w jednej linii */
  color: #31312f;
  text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}
/* MAŁY pasek z linkami */
.header-bottom {
  position: fixed;
  top: 200px; /* zaczyna się pod headerem */
  left: 0;
  width: 100%;
  height: 50px;
  display: flex;
  align-items: center;
  padding: 0 20px;
  background: #fff;
  background-image: url("background.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0 2px 5px rgba(0,0,0,0.2);
  z-index: 999; /* ciut niżej niż header */
  font-family: "Techno", sans-serif;
  text-shadow: 2px 2px 5px rgba(0,0,0,0.5);
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}


.window-text {
  width: calc(100% - 20px); /* pełna szerokość minus margines po bokach */
  max-width: 1600px;        /* opcjonalnie, żeby nie były za szerokie na wielkich ekranach */
  min-height: 300px;        /* wysokość minimalna */
  margin: 20px auto;        /* odstęp między okienkami i centrowanie */
  padding: 20px;            /* wewnętrzny odstęp treści od krawędzi */
  background-color: rgba(35, 50, 60, 0.8); /* lekko przezroczyste tło */
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  box-shadow: 0 2px 10px rgba(0,0,0,0.3);
  font-family: sans-serif;
  border-radius: 2px;
  box-shadow: 0 8px 20px rgba(0,0,0,0.5);
}


#logo {
  height: auto;
  width: 200px;  /* 10% szerokości okna przeglądarki */
  max-width: 200px; /* ograniczenie maksymalne */
}

nav ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 20px; /* odstępy między linkami */
}

nav a {
  text-decoration: none;
  color: #333;
  font-weight: bold;
  transition: color 0.3s;
}

nav a:hover {
  color: #0077cc;
  text-shadow: 0 0 5px #ead756, 0 0 10px #ead756, 0 0 15px #ead756, 0 0 20px #ead756;
}


/* Player audio */
audio {
  width: 300px;
  outline: none;
}
/* Wrapper dla animacji */
.marquee {
  display: flex;
  width: max-content; /* szerokość zależna od zawartości */
  animation: scroll 10s linear infinite;
}

.marquee-container {
  width: 320px;
  overflow: hidden;
  border: 2px solid #31312f;
  border-radius: 10px;
  background: rgba(0,0,0,0.1);
  position: relative;
}

.marquee-text {
  display: inline-block;
  white-space: nowrap;
  color: #31312f;
  font-weight: bold;
  font-size: 1.2em;
  padding-left: 100%; /* start poza prawą krawędzią */
  animation: scroll 10s linear infinite;
}

/* Animacja przewijania */
@keyframes scroll {
  0% {
    transform: translateX(0%);
  }
  100% {
    transform: translateX(-100%);
  }
}