/* Globální styl body s proměnnými pro barvy, fontem a pozadím */
    body {
      --text-color: white;
      --bg-overlay: rgba(0, 0, 0, 0.0); /* průhledné překrytí */
      font-family: 'Source Sans Pro', sans-serif;
      font-size: 2.5vw; /* responzivní velikost písma */
      color: var(--text-color);
      margin: 0;
      /* pozadí s pevnou fotografií trávy na podzim */
      background: url('https://www.tisnov.cz/html/webkamera/rohovka.jpg?01') no-repeat center center fixed;
      background-size: cover;
    }

    /* Překryvná vrstva přes celé okno, která centrumje obsah */
    .overlay {
      min-height: 100vh; /* výška 100% viewportu */
      width: 100%;
      background-color: var(--bg-overlay);
      display: flex;
      justify-content: center; /* horizontální centrování */
      align-items: center;     /* vertikální centrování */
      text-align: center;      /* zarovnání textu na střed */
      padding: 20px;
      box-sizing: border-box;
      flex-direction: column;  /* vertikální uspořádání dětí */
      gap: 10px;               /* mezera mezi dětmi */
    }

    /* Hlavní box s informacemi, poloprůhledné pozadí s rámečkem a stíny */
    .info-box {
      background-color: rgba(0, 0, 0, 0.5);
      border: 1px solid rgba(255, 255, 255, 0.8);
      border-radius: 48px;
      padding: 25px 40px;
      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
      max-width: 350px;
      width: 90%;
      color: white; /* barva fontu  */
      font-size: 1.5rem;
      line-height: 1.3; /* rozestup řádků  */
      font-family: 'Source Sans Pro', sans-serif;
      text-align: center; /* středové zarovnání textu */
    }

    /* Odkaz na time.is a element s ID pro zobrazení času */
    .info-box #Brno_z721,
    .info-box #time_is_link {
      font-family: inherit;
      font-size: inherit;
      color: inherit;
      text-decoration: none;
      display: block;
      margin: 0 auto 15px auto; /* vycentrování s dolním odsazením */
    }

    /* Zvýraznění prvního potomka v #Brno_z721 (čas) */
    .info-box #Brno_z721 > *:first-child {
      font-size: 3.8rem !important; /* velký font pro čas */
      font-weight: 700;
      margin-bottom: 0.5em;
    }

    /* Řádky s daty: flexibilní řádek s centrováním a odsazením */
    .data-row {
      display: flex;
      justify-content: center; /* zarovnání na střed */
      gap: 8px;
      margin-top: 10px;
      align-items: center; /* vertikální zarovnání */
      font-family: 'Source Sans Pro', sans-serif;
      font-size: 1.5rem; /* velikost písma stejná jako info-box */
      text-align: center;
    }

    /* Popisek (label) v datovém řádku - fixní minimální šířka, centrovaný text */
    .data-row .label {
      min-width: 130px;
      font-weight: 400; /* normální váha písma */
      text-align: center;
      display: inline-block;
    }

    /* Hodnota v datovém řádku - fixní minimální šířka, centrovaná */
    .data-row .value {
      min-width: 90px;
      font-weight: 400;
      text-align: center;
      display: inline-block;
    }

    /* Styl tlačítka pro přepínání jazyka */
    #lang-toggle {
      padding: 8px 20px;
      font-size: 1.5rem;
      cursor: pointer;
      background-color: rgba(255 255 255 / 0.1);
      border: none;
      border-radius: 8px;
      color: white;
      transition: background-color 0.5s ease;
      font-family: 'Source Sans Pro', sans-serif;
      text-align: center;
      align-self: center; /* zarovnání tlačítka na střed v column flex */
    }
    /* Hover efekt pro tlačítko */
    #lang-toggle:hover {
      background-color: rgba(255 255 255 / 0.4);
    }

    /* Styl sekce se východem a západem slunce */
    .sun-data {
      margin-top: 10px;
      font-size: 1.5rem;
      line-height: 1.2;
      font-weight: 400;
      text-align: center;
      font-family: 'Source Sans Pro', sans-serif;
    }

    /* Řádky ve sun-data se zarovnávají do flexu */
    .sun-data div {
      display: flex;
      justify-content: center;
      gap: 6px;
      margin: 4px 0;
      align-items: center;
    }

    /* Popisek ve sun-data */
    .sun-data .label {
      min-width: 130px;
      font-weight: 400;
      text-align: center;
      display: inline-block;
    }

    /* Hodnota ve sun-data */
    .sun-data .value {
      min-width: 90px;
      font-weight: 400;
      text-align: center;
      display: inline-block;
    }

    /* Responsivní úpravy pro menší obrazovky */
    @media (max-width: 600px) {
      body {
        font-size: 5vw;
      }
      .info-box {
        padding: 15px 20px;
        font-size: 1rem;
      }
      .info-box #Brno_z721 > *:first-child {
        font-size: 2rem !important;
      }
      .data-row {
        font-size: 1rem;
      }
      .data-row .label {
        min-width: 90px;
      }
      #lang-toggle {
        font-size: 1rem;
        padding: 6px 16px;
      }
      .sun-data {
        font-size: 1rem;
      }
      .sun-data .label {
        min-width: 90px;
      }
    }