:root {
  --my-color-yellow: #f5c518;
  /* moje žlutá barva */
  --my-color-road-sign: #ffc600;
  /* moje žlutá barva - dopravní značka */
  --gray: #aaaaaa;
  /* moje šedá barva */
  --radius: 12px;
  --gap: 18px;
  --header-height: 15rem;
  /* velikost headeru */
  --header: 9rem;
  --desktop-font-size: 16px;
  --mobile-font-size: 12px;

  interpolate-size: allow-keywords;

}

*,
*::before,
*::after {
  box-sizing: border-box;
}

::selection {
  background: var(--my-color-road-sign);
  /* barva pozadí při označení */
  color: black;
  /* barva samotného textu */
}

html {
  height: 100%;
  font-size: var(--mobile-font-size);
  /* nebo procentuálně: 100% */
  -webkit-text-size-adjust: 100%;
  /* zabrání automatickému zoomu na iOS */
}

body {
  min-height: 100dvh;
  background: black;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0;
  padding: 0;
  color: white;
  font-family: monospace;
}

h1 {
  font-size: 2.5rem;
  text-align: center
}

/* cca 40px */
h2 {
  font-size: 2rem;
  text-align: center
}

/* cca 32px */
h3 {
  font-size: 1.75rem;
  text-align: center
}

/* cca 28px */
h4 {
  font-size: 1.5rem;
  text-align: center
}

/* cca 24px */
h5 {
  font-size: 1.25rem;
  text-align: center
}

/* cca 20px */
h6 {
  font-size: 1rem;
  text-align: center
}

/* 16px */

.close {
  font-size: 2rem;
  cursor: pointer;
  text-decoration: none;
  padding: 12px;
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 1001;
  color: whitesmoke;
}

.map-btn {
  font-size: 2rem;
  cursor: pointer;
  text-decoration: none;
  padding: 12px;
  position: fixed;
  top: 12px;
  right: 12px;
  z-index: 2;
  color: whitesmoke;
}

.static-background-layer {
  position: fixed;
  height: 100vh;
  width: 100vW;
  background: url("../img/GAME_BACKGROUND.jpg") center top no-repeat;
  background-size: cover;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.page-content {
  position: relative;
  margin-top: 100vh;
  /* Začne až POD hero */
  width: 100vw;
  z-index: 2;
  /* Nad hero */
}

.reflection {
    -webkit-box-reflect: below 0px linear-gradient(to bottom, #0000, #0001);
}

/* >= 768px (tablet) */
/* md */
@media (min-width: 768px) {}

/* >= 1024px (desktop) */
/* lg */
@media (min-width: 1024px) {
  html {
    font-size: var(--desktop-font-size);
  }
}