* {
  margin: 0;
  padding: 0;
}

:root {
  --scale: 1;
}

html {
  height: 100vh;
  overflow: hidden;
}

body {
  font-family: 'Arial', sans-serif;
  width: 100vw;
  height: 100vh;
  color: #333;
  background: white;
  background-size: 95% 95%;
  perspective: 1px;
  transform-style: preserve-3d;
  overflow-x: hidden;
  overflow-y: scroll;
  z-index: -5;
  transition: background-color 0.3s ease;
}

.post-container {
  max-height: fit-content;
  position: absolute;
  right: 1.95vw; /* 30px / 1536px */
  top: 41.1vh; /* 300px / 730px */
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2.6vh; /* 20px / 730px */
  max-width: 90vw;
}

.post {
  width: calc(26.04vw * var(--scale)); /* 400px / 1536px */
  height: calc(85.62vh * var(--scale)); /* 625px / 730px */
  min-height: fit-content;
  max-height: fit-content;
  background: white;
  border-radius: calc(0.65vw * var(--scale)); /* 10px / 1536px */
  box-shadow: 0 calc(0.13vw * var(--scale)) calc(0.65vw * var(--scale)) rgba(0, 0, 0, 0.2);
  transform: scale(var(--scale));
  transform-origin: center;
  transition: transform 0.3s ease;
}

.post:visited {
  transform: translateX(-16.28vw) scale(125%); /* 250px / 1536px */
}

.post-header {
  display: flex;
  align-items: center;
  padding: calc(0.65vw * var(--scale)); /* 10px / 1536px */
}

.profile-pic {
  object-fit: cover;
  width: calc(2.6vw * var(--scale)); /* 40px / 1536px */
  height: calc(2.6vw * var(--scale)); /* 40px / 1536px */
  border-radius: 50%;
  margin-right: calc(0.65vw * var(--scale)); /* 10px / 1536px */
}

.username {
  font-weight: bold;
  font-size: calc(1.04vw * var(--scale)); /* 16px / 1536px */
}

.post-image {
  margin-left: calc(1.63vw * var(--scale)); /* 25px / 1536px */
  object-fit: cover;
  width: calc(22.79vw * var(--scale)); /* 350px / 1536px */
  border-radius: calc(0.65vw * var(--scale)); /* 10px / 1536px */
}

.post-icons {
  display: flex;
  justify-content: space-between;
  padding: calc(0.65vw * var(--scale)); /* 10px / 1536px */
  font-size: calc(1.3vw * var(--scale)); /* 20px / 1536px */
}

.post-icons i {
  cursor: pointer;
  margin-right: calc(0.65vw * var(--scale)); /* 10px / 1536px */
  transition: color 0.3s;
}

.liked {
  color: red;
}

.post-caption {
  padding: calc(0.65vw * var(--scale)); /* 10px / 1536px */
  font-size: calc(0.91vw * var(--scale)); /* 14px / 1536px */
}

.username-caption {
  font-weight: bold;
}

.hashtagy {
  color: #0060df;
}

.hashtagy:hover,
.hashtagy:active {
  color: #0b76ce;
}

#kalendar {
  position: absolute;
  top: 82.19vh; /* 600px / 730px */
  width: 40%;
  padding: 1.3vw; /* 20px / 730px */
  background: rgba(255, 255, 255, 0.8);
  margin: 2.6vh; /* 20px / 730px */
  border: solid 0.2vw black; /* 3px / 1536px */
  border-radius: 15px; /* 15px / 730px */
  text-align: center;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 0.65vw; /* 10px / 730px */
  padding: 1.3vw; /* 20px / 730px */
}

.day, .date {
  font-size: 1.041vw;
  padding: 0.98vw; /* 15px / 730px */
  text-align: center;
  border: 1px solid #ccc;
  border-radius: 5px; /* 5px / 730px */
  background: white;
}

