/*
  Tohle je CSS soubor = "vzhled" stránky.
  CSS funguje tak, že si vybereš nějaký prvek (např. tlačítko)
  a nastavíš mu vlastnosti (barvu, velikost, mezery...).
*/

/*
  'body' je celé tělo stránky. Tady nastavíme základní vzhled celé plochy.
*/
body {
  /* font-family = jaké písmo se použije. 'sans-serif' = bezpatkové, čisté. */
  font-family: sans-serif;

  /*
    Tahle trojice vystředí obsah doprostřed obrazovky (vodorovně i svisle).
    display:flex zapne "pružné" rozložení, zbylé dva řádky centrují.
  */
  display: flex;
  justify-content: center;   /* vystředění vodorovně */
  align-items: center;       /* vystředění svisle */
  min-height: 100vh;         /* výška = 100 % výšky okna prohlížeče */

  margin: 0;                 /* zruší výchozí okraj, co prohlížeč přidává */

  /*
    Plynulý přechod barvy pozadí.
    Když JS změní pozadí, neskočí to natvrdo, ale hezky se to "přelije"
    během 0,4 sekundy.
  */
  transition: background-color 0.4s;
}

/*
  Naše karta - bílý box s obsahem uprostřed.
  Vybíráme ji přes '.karta' (tečka = vybírám podle class).
*/
.karta {
  background-color: white;
  padding: 40px;             /* vnitřní mezera mezi okrajem a textem */
  border-radius: 16px;       /* zaoblené rohy */
  text-align: center;        /* text na střed */

  /* box-shadow = jemný stín, aby karta vypadala, že "leží" nad pozadím */
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.15);
}

/*
  Tlačítko vybíráme přes '#tlacitko' (mřížka = vybírám podle id).
*/
#tlacitko {
  font-size: 18px;
  padding: 12px 24px;        /* 12px nahoře/dole, 24px vlevo/vpravo */
  border: none;              /* žádné ohraničení */
  border-radius: 8px;
  background-color: #3A7BD5; /* modrá */
  color: white;              /* barva textu na tlačítku */
  cursor: pointer;           /* kurzor se nad tlačítkem změní na "ručičku" */
  transition: transform 0.1s; /* příprava na efekt při najetí myší */
}

/*
  ':hover' = stav, KDYŽ je myš nad tlačítkem.
  Tady ho nepatrně zvětšíme, ať je vidět, že je "živé".
*/
#tlacitko:hover {
  transform: scale(1.05);    /* zvětšení na 105 % */
}

/* Menší šedý text pro informační řádky. */
.info {
  color: #555;
  margin: 8px 0;
}