body{
  margin: 0;
  font-family: 'Tahoma'; 
  font-size: 16px;
  color: #e0e0e0;
  background-color: #aca4a4;
}
.site-container {
  display:flex;
  max-width: 1500px; /* Określamy maksymalną szerokość */
  margin: 0 auto; 
  padding: 20px;
  gap: 40px;
  
}
.sidebar-music{
  width: 250px;
  flex-shrink: 0;
background-color: rgba(112, 109, 109, 0.8);
border: 1px solid #262626;
padding: 40px;
height: fit-content
}
.main-content-music{
  flex-grow: 1;
}
p {
  position:fixed;
  width:100%;
  bottom:30px;
  font-size:14px;
  color: black;
  margin-top:200px;
}

/* === STYL DLA ŹRÓDEŁ I PRZYPISÓW === */

.source-credit {
  text-align: right;        /* Wyrównanie do prawej */
  font-size: 0.9em;         /* Nieco mniejsza czcionka */
  font-style: italic;       /* Kursywa, typowa dla przypisów */
  color: #aaa;              /* Szary, mniej rzucający się w oczy kolor */
  margin-top: 15px;         /* Odstęp od góry */
  padding-top: 10px;        /* Mały wewnętrzny odstęp */
  border-top: 1px dashed #555; /* Linia oddzielająca od tekstu powyżej */
}

/* Dodatkowy styl dla linków wewnątrz źródła */
.source-credit a {
  color: #bbb; /* Jaśniejszy kolor dla linków w przypisach */
  text-decoration: underline;
  text-decoration-style: dotted; /* Kropkowane podkreślenie */
}

.source-credit a:hover {
  color: #00f7ff; /* Kolor akcentu po najechaniu */
}


#container {
  color:#000000;
  text-transform: uppercase;
  font-size:36px;
  font-weight:bold;
  padding-top:200px;  
  position:relative;
  width:50%;
  bottom:45%;
  display:block;
}

/* === STYLIZACJA TABLICY KORKOWEJ === */

/* Główny kontener, który jest naszą siatką (gridem) */
.corkboard-container {
  display: grid;
  /* Tworzymy siatkę z 8 kolumn i 6 wierszy. Możesz to dowolnie zmieniać! */
  grid-template-columns: repeat(10, 100px);
  grid-template-rows: repeat(9, 100px); /* Każdy wiersz ma wysokość 100px */
  gap: 10px; /* Minimalny odstęp między elementami */
  padding: 10px;
  margin: 20px auto;
  max-width: 800px;
}

/* Wygląd każdego pojedynczego elementu na tablicy */
.corkboard-item {
  background-color: whitesmoke;
}

.corkboard-item:hover {
  transform: scale(1.05) rotate(0deg) !important; /* Po najechaniu obrazek się prostuje i powiększa */
  box-shadow: 10px 10px 25px rgba(147, 185, 186, 0.3);
  z-index: 10 !important; /* Po najechaniu zawsze jest na wierzchu */
}

.corkboard-item img {
  width: 100%;
  height: 100%;
  object-fit: contain; /* Dopasowuje obrazek, by wypełnił kontener */
}

/* ------ TUTAJ ZACZYNA SIĘ KONTROLA POZYCJI ------ */
/* Każdy element pozycjonujemy ręcznie na naszej siatce */

.item-1 {
  grid-column: 1 / 2;   /* Zajmuje kolumny od 1 do 4 (nie włącznie) */
  grid-row: 1 / 2;      /* Zajmuje wiersze od 1 do 4 */
  transform: rotate(-5deg); /* Lekko obracamy w lewo */
}

.item-2 {
  grid-column: 2 / 3;   /* Kolumny od 4 do 7 */
  grid-row: 2 / 3;      /* Wiersze od 2 do 5 - NAKŁADA SIĘ NA PIERWSZY! */
  transform: rotate(3deg);  /* Obracamy w prawo */
  z-index: 1;           /* Jest na wierzchu (domyślnie jest z-index: 0) */
}

.item-3 { /* Film z YouTube */
  grid-column: 3 / 5;   /* Kolumny od 6 do 9 */
  grid-row: 3 / 4;      /* Wiersze od 4 do 7 */
  transform: rotate(-5deg);
}

.item-4 {
  grid-column: 1 / 2;   /* Kolumny od 2 do 5 */
  grid-row: 4 / 5;      /* Wiersze od 4 do 6 */
  transform: rotate(5deg);
  z-index: 1;           /* Jest pod item-2, ale nad item-1 */
}

.item-5 {
  grid-column: 7 / 8;   /* Kolumny od 2 do 5 */
  grid-row: 5 / 7;      /* Wiersze od 4 do 6 */
  transform: rotate(5deg);
  z-index: 1;           /* Jest pod item-2, ale nad item-1 */
}


/* === RESPONSIVE YOUTUBE VIDEO === */
/* Nowoczesny sposób na zachowanie proporcji wideo */
.video-wrapper {
  width: 100%;
  height: 100%;
}
.video-wrapper iframe {
  width: 100%;
  height: 100%;
}

/* Podpis pod obrazkiem/filmem wewnątrz itemu */
.corkboard-item .source-credit {
    border-top: none;
    text-align: center;
    padding-top: 5px;
    margin-top: 5px;
    font-size: 0.8em;
    font-style: normal;
    font-family: 'Lucida Console', 'Courier New', monospace;
}

#flip {
  height:50px;
  overflow:hidden;
}

#flip > div > div {
  color:#fff;
  padding:4px 12px;
  height:45px;
  margin-bottom:45px;
  display:inline-block;
}

#flip div:first-child {
  animation: show 5s linear infinite;
}

#flip div div {
  background:#42c58a;
}
#flip div:first-child div {
  background:#4ec7f3;
}
#flip div:last-child div {
  background:#DC143C;
}

@keyframes show {
  0% {margin-top:-270px;}
  5% {margin-top:-180px;}
  33% {margin-top:-180px;}
  38% {margin-top:-90px;}
  66% {margin-top:-90px;}
  71% {margin-top:0px;}
  99.99% {margin-top:0px;}
  100% {margin-top:-270px;}
}

@keyframes wipe-enter {
	0% {
		transform: scale(0, .025);
	}
	50% {
		transform: scale(1, .025);
	}
}
@media (prefers-reduced-motion: no-preference) {
  .square {
    animation-name: wipe-enter;
    animation-duration: 1s;
    animation-iteration-count: infinite;
  }
}