.date.heart {
  background: white;
  border: 1px solid #ccc;
  border-radius: 5px; /* 5px / 730px */
}

.date.heart::before {
  content: "24";
  position: absolute;
  top: 75.5%;
  left: 75.5%;
  transform: translate(-50%, -50%);
  color: white;
  font-weight: bold;
  z-index: 2;
}

.date.heart::after {
  content: "❤️";
  position: absolute;
  top: 75.5%;
  left: 75.5%;
  transform: translate(-50%, -50%) scale(2);
  color: red;
  z-index: 1;
}

#nazov-galerie {
  display: block;
  position: relative;
  top: 0;
}

.nazov-galerie {
  font-size: 1.562vw;
  border: solid 0.26vw black; /* 4px / 1536px */
  border-radius: 10px; /* 10px / 730px */
  background-color: white;
  padding: 0.27vh; /* 2px / 730px */
}

#galeria {
  position: absolute;
  top: 205.48vh; /* 1500px / 730px */
  display: block;
  flex-direction: row, column;
  justify-content: left;
  padding: 1.3vw; /* 20px / 730px */
  margin-right: 13.02vw; /* 200px / 1536px */
  z-index: 3;
  column-span: all;
}

.galeria {
  display: flex;
  flex-wrap: wrap;
  gap: 0.65vw; /* 10px / 730px */
}

.gallery-item {
  margin: 0.65vw; /* 10px / 730px */
  position: relative;
  cursor: pointer;
  overflow: hidden;
}

.gallery-item img {
  width: 13.02vw; /* 200px / 1536px */
  height: auto;
  transition: transform 0.3s ease, filter 0.3s ease;
}

.caption {
  font-size: 1.04vw;
}

.gallery-item .caption {
  position: absolute;
  bottom: -13.7vh; /* 100px / 730px */
  left: -1.37vh; /* 10px / 730px */
  width: 100%;
  background-color: rgba(0, 0, 0, 0.7);
  color: white;
  text-align: center;
  padding: 1.37vh; /* 10px / 730px */
  transition: bottom 0.3s ease;
}

.gallery-item.active img {
  transform: translateY(-1.37vh) scale(1.1); /* 10px / 730px */
  filter: blur(0);
  z-index: 10;
}

.gallery-item.active .caption {
  bottom: 0;
}

body.active::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 670%;
  background-color: rgba(0, 0, 0, 0.7);
  filter: blur(0.34vh) brightness(0.5); /* 5px / 730px */
  z-index: 1;
}

body.active .gallery-item:not(.active) {
  filter: blur(0.34vh) brightness(0.5); /* 5px / 730px */
}

.parallax-container {
  position: relative;
  width: 100%;
  min-height: 300vh;
  transform-style: preserve-3d;
}

.parallax-bg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 150vh;
  background: url(obloha.jpg) top center;
  background-size: cover;
  transform: translateZ(-1px) scale(2);
  filter: blur(0.27vh); /* 2px / 730px */
  z-index: -2;
}

.parallax-stromy {
  position: sticky;
  bottom: 0;
  width: 100%;
  height: 330%;
  background: url(stromy-parellax.png) top center;
  background-repeat: no-repeat;
  background-size: cover;
  filter: blur(0.41vh); /* 3px / 730px */
  z-index: -1;
}

.parallax-container2 {
  width: 100%;
  min-height: 200vh;
  position: relative;
  transform-style: preserve-3d;
}

h1 {
  font-weight: 700;
  font-size: 3.91vw; /* 60px / 1536px */
  font-family: 'Great Vibes', cursive;
  text-align: center;
}

h2 {
  font-size: 1.56vw;
}

.nadpis {
  position: absolute;
  top: 6.85vh; /* 50px / 730px */
  border: solid 0.26vw black; /* 4px / 1536px */
  border-radius: 10px; /* 10px / 730px */
  background-color: white;
  padding: 0.27vh; /* 2px / 730px */
  text-align: center;
  transform: translateX(-50%);
}

