/* Globální styly */
html, body {
  margin: 0;
  padding: 0;
  width: 100%;
  height: 100%;
  background-color: #000000; /* Černé pozadí pro jistotu */
}

#desktop-version,
#mobile-version {
  width: 100%;
  height: 100%;
  display: none;
}

/* Desktop layout */
.frame {
  background-color: transparent;
  display: flex;
  flex-direction: row;
  justify-content: center;
  width: 100%;
  height: 100vh;
  overflow: hidden;
}

.frame .overlap-group-wrapper {
  background-image: url(https://c.animaapp.com/ClAUaoW0/img/web-bg-4.png);
  background-size: cover;
  background-position: center;
  width: 100%;
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.frame .overlap-group {
  position: relative;
  width: 1060px;
  height: 664px;
  background-color: rgba(0, 0, 0, 0.6);
  border: 8px solid;
  border-color: #faeab9;
  backdrop-filter: blur(8px) brightness(100%);
  -webkit-backdrop-filter: blur(8px) brightness(100%);
}

.frame .overlap {
  position: absolute;
  width: 964px;
  height: 547px;
  top: 65px;
  left: 48px;
}

.frame .div {
  position: absolute;
  width: 213px;
  height: 213px;
  top: 334px;
  left: 31px;
}

.frame .ellipse {
  position: absolute;
  width: 212px;
  height: 212px;
  top: 0;
  left: 0;
  background-color: #faeab9;
  border-radius: 106px;
}

.frame .mask-group {
  position: absolute;
  width: 210px;
  height: 206px;
  top: 7px;
  left: 3px;
}

.frame .text-wrapper {
  position: absolute;
  width: 425px;
  top: 333px;
  left: 289px;
  font-family: "Metal Mania", Helvetica;
  font-weight: 400;
  color: #faeab9;
  font-size: 64px;
  white-space: nowrap;
  z-index: 1;
}

.background-video {
  position: absolute;
  width: 897px;
  height: 280px;
  top: 0;
  left: 32px;
  border-radius: 0px;
  object-fit: cover;
  z-index: 0;
  pointer-events: none;
  border: none;
  clip-path: polygon(0.5% 5.8%, 99.5% 5.8%, 99.5% 94.2%, 0.5% 94.2%);
}

.frame .overlap-3 {
  position: absolute;
  width: 178px;
  height: 178px;
  top: 368px;
  left: 755px;
  background-image: url(https://c.animaapp.com/ClAUaoW0/img/instagram-qr-2@2x.png);
  background-size: cover;
  background-position: 50% 50%;
}

.frame .rectangle-2 {
  position: absolute;
  width: 46px;
  height: 46px;
  top: 66px;
  left: 66px;
  background-color: #132423;
  border-radius: 16px;
}

.frame .ig-logo {
  position: absolute;
  width: 40px;
  height: 40px;
  top: 69px;
  left: 69px;
  object-fit: cover;
}

.frame .text-wrapper-3 {
  position: absolute;
  width: 168px;
  top: 342px;
  left: 760px;
  font-family: "Metal Mania", Helvetica;
  font-weight: 400;
  color: #faeab9;
  font-size: 24px;
  text-align: center;
  white-space: nowrap;
}

.frame .p {
  position: absolute;
  width: 438px;
  top: 480px;
  left: 320px;
  font-family: "Metal Mania", Helvetica;
  font-weight: 300;
  color: #ffffff;
  font-size: 29px;
  text-align: center;
}