/* ===== Světlé prostředí ===== */
:root {
  --primary-color: rgb(255, 251, 0);                          /* Kanárkově žlutá */
  --secondary-color: rgb(245, 207, 36);                       /* Jarní zelená */
  --secondaryGlass-color: rgba(255, 249, 172, 0.459);         /* Jarní zelená */
  --secondaryGlass2-color: rgba(255, 251, 192, 0.85);         /* Jarní zelená */
  --tertiary-color: #FFF9B0;                                  /* Světlá žlutá */
  --text1-color: #ffffff;                                     /* Tmavě šedá */
  --text2-color: rgb(21, 21, 21);                             /* Tmavě šedá */
  --link-color: #665701;                                      /* Barva odkazů */
  --background-color: #FFFFFF;                                /* Bílá */
  --secondary-background-color: #F5F5F5;                      /* Světle šedá */
  --accent-color: rgb(248, 230, 27);                          /* Limetková zelená */
  --border-color: #E0E0E0;                                    /* Světle šedá pro rámečky */
  --footerBackground-color: #2c2500;                          /* Barva patičky */
  --footerBackground2-color: #181400;                         /* Alternativní barva patičky */
  --footerText-color: #faffb7;                                /* Text v patičce */

  --background-yellow: linear-gradient(to top, var(--primary-color), var(--tertiary-color));
  --background-yellow2: linear-gradient(to right, var(--tertiary-color), var(--secondary-color));
  --input-background: linear-gradient(to top, #ffffff, #ffffff, #d5d8b8);
  --staging-feed-ok-color: #0d7d0d;
  --staging-feed-missing-color: #c00;
  --site-header-offset: 64px;
}

/* Další styly... */

/* Font-face a další globalní styly */
@font-face {
  font-family: 'ZapfChancery';
  src: url('/fonts/Zapf_Chancery_Italic.ttf') format('truetype');
  font-weight: normal;
  font-style: italic;
}

body {
  width: 100%;
  min-height: 100vh;
  font-family: 'Baloo Paaji 2', cursive;
  padding: 0;
  margin: 0;
  background-image: url("/img/background_03.webp");
  background-size: cover; 
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed;    
  color: var(--text-color);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.master{
  width: 100%;
  min-height: 100vh;
  background-image: url("/img/background_03.webp");
  background-size: cover; 
  background-repeat: no-repeat;
  background-position: center;
  background-attachment: fixed; 
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  padding: 0;
  margin: 0;
}

h1 {
  font-size: 30px;
  color: var(--text2-color);
  margin: 10px 0;
  font-weight: 600;
  text-shadow: 0px 0px 3px var(--primary-color);
}



/* Stylování posuvníku pro Webkit prohlížeče */
::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}

::-webkit-scrollbar-track {
  background: var(--secondary-background-color, #f5f5f5);
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background-color: var(--link-color, #007BFF);
  border-radius: 10px;
  border: 3px solid var(--secondary-background-color, #f5f5f5);
}

::-webkit-scrollbar-thumb:hover {
  background-color: var(--primary-color, #fffb00);
}





/* Animace */
@keyframes saleTextShadow {
  0% {
      text-shadow: 0 0 2px red;
  }
  50% {
      text-shadow: 0 0 20px red; /* Maximální rozšíření stínu */
  }
  100% {
      text-shadow: 0 0 2px red; /* Návrat do výchozího stavu */
  }
}

@keyframes fadeIn {
  0% {
      opacity: 0;
  }
  100% {
      opacity: 1;
  }
}

@keyframes fadeInScale {
  0% {
      opacity: 0;
      transform: scale(0.2);
  }
  100% {
      opacity: 1;
      transform: scale(1);
  }
}

@keyframes shadow {
  0% {
      box-shadow: 0px 0px 1px var(--secondary-color);
      border: 1px solid var(--secondary-color);
      border-radius: 12px;
  }

  100% {
      box-shadow: 0px 0px 15px var(--secondary-color);
      box-shadow: 0px 0px 25px var(--secondary-color);
      border: 1px solid var(--secondary-color);
      border-radius: 12px;
      background-color: var(--secondary-color);
  }
}

@keyframes shadowChoice {
  0% {
      box-shadow: 0px 0px 10px var(--secondary-color);
      border: 1px solid var(--secondary-color);
      border-radius: 17px;
  }

  100% {
      box-shadow: 0px 0px 5px var(--secondary-color);
      box-shadow: 0px 0px 15px var(--secondary-color);
      box-shadow: 0px 0px 25px var(--secondary-color);
      box-shadow: 0px 0px 35px var(--secondary-color);
      border: 1px solid var(--secondary-color);
      border-radius: 17px;
  }
}

/* animation: alert 1s alternate infinite; */
@keyframes alert {
  0% {
      color: black;
  }

  100% {
      color: rgb(255, 0, 0);
  }
}


/* Klíčové snímky animace pulse */
@keyframes pulse {
  0% {
      transform: scale(1);
      opacity: 0.9;
  }
  50% {
      transform: scale(1.1);
      opacity: 1.1;
  }
  100% {
      transform: scale(1);
      opacity: 0.9;
  }
}


/* Cookies Styles */
.cookies {
  display: none;
  content: '';
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: transparent; /* Poloprůhledné pozadí */
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
  opacity: 0;
  animation: fadeInScale 1.3s ease-in-out forwards;
  opacity: 0;
}

.cookies-content {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--background-yellow);
  padding: 30px;
  border: 2px solid var(--tertiary-color);
  border-radius: 30px;
  box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
  z-index: 1000;
  width: 80%;
  max-width: 1000px;
  text-align: left;
  padding: 30px;
}

.cookies .text p {
  margin: 0;
  font-size: 15px; /* Změňte velikost textu podle potřeby */
  color: var(--text2-color);
}

.cookies-content a {
  color: var(--link-color);
  text-decoration: none;
}

.cookies-content a:hover {
  text-decoration: underline;
}

.cookies .button-cookie {
  margin-top: 20px;
}

.button-cookie {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-end;
}

.cookies .button-cookie button {
  width: 200px;
  padding: 10px;
  background-color: var(--background-yellow);
  color: var(--text2-color);
  border: 1px solid var(--link-color);
  border-radius: 12px;
  cursor: pointer;
  font-size: 25px;
}

.cookies .button-cookie button:hover {
  animation: shadow 1s alternate infinite;
}