style.css

/* Základní styly */
body {
  background-color: #000000;
  color: #ffffff;
  font-family: Arial, sans-serif;
  text-align: center;
  margin: 0;
  padding: 0;
}

.h1 {
  color: #ffffff;
}
.container {

  margin: 0 auto;
  padding: 10px;

}


.card-text {
  font-size: 18px;
  margin: 20px;
}


/* Denní režim */
body:not(.night-mode) .card {
  background-color: black;
  /* Bílé pozadí pro karty pouze v denním režimu */
}

/* Noční režim */
.night-mode .body {
  margin: 1em;
  background-color: rgb(0, 0, 0);
  /* Černé pozadí v nočním režimu */
  color: black;
  /* Bílá barva textu v nočním režimu */
}

/* Barva pozadí pro nadpisy karet v nočním režimu */
@media (prefers-color-scheme: dark) {
  .card-header {
    background-color: #000000;
    /* Barva pozadí pro nadpisy karet v nočním režimu */
  }
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: #000000;

  }

  p {
    font-size: 16px;
    margin: 10px;

  }

  .card-header {
    background-color: #000000;
    color: #ffffff;
  }

  body:not(.night-mode) .card {
    background-color: #fff;
    /* Bílé pozadí pro karty pouze v denním režimu */
  }

  /* Styly pro černé pozadí .card-body v nočním režimu */
  body.night-mode .card {
    background-color: #000000;
    color: #000000;
  }

  .jumbotron {
    background-color: #000000;
  }

  .list-group-item {
    background-color: #000000;
    border-color: #000000;
  }

  html.can-touch .link-item:hover {
    /* disable hover effect when input is touch */
    background-color: #000000;
  }

  html.can-touch .link-item:active {
    /* disable hover effect when input is touch */
    background-color: #000000;
  }
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.custom-logo {
  width: 200px;
  /* změňte na požadovanou šířku */
  height: auto;
  /* zachovává poměr stran pro zachování kvality */
  position: absolute;
  /* Použijte absolutní pozici pro přesné umístění */
  top: -10px;
  /* Vzdálenost od horního okraje stránky (upravte podle potřeby) */
  left: -20px;
  /* Vzdálenost od levého okraje stránky (upravte podle potřeby) */
}


/* Nové styly */
.header {
  background-image: linear-gradient(to right, #667eea, #764ba2);
  transition: background-color 0.3s ease;
}

body:not(.night-mode) .card {
  background-color: #000000;
  /* Bílé pozadí pro karty pouze v denním režimu */
}

.custom-btn {
  background-image: linear-gradient(to right, #667eea, #764ba2);
  color: rgb(255, 255, 255);
  border-radius: 5px;
  text-decoration: none;
  /* Odstraní podtržení textu */
  align-items: center;
  padding: 10px;



}

.custom-btn:hover {
  background-image: linear-gradient(to right, #667eea, #764ba2);
  color: black;
  text-decoration: none;
  /* Odstraní podtržení textu */
  align-items: center;
  padding: 10px;


}

/* Styly pro černé pozadí .card-body v nočním režimu */
body.night-mode .card {
  background-color: #fff;
  /* Černé pozadí pro .card-body v nočním režimu */
}

div .card {

  width: 200px;
  /* Nastavte požadovanou maximální šířku */
  margin: 0 auto;
  /* Zarovná tělo do středu karty */
}

.card-title {
  margin: 5px;

}

.card {

  transition: transform 0.3s ease;
  background-color: #f0f0f0;
  border: 1px solid #ddd;
  margin-bottom: 20px;
  /* Přidá mezeru mezi kartami */
}

.card:hover {
  transform: scale(1.05);
}

.card .card-title {
  color: #764ba2;
}

.tabs a {
  margin-right: 50px;
  /* Přidá větší mezeru mezi jednotlivými tlačíky */
}


.night-mode {
  background-color: #F8F8FF;
  /* Nastavte vhodnou barvu pozadí pro režim noci */
  color: #000000;
  /* Nastavte barvu textu pro režim noci */
  /* Zde můžete definovat další styly specifické pro režim noci */
}

.nightModeButton {
  margin-right: 20px;
  /* Změňte tuto hodnotu podle vašich potřeb */
}

div.col-md-4 {

  margin-bottom: 20px;
}
.row {
  margin: 20px;
  padding: 20px;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  /* Tři sloupce se stejnou šířkou */
  gap: 20px;
  /* Mezera mezi kartami */
  justify-items: center;
  /* Zarovná kartu na střed v rámci sloupce */
}

/* Media query pro menší šířku okna */
@media (max-width: 950px) {

  /* Změna uspořádání karet na jeden a půl sloupce */
  .row {
    grid-template-columns: repeat(2, 1fr);

      margin: 0px;
      padding: 0px;
      display: grid;

      gap: 0px;
      justify-items: center;
  }
  }

  /* Skrytí logo */
  .custom-logo {
    display: none;
  }

  /* Další styly pro karty v režimu s jedním a půl sloupce */
  .card {
    margin-bottom: 10px;
    width: calc(50% - 10px);
    /* Karta bude zabírat polovinu šířky s mezerou mezi nimi */
  }

h2 {
  margin: 10px;
}

h5 {
  font-size: 20px;
}

.button-odkazy {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 10px;
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100%;
  max-width: 400px;
  box-sizing: border-box;
  margin-top: 20px;
  /* Posune obsah dolů o 20px */
  margin-left: 20px;
  
}

.button-odkazy a,
.button-odkazy button {
  margin-left: 10px;
  text-decoration: none;
  color: #ffffff;
  transition: color 0.3s;
  background: none;
  /* Odstranění pozadí */
  border: none;
  /* Odstranění rámečku */
  padding: 0;
  /* Odstranění vnitřního odsazení */
  outline: none;
  /* Odstranění modrého pozadí po stisknutí */
}

.button-odkazy a:hover,
.button-odkazy button:hover {
  background: none;
  /* Odstranění pozadí */
  color: #ff9900;
}