.milujem {
  font-weight: 700;
  text-decoration: underline;
  font-family: 'Parisienne', cursive;
}

#countdown-container {
  position: absolute;
  top: 346.58vh; /* 2530px / 730px */
  left: 5.53vw; /* 85px / 1536px */
  background-color: #ffffff;
  border-radius: 15px; /* 15px / 730px */
  box-shadow: 0 0.27vh 2.05vh rgba(0, 0, 0, 0.2); /* 4px / 730px, 15px / 730px */
  padding: 1.95vw; /* 30px / 730px */
  text-align: center;
  max-width: 26.04vw; /* 400px / 1536px */
  width: 100%;
}

.countdown-title {
  font-size: 1.56vw; /* 24px / 1536px */
  color: #333333;
  margin-bottom: 2.74vh; /* 20px / 730px */
}

.countdown {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.countdown-item {
  background-color: #ff6f61;
  color: #ffffff;
  border-radius: 10px; /* 10px / 730px */
  padding: 0.98vw; /* 15px / 730px */
  width: 5.21vw; /* 80px / 1536px */
  text-align: center;
  box-shadow: 0 0.27vh 1.37vh rgba(0, 0, 0, 0.1); /* 2px / 730px, 10px / 730px */
}

.countdown-number {
  font-size: 2.08vw; /* 32px / 1536px */
  font-weight: bold;
}

.countdown-label {
  font-size: 0.91vw; /* 14px / 1536px */
  margin-top: 0.68vh; /* 5px / 730px */
}

#secret {
  position: relative;
}

#tajna-sekcia {
  max-height: fit-content;
  position: absolute;
  top: 438.36vh; /* 3200px / 730px */
  right: 71.61vw; /* 1100px / 1536px */
}

.hidden {
  display: none;
  border: 1px solid #ccc;
  padding: 1.37vh; /* 10px / 730px */
  margin-top: 1.37vh; /* 10px / 730px */
  background: #f9f9f9;
}

.text-ku-ig-kalendar-a-galerii {
  text-align: justify;
  position: absolute;
  top: 143.84vh; /* 1050px / 730px */
  right: 2.28vw;
  width: 48.44vw;
 /* 35px / 1536px */
  padding: 0.68vh; /* 5px / 730px */
  padding-left: 2.05vh; /* 15px / 730px */
  padding-right: 2.05vh; /* 15px / 730px */
  font-size: 1.37vw; /* 21px / 1536px */
  line-height: 1.5;
  background-color: rgba(255, 255, 255, 0.8);
  border: solid 0.2vw black; /* 3px / 1536px */
  border-radius: 10px; /* 15px / 730px */
  z-index: 0;
}

.jadro-pkg {
  position: absolute;
  top: 143.84vh; /* 1050px / 730px */
  right: 0.65vw; /* 10px / 1536px */
  font-size: 1.37vw; /* 21px / 1536px */
  line-height: 1.5;
  z-index: 2;
  text-align: justify;
}

.uvod {
  text-align: justify;
  position: absolute;
  top: 31.51vh; /* 230px / 730px */
  left: 1.3vw;
  width: 62.79vw;
  padding: 0.68vh; /* 5px / 730px */
  font-size: 1.37vw; /* 21px / 1536px */
  line-height: 1.5;
  background-color: rgba(255, 255, 255, 0.8);
  border: solid 0.2vw black; /* 3px / 1536px */
  border-radius: 10px; /* 15px / 730px */
}

.prvy-odsek {
  position: absolute;
  top: 0;
  padding-right: 35.81vw; /* 550px / 1536px */
  padding-left: 1.95vw; /* 30px / 1536px */
  font-size: 1.37vw; /* 21px / 1536px */
  line-height: 1.5;
}

