body, main {
  background-color: #9cab98 !important;
  transition: all 0.5s;
}
/* #region navbar*/
.navbar div:first-of-type {
  width: 90%;
  gap: 15%;
}

.navbar {
  max-height: 10svh;
  backdrop-filter: blur(1px);
}

.navbar-brand {
  font-family: cursive, "Trebuchet MS", Arial, sans-serif;
}

.navbar-brand img {
  max-height: 3vh;
}

#hiddenNavbar {
  position: absolute;
  z-index: 1100;
  background-color: rgba(156, 171, 152, 0.85);
  backdrop-filter: blur(5px);
  font-size: 1.25em;
}

.fa-x {
  color: rgb(199, 0, 0);
  transition: 0.3s all;
}
/* #endregion */

/* #region content*/
main {
  min-height: 82svh;
  margin-top: 2vh;
}

.picture {
  min-height: 60vh;
  background: linear-gradient(rgba(156, 171, 152, 0) 90%, rgb(156, 171, 152) 100%), url(img/odpocivaciMistnost.webp) no-repeat 65% / cover;
  background-size: cover;
}

.box {
  transform: translateY(-25%);
}

.box,
.box2 {
  box-shadow: 0px 0px 30px rgb(22, 22, 22);
  background-color: #b4bbb2 !important;
  padding: clamp(1em, 5em, 3vw);
}

.box2 .d-flex {
  row-gap: clamp(1em, 2.5em, 2vw);
}

.box2 p,
.box2 li {
  font-size: clamp(0.6em, 0.9em, 1vw);
  line-height: 1.7;
}

.box div:first-child {
  row-gap: clamp(1em, 3em, 2vw);
}

.fa-solid,
.fa-brands {
  font-size: 1.75em;
}

.fa-solid {
  color: black !important;
}

.box h5 {
  text-wrap: balance;
}

.odpocivaci {
  width: 100%;
}

.ramecek {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

main h5 {
  font-size: clamp(0.75em, 1.25em, 1.4vw);
}

.listBorder {
  max-width: max-content;
  padding: clamp(5vh, 8vh, 10vw);
  background-color: transparent;
}

.list {
  height: clamp(10svh, 17svh, 15vw);
  filter: drop-shadow(10px 10px 10px rgb(22, 22, 22));
  position: absolute;
  user-select: none;
}

#list1 {
  top: 0;
  left: 0;
  rotate: 180deg;
}

#list2 {
  right: 0;
  bottom: 0;
}

#list3 {
  left: 0;
  bottom: 0;
  rotate: 90deg;
}

#list4 {
  right: 0;
  top: 0;
  rotate: 270deg;
}

.sponzoriLogo {
  height: clamp(3vh, 8vh, 5vw);
  user-select: none;
}

.link:hover {
  color: #626e60 !important;
  transition: 0.5s all;
}

.fa-brands:hover {
  opacity: 0.85;
  transition: 0.5s all;
}

.link p {
  font-size: clamp(0.6em, 0.8em, 1.3vw);
  text-wrap: balance;
}
/* #endregion */