@import './init.css';
@import './flex.css';

/* body is initially invisible */
body {
  /* Lighthouse fails on "opacity: 0":
  https://stackoverflow.com/questions/55826735/how-to-fix-lighthouse-returned-error-no-fcp-when-running-google-page-speed-t */
  opacity: 0.0001;
}

/* becomes visible when all is loaded */
body.ready {
  opacity: 1;
  transition: 0.6s opacity;
}

body {
  /* body is not shorter than the viewport */
  min-height: 100vh;
  /* body is a centered column */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* main body parts */
body > header,
body > section,
body > footer {
  /* are full width */
  width: 100%;
  /* anchor the inner elements */
  position: relative;
  /* a centered column */
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* the header is sticky */
body > header {
  position: sticky;
  top: 0;
  z-index: 10;
}

body.MOBIL > header {
  position: relative;
}

/* the footer is not above the viewport bottom */
body > footer {
  bottom: 0;
}

/*sekce standardne nema background - gradient ma jen  nektera */
body > section.gradient{
  background: linear-gradient(
    to bottom,
    rgba(238, 238, 238, 0),
    rgba(238, 238, 238, 0.8)
  );
}
body > section {

}

/* the last section stretches, if needed */
body > section:last-of-type {
  flex-grow: 1;
}

/* icons */
.icon {
  fill: currentColor;
}

.icon {
  width: 1rem;
  height: 1rem;
}

/* decorations */
:root {
  /* round things */
  --large-radius: 1.12rem;
  --small-radius: 0.4rem;
  /* scrollbars */
  --sb-wdt: 7px;
  --sb-brd: 1px;
  --sb-fg: var(--gray);
  --sb-bg: var(--white);
}

/* scrollbars */
::-webkit-scrollbar {
  width: var(--sb-wdt);
  height: var(--sb-wdt);
}

::-webkit-scrollbar-track {
  background: var(--sb-bg);
}

::-webkit-scrollbar-thumb {
  background: var(--sb-fg);
  border: var(--sb-brd) solid var(--sb-bg);
  border-radius: var(--sb-wdt);
}

::-webkit-scrollbar-thumb:hover {
  border-color: var(--sb-fg);
}

/* utils */
.pointer {
  cursor: pointer;
}

.pointer:hover {
  text-decoration: underline;
}