.jadro-g {
  text-align: justify;
  position: absolute;
  top: 305.48vh; /* 2230px / 730px */
  margin-left: 1.3vw; /* 20px / 1536px */
  margin-right: 1.3vw; /* 20px / 1536px */
  padding: 0.68vh; /* 5px / 730px */
  padding-left: 2.05vh; /* 15px / 730px */
  padding-right: 2.05vh; /* 15px / 730px */
  font-size: 1.37vw; /* 21px / 1536px */
  line-height: 1.5;
  background-color: rgba(255, 255, 255, 0.8);
  border: solid 0.2vw black; /* 3px / 1536px */
  border-radius: 10px; /* 15px / 730px */
}

.text-ku-galerke {
  position: absolute;
  top: 305.48vh; /* 2230px / 730px */
  padding-right: 35.81vw; /* 550px / 1536px */
  padding-left: 1.95vw; /* 30px / 1536px */
  font-size: 1.37vw; /* 21px / 1536px */
  line-height: 1.5;
}

.countdown-odsek {
  text-align: justify;
  position: absolute;
  top: 376.71vh; /* 2750px / 730px */
  margin-left: 1.3vw; /* 20px / 1536px */
  margin-right: 58.59vw; /* 900px / 1536px */
  padding: 0.68vh; /* 5px / 730px */
  padding-left: 2.05vh; /* 15px / 730px */
  padding-right: 2.05vh; /* 15px / 730px */
  font-size: 1.37vw; /* 21px / 1536px */
  line-height: 1.5;
  background-color: rgba(255, 255, 255, 0.8);
  border: solid 0.2vw black; /* 3px / 1536px */
  border-radius: 10px; /* 15px / 730px */
}

.countdown-text {
  position: absolute;
  top: 376.71vh; /* 2750px / 730px */
  padding-right: 35.81vw; /* 550px / 1536px */
  padding-left: 1.95vw; /* 30px / 1536px */
  font-size: 1.37vw; /* 21px / 1536px */
  line-height: 1.5;
}

.timeline {
  position: absolute;
  top: 345.21vh; /* 2520px / 730px */
  right: -9.77vw; /* 150px / 1536px */
  max-width: 800px; /* 800px / 1536px */
  margin: 0 auto;
  padding: 2.6vw 0; /* 40px / 730px */
}

.timeline::after {
  content: '';
  position: absolute;
  width: 0.26vw; /* 4px / 1536px */
  background: linear-gradient(to bottom, #ff7eb9 0%, #ff7eb9 100%);
  top: 2.74vh; /* 20px / 730px */
  bottom: 2.74vh; /* 20px / 730px */
  left: 20%;
  margin-left: -0.13vw; /* 2px / 1536px */
  z-index: -1;
}

.milnik {
  padding: 2.05vh 1.95vw; /* 15px / 730px, 30px / 1536px */
  position: relative;
  width: 40%;
  background-color: inherit;
}

.milnik::after {
  content: '';
  position: absolute;
  width: 1.3vw; /* 20px / 1536px */
  height: 1.3vw; /* 20px / 1536px */
  right: -0.65vw; /* 10px / 1536px */
  background-color: #fff;
  border: 0.2vw solid #ff7eb9; /* 3px / 1536px */
  top: 2.05vh; /* 15px / 730px */
  border-radius: 50%;
  z-index: 0;
  transition: background-color 0.3s ease;
}

.left {
  left: -30.5%; /* 300px / 1536px */
}

.right {
  left: 20%;
}

.left::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 2.47vh; /* 18px / 730px */
  width: 0;
  z-index: 0;
  right: 1.43vw; /* 22px / 1536px */
  border: medium solid #fff;
  border-width: 8px 0 8px 8px; /* 8px / 730px */
  border-color: transparent transparent transparent #fff;
  transition: transform 0.3s ease;
}

.right::before {
  content: " ";
  height: 0;
  position: absolute;
  top: 2.47vh; /* 18px / 730px */
  width: 0;
  z-index: 0;
  left: 1.43vw; /* 22px / 1536px */
  border: medium solid #fff;
  border-width: 8px 8px 8px 0; /* 8px / 730px */
  border-color: transparent #fff transparent transparent;
  transition: transform 0.3s ease;
}

