@import url('https://fonts.googleapis.com/css2?family=Bangers&display=swap');

@import url('https://fonts.googleapis.com/css2?family=Rock+Salt&display=swap');



/* === ZÁKLAD === */

html, body {

  height: auto;

  min-height: 100vh;

  overflow-y: auto;

  margin: 0;

  padding: 0;

  display: flex;

  flex-direction: column;

  background: #111;

  color: #fff;

  font-family: 'Bangers', cursive;

  overflow-x: hidden;

}



/* === HLAVIČKA === */

.punk-header {

  text-align: center;

  padding: 1.5rem;

  background: #000;

  border-bottom: 5px dotted red;

}



.logo-placeholder {

  font-size: 2rem;

  background: red;

  color: black;

  padding: 0.5rem;

  display: inline-block;

  transform: rotate(-5deg);

}



/* === TITUL FESTIVALU === */

.festival-title {

  font-size: 4rem;

  color: #f90000;

  text-shadow: 3px 3px black;

  margin-top: 1rem;

}



.date-time, .location, .coordinates {

  font-size: 1rem;

  margin: 0.5rem 0;

}



.location a, .coordinates a {

  color: yellow;

  text-decoration: underline;

}



/* === SEKCÍ TITULKY === */

.section-label {

  font-size: 2rem;

  text-align: center;

  background: red;

  padding: 0.5rem;

  color: black;

  margin-top: 2rem;

}



/* === OBSAH – CENTRACE === */

main {

  flex-grow: 1;

  overflow-y: auto;

}



footer {

  background: #222;

  padding: 1rem;

  text-align: center;

  border-top: 3px dashed red;

}



/* === KAPELY === */

.kapely-seznam {

  list-style: none;

  padding: 0;

  margin: 0;

  text-align: center;

}



.kapely-seznam li {

  font-size: 2.2rem;

  margin: 0.6rem 0;

  color: #f90000;

  text-shadow: 2px 2px #000;

  transform: rotate(-2deg);

  transition: all 0.2s ease-in-out;

}



.kapely-seznam li:hover {

  transform: scale(1.1) rotate(0deg);

  color: yellow;

  text-shadow: 2px 2px red;

  animation: punk-blink 1s infinite;

}



/* === BLINKANÍ PRO KAPELY === */

@keyframes punk-blink {

  0% { opacity: 1; text-shadow: 2px 2px red; }

  50% { opacity: 0.4; text-shadow: 2px 2px orange; }

  100% { opacity: 1; text-shadow: 2px 2px red; }

}



.headline {

  font-size: 4rem;

  background: #f90000;

  color: #fff;

  text-align: center;

  padding: 1rem;

  margin: 1rem auto;

  max-width: 90vw;

  font-family: 'Stencil', sans-serif;

  border: 4px dashed black;

  box-shadow: 0 0 10px #f90000;

}



.punk-box {

  display: flex;

  justify-content: center;

  align-items: center;

  flex-direction: column;

}



/* === VSTUPENKY === */

.ticket-price, .ticket-email, .org-info {

  text-align: center;

  font-size: 1.2rem;

  margin-top: 0.5rem;

}



.email-hint {

  font-family: 'Rock Salt', cursive;

  font-size: 1rem;

  background: yellow;

  color: black;

  padding: 0.3rem 0.7rem;

  margin: 0.5rem auto;

  display: inline-block;

  border: 2px solid red;

  border-radius: 5px;

  transform: rotate(-8deg);

  box-shadow: 3px 3px red;

}



/* === BLIKÁNÍ E-MAIL LINK === */

.ticket-email a {

  font-weight: bold;

  font-size: 1.1rem;

  animation: neon-flicker 1.5s infinite;

  text-decoration: none;

  color: #39FF14;

}



.ticket-email a:hover {

  text-decoration: underline;

}



@keyframes neon-flicker {

  0%   { color: #39FF14; text-shadow: 0 0 5px #39FF14; }

  20%  { color: #1aff00; text-shadow: none; }

  40%  { color: #39FF14; text-shadow: 0 0 5px #39FF14; }

  60%  { color: #1aff00; text-shadow: 0 0 2px #39FF14; }

  80%  { color: #39FF14; text-shadow: 0 0 6px #39FF14; }

  100% { color: #39FF14; text-shadow: 0 0 10px #39FF14; }

}



/* === LOGA === */

img {

  max-width: 100px;

  height: auto;

}



.logo-main {

  max-width: 100%;

  width: 400px;

  height: auto;

  margin: 1rem auto;

  display: block;

}



.logo-partner-wide {

  width: 300px;

  height: auto;

  object-fit: contain;

}



.partner-logos {

  display: flex;

  justify-content: center;

  gap: 1rem;

  flex-wrap: wrap;

  padding: 1rem;

}



.partner-logos img:hover {

  transform: rotate(-10deg) scale(1.1);

  box-shadow: 0 0 10px red;

  transition: 0.2s ease;

}



/* === ODPOČET === */

#timer {

  font-size: 1.5rem;

  text-align: center;

  margin: 1rem auto;

  color: yellow;

  text-shadow: 1px 1px #000;

}



/* === MEDIA QUERIES === */

@media screen and (max-width: 600px) {

  .festival-title { font-size: 2.5rem; }

  .headline { font-size: 2.5rem; }

  .kapely-seznam li { font-size: 1.6rem; }

  .logo-placeholder { font-size: 1.2rem; padding: 0.3rem; }

  .section-label { font-size: 1.5rem; }

  .ticket-price, .ticket-email, .org-info, #timer { font-size: 1rem; }

  .logo-main { width: 250px; }

  .logo-partner-wide { width: 200px; }

  .partner-logos img { max-width: 80px; }

  footer { font-size: 0.9rem; }

}