/* || RESET */
*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

ol,
ul {
  list-style-type: none;
}

h1,
h2 {
  text-align: center;
}

/* input,
button,
textarea {
    font: inherit;
} */

/* img {
  display: block;
  max-width: 100%;
  height: auto;
} */

/* || VARIABLES */
:root {
  /* FONTS */
  --FONT-FAMILY: 'Courier New', Courier, monospace;
  --FONT-SIZE: clamp(0.75rem, 3vh, 1.05rem);
  --FONT-COLOR: white;
  --FONT-WEIGHT: 700;

  /* COLORS */
  --BGCOLOR: black;
  --BGCOLOR-TRANSPARENT: rgba(255, 255, 255, 0.4);
  --BLUR: 8px;
  /* --ALT-BGCOLOR: #333; */
  /* --LIGHT-COLOR: yellow; */
  /* --VERY-LIGHT-COLOR: whitesmoke; */
  --DARK-COLOR: #000;

  /* TIME */
  --DURATION: 5s;

  /* BORDERS */
  --BORDER_RADIUS: 15px;
  --BORDERS: 2px solid var(--FONT-COLOR);
  /* --BORDERS-ALT: 6px solid var(--FONT-COLOR); */

  /* STANDARD PADDING */
  /* --PADDING-TB: 0.5em; */
  /* --PADDING-SIDE: 0.5em; */
  /* --PADDING: 0.5em; */
  /* --PADDING-SMALL: 0.2em; */

  /* STANDARD MARGIN */
  --MARGIN: 0.5em;

  /* GAPS */
  /* --GAP: 2em; */

  /* SHADOWS */
  --BOX-SHADOWS: 5px 10px 18px var(--FONT-COLOR);
  /* --BOX-SHADOWS-ALT: 5px 10px 18px var(--LIGHT-COLOR); */
}

/* || UTILITY CLASSES */

.nowrap {
  white-space: nowrap;
}

/* .underline {
  text-decoration: underline;
} */

/* .center {
  text-align: center;
} */

/* .offscreen {
  position: absolute;
  left: -10000px;
} */

/* || GENERAL STYLES */

html {
  scroll-behavior: smooth;
  background-color: var(--BGCOLOR);
  font-size: var(--FONT-SIZE);
  font-family: var(--FONT-FAMILY);
  color: var(--FONT-COLOR);
  font-weight: var(--FONT-WEIGHT);
}

body {
  min-height: 100vh;
  background-image: url("./images/Kremnické\ vrchy.jpg");
  background-size: cover;
  /* background-repeat: no-repeat; */
  display: flex;
  flex-direction: column;
  padding: 1em 1em;
}

/* ||  */

.header__h1,
.main__h2 {
  padding: 0.1em 0.1em;
}

.header__h1 {
  animation: zoom var(--DURATION) infinite;
}

@keyframes zoom {

  0% {
    transform: scale(1)
  }

  50% {
    transform: scale(.5)
  }

  100% {
    transform: scale(1)
  }
}

.header,
.main__section,
.footer,
.clock {
  border-radius: var(--BORDER_RADIUS);
  overflow: hidden;
  -webkit-backdrop-filter: blur(var(--BLUR));
  backdrop-filter: blur(var(--BLUR));
  background-color: var(--BGCOLOR-TRANSPARENT);
  border: var(--BORDERS);
  box-shadow: var(--BOX-SHADOWS);
  /* margin: 0.7em 0; */
}

.header,
.footer,
.clock {
  width: fit-content;
}

.main {
  flex-grow: 1;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  padding: 1em 0;
  gap: 1em;
}

.main__section {
  height: fit-content;

}

.header__ol,
.footer__ol {
  display: flex;
  flex-wrap: wrap;
}

.header__ol {
  border-top: 2px solid var(--FONT-COLOR);
}

.header__li,
.footer__li {
  flex-grow: 1;
  display: flex;
}

.main__li {
  border-top: 2px solid var(--FONT-COLOR);
  /* display: flex; */
}

.header__a,
.footer__a,
.main__a {
  padding: 3px 20px;
  display: grid;
  place-content: center;
}

.main__a {
  place-content: start;
}

.header__li:not(:has(.header__a)),
.footer__li:not(:has(.footer__a)),
.main__li:not(:has(.main__a)) {
  padding: 3px 15px;
}

a {
  flex-grow: 1;
  text-decoration: none;
}

a:any-link {
  color: var(--FONT-COLOR);
}

li:has(> a:hover),
li:has(> a:active),
li:has(> a:focus) {
  background-color: var(--DARK-COLOR);
}

.main__section:has(.main__h2:target) {
  animation: offsetBig 1s 1;
}

@keyframes offsetBig {

  0% {
    /* transform: scale(1) */
  }

  50% {
    outline: 10px solid var(--FONT-COLOR);
    outline-offset: -2px;
    /* transform: scale(.5) */
  }

  100% {
    /* transform: scale(1) */
  }
}

.clock {
  position: fixed;
  bottom: 1em;
  right: 1em;
  z-index: 1;
  padding: 0.5em;
  text-align: center;
}

.clock:first-letter {
  text-transform: uppercase;
}

.clock:hover::before {
  content: attr(data-Calendar);
}

.clock:hover::after {
  content: attr(data-Clock);
}

.clock:hover {
  font-size: calc(var(--FONT-SIZE)*0.85);
}

/* || MEDIA QUERIES */

/* DARK MODE */
@media (prefers-color-scheme: light) {
  .clock {
    border-color: transparent;
  }
}

/* SMALL SCREEN */
@media screen and (min-width: 576px) {}

/* MEDIUM SCREEN */
@media screen and (min-width: 768px) {}

/* LARGE SCREEN */
@media screen and (min-width: 992px) {}

/* XL SCREEN */
@media screen and (min-width: 1200px) {}

/* MOBILE DEVICE LANDSCAPE SCREEN */
@media screen and (max-height: 425px) and (min-aspect-ratio: 7/4) {}