.right::after {
  left: -0.65vw; /* 10px / 1536px */
}

.content {
  padding: 0.98vw; /* 15px / 730px */
  background-color: #fff;
  border-radius: 8px; /* 8px / 730px */
  box-shadow: 0 0.27vh 1.37vh rgba(0, 0, 0, 0.1); /* 4px / 730px, 10px / 730px */
  position: relative;
  transition: transform 0.3s ease;
}

.content h2 {
  color: #ff7eb9;
  margin-top: 0;
  font-size: 1.25vw; /* 19.2px / 1536px */
}

.content p.date {
  font-style: italic;
  color: #888;
  margin-bottom: 1.1vh; /* 8px / 730px */
  font-size: 0.94vw; /* 14.4px / 1536px */
}

.content img {
  display: block;
  position: relative;
  left: 10%;
  object-fit: cover;
  width: 9.77vw; /* 150px / 1536px */
  height: calc(9.755vw * 0.75); /* 112.5px / 730px */
  border-radius: 8px; /* 8px / 730px */
  margin-bottom: 0.52vw; /* 8px / 730px */
}

.content p {
  line-height: 1.5;
  font-size: 0.94vw; /* 14.4px / 1536px */
}

.milnik:hover .content {
  transform: scale(1.05) translateX(-0.13vw); /* 2px / 1536px */
}

.milnik:hover::after {
  background-color: #ff7eb9;
}

.milnik:hover::before {
  transform: scale(1.2);
}

.timeline-nadpis {
  border: solid 0.26vw black; /* 4px / 1536px */
  text-align: center;
  border-radius: 10px; /* 10px / 730px */
  background-color: white;
  padding: 0.33vw; /* 5px / 730px */
  display: block;
  position: absolute;
  top: -13.7vh; /* 100px / 730px */
  left: 55%;
  transform: translateX(-135%);
  font-size: 1.56vw; /* 24px / 1536px */
  z-index: 0;
}

.timeline-odsek {
  position: relative;
  top: 4.11vh; /* 30px / 730px */
}

#narodeniny-obrazok {
  object-fit: cover;
  object-position: 100% 25%;
}

#secret {
  position: relative;
}

#tajna-sekcia {
  width: 29.3vw; /* 450px / 1536px */
  height: 82.19vh; /* 600px / 730px */
  position: absolute;
  left: 10.42vw; /* 160px / 1536px */
  text-align: center;
  border: solid 0.26vw black; /* 4px / 1536px */
  border-radius: 10px; /* 10px / 730px */
  background-color: white;
  padding: 0.68vh; /* 5px / 730px */
  top: 568.49vh; /* 4150px / 730px */
  right: 71.61vw; /* 1100px / 1536px */
}


.hidden {
  display: none;
  border: 1px solid #ccc;
  padding: 1.37vh; /* 10px / 730px */
  margin-top: 1.37vh; /* 10px / 730px */
  background: #f9f9f9;
}

.hidden-text {
  font-size: 1.04vw;
}

.tajny-obraz {
  width: 11.39vw; /* 175px / 1536px */
}

#prihovor-tajna-sprava {
  text-align: justify;
  font-size: 1.04vw; /* 16px / 1536px */
  line-height: 1.5;
  padding: 0.68vh; /* 5px / 730px */
}

.posledny-odsek {
  text-align: justify;
  position: absolute;
  top: 479.45vh; /* 3500px / 730px */
  margin-left: 1.3vw; /* 20px / 1536px */
  margin-right: 45.57vw; /* 700px / 1536px */
  padding: 0.68vh; /* 5px / 730px */
  padding-left: 2.05vh; /* 15px / 730px */
  padding-right: 2.05vh; /* 15px / 730px */
  font-size: 1.37vw; /* 21px / 1536px */
  line-height: 1.5;
  background-color: rgba(255, 255, 255, 0.8);
  border: solid 0.2vw black; /* 3px / 1536px */
  border-radius: 10px; /* 15px / 730px */
}

