:root {
  /* Hlavní barvy */
  --bila: rgb(255, 255, 255);       /* zluta   var(--bila)  */
  --cerna: rgb(0, 0, 0);       /* zluta   var(--cerna)  */

  --zluta: rgba(244, 154, 25, 1);       /* zluta   var(--zluta)  */
  --cervena: rgba(204, 0, 0, 1);      /* červená */
  --zelena: rgba(0, 152, 58, 1);      /* zelená */
  
  /* Neutrální barvy */
  --seda: rgb(195, 195, 195);   /* světlá šedá */
  --text-color: rgb(74, 74, 74);          /* tmavě modrá, lehce průhledná */

  /* Transparentní variace */
  --bila-70: rgba(255, 255, 255, 0.7);  /* poloprůhledná bílá */
  --bila-50: rgba(255, 255, 255, 0.5);  /* poloprůhledná bílá */ 
  --bila-20: rgba(255, 255, 255, 0.2);  /* poloprůhledná bílá */ 
  --cerna-30: rgba(0, 0, 0, 0.3);  
  --primary-color-50: rgba(52, 152, 219, 0.5);  /* poloprůhledná modrá */
  --secondary-color-30: rgba(231, 76, 60, 0.3); /* hodně průhledná červená */


  --font-small: 0.8rem;   /* malý text */
  --font-medium: 1rem;    /* standardní text */
  --font-large: 1.5rem;   /* velký text */
}

/* --- TEXT --- */
.text-small {
  font-size: var(--font-small);
}
.text-medium {
  font-size: var(--font-medium);
}
.text-large {
  font-size: var(--font-large);
}
.text-zluty {
  color: var(--zluta);
}
.text-zeleny {
  color: var(--zelena);
}
.text-cerveny {
  color: var(--cervena);
}
.text-bily {
  color: var(--bila);
}
.text-cerny {
  color: var(--cerna);
}

.gap {
  margin-left: 2rem; /* nebo px, % */
}
/* Odkazy */
.zluty-link {
  color: var(--zluta); /* !important přepíše jiné barvy */
  text-decoration: none;
}
.cerny-link {
  color: var(--cerna); /* !important přepíše jiné barvy */
  text-decoration: none;
}

.zeleny-hover:hover {
  color: var(--zelena); /* nebo jiná barva při hover */
  text-decoration: none;
}
.cerveny-hover:hover {
  color: var(--cervena); /* nebo jiná barva při hover */
  text-decoration: none;
}
.zluty-hover:hover {
  color: var(--zluta); /* nebo jiná barva při hover */
  text-decoration: none;
}
.cerny-hover:hover {
  color: var(--cerna); /* nebo jiná barva při hover */
  text-decoration: none;
}

/* Rozostření pozadí */
.frosted {
  backdrop-filter: blur(3px);                /* rozostření pozadí */
  -webkit-backdrop-filter: blur(10px);       /* Safari */
  border-radius: 0px;                        /* zaoblení rohů */
  border-bottom: 0px solid rgb(0, 0, 0); /* jemný obrys dole */
  padding: 0rem;
}

/* Reset */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}


body {
  font-family: Arial, sans-serif;
}