.posledny-text {
  position: absolute;
  top: 479.45vh; /* 3500px / 730px */
  padding-right: 35.81vw; /* 550px / 1536px */
  padding-left: 1.95vw; /* 30px / 1536px */
  font-size: 1.37vw; /* 21px / 1536px */
  line-height: 1.5;
}

.arrow {
  width: 30.41vw;
  position: absolute;
  top: 454.79vh; /* 3320px / 730px */
  left: 39.06vw; /* 600px / 1536px */
}

@media (max-width: 768px) {
  .uvod {
    top: min(31.51vh, 150px);
  }

  .post-container {
    top: min(41.1vh, 200px);
  }

  #kalendar {
    top: min(82.19vh, 300px);
  }

  .text-ku-ig-kalendar-a-galerii {
    top: min(143.84vh, 450px);
    width: min(48.44vw, 150px);
    @media (orientation: landscape) {
      width: min(48.44vw, 50%);
    }
  }

  #galeria {
    top: min(205.48vh, 600px);
    @media (orientation: landscape) {
      top: min(205.48vh, 650px);
    }
  }

  .jadro-g {
    top: min(305.48vh, 820px, 105.96vh);
    @media (orientation: landscape) {
      top: max(305.48vh);
    }
  }

  #countdown-container {
    top: min(376.71vh, 900px, 117vh);
    @media (orientation: landscape) {
      top: min(376.71vh, 1170px);
    }
  }

  .countdown-odsek {
    top: min(376.71vh, 990px, 127vh);
    @media (orientation: landscape) {
      top: min(376.71vh);
    }
  }

  .timeline {
    top: min(345.21vh, 890px, 116vh);
    max-height: fit-content;
    @media (orientation: landscape) {
      top: min(345.21vh);
    }
  }

  .timeline-nadpis {
    top: max(-13.7vh, -10px);
    @media (orientation: landscape) {
      top:max(-13.7vh);
    }
  }

  .arrow {
    top: min(454.79vh, 1270px, 158vh);
    @media (orientation: landscape) {
      top: min(454.79vh);
    }
  }

  .posledny-odsek {
    top: min(479.45vh, 1320px, 164vh);
    @media (orientation: landscape) {
      top: min(479.45vh);
    }
  }

  #tajna-sekcia {
    top: min(568.49vh, 1560px, 190vh);
    @media (orientation: landscape) {
      top: min(568.49vh);
    }
  }

  #heslo {
    width: 25vw;
  }

  .parallax-bg {
    height: 150vh;
    @media (orientation: landscape) {
      height: 150vh;
    }
  }

  .parallax-stromy {
    @supports (-webkit-touch-callout: none) {
      overflow: hidden;
      position: absolute;
      bottom: min(-136.5vh);
      min-height: 90%;
      @media (orientation: landscape) {
        position: sticky;
        bottom: 0;
        height: 370%;
      }
    }
    @supports not (-webkit-touch-callout: none) {
      overflow: hidden;
      position: absolute;
      bottom: min(-122.5vh);
      min-height: 90%;
      @media (orientation: landscape) {
        position: sticky;
        bottom: 0;
        height: 370%;
      }
    }
  }


  .parallax-container {
    min-height: 1vh;
    @media (orientation: landscape) {
      height: 300vh;
    }
  }

  body {
    @supports (-webkit-touch-callout: none) {
      height: calc(100dvh - 0.5px);
     @media (orientation: landscape) {
      height: 100vh;
      background-size: 120%, 110%; 
      }
    }
    @supports not (-webkit-touch-callout: none) {
      height: calc(100vh - 0.5px);
      @media (orientation: landscape) {
        height: 100vh;
        background-size: 120%, 110%; 
      }
    }
  }
}