.questrial {
  font-family: "Questrial", sans-serif;
  font-weight: 400;
  font-style: normal;
}

* {
  padding: 0;
  margin: 0;
}
html {
  font-size: 0.83dvw;
}

main {
  display: block;
  position: fixed;
  width: 100dvw;
  height: 100dvh;
}
main > div {
  display: flex;
}

#pattern {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  left: 0;
  background: url("../images/back-desktop.jpg");
  background-size: cover !important;
  z-index: 0;
}
#socials,
#comming-soon {
  display: block;
  position: absolute;

  left: 50%;
  transform: translateX(-50%);
  z-index: 3;
  white-space: nowrap !important;
}
#comming-soon {
  bottom: calc(var(--fourth-border) + 12rem);
}
#socials {
  bottom: calc(var(--fourth-border) + 2rem);
}
#number-1 {
  display: block;
  height: 3dvh;
  position: absolute;
  left: 50%;
  top: 25%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
#logo {
  display: block;
  height: 20dvh;
  position: absolute;
  left: 50%;
  top: 45%;
  transform: translate(-50%, -50%);
  z-index: 2;
}
#number-1 > img,
#logo > img {
  display: block;
  height: 100%;
  width: auto;
  object-fit: contain;
}
h1 {
  font-size: 3rem;
  letter-spacing: 0.75rem;
}
p,
h3,
a {
  text-align: center;
  font-family: "Questrial", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: inherit;
  text-decoration: none;
}
h3 {
  letter-spacing: 0.25rem;
  font-weight: bold;
}
.desktop-show {
  display: block;
}

#frames {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
}

:root {
  --first-border: 2rem;
  --second-border: calc(var(--first-border) + 1.5rem);
  --third-border: calc(var(--second-border) + 1.5rem);
  --fourth-border: calc(var(--third-border) + 0.1rem);
}

img.frame-back {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  clip-path: polygon(
    var(--first-border) var(--first-border),
    var(--first-border) calc(100% - var(--first-border)),
    var(--second-border) calc(100% - var(--first-border)),
    var(--second-border) var(--second-border),
    calc(100% - var(--second-border)) var(--second-border),
    calc(100% - var(--second-border)) calc(100% - var(--second-border)),
    var(--second-border) calc(100% - var(--second-border)),
    var(--second-border) calc(100% - var(--first-border)),
    calc(100% - var(--first-border)) calc(100% - var(--first-border)),
    calc(100% - var(--first-border)) var(--first-border)
  );
}
img.frame-back2 {
  width: 100%;
  height: 100%;
  display: block;
  position: absolute;
  top: 0;
  left: 0;
  clip-path: polygon(
    var(--third-border) var(--third-border),
    var(--third-border) calc(100% - var(--third-border)),
    var(--fourth-border) calc(100% - var(--third-border)),
    var(--fourth-border) var(--fourth-border),
    calc(100% - var(--fourth-border)) var(--fourth-border),
    calc(100% - var(--fourth-border)) calc(100% - var(--fourth-border)),
    var(--fourth-border) calc(100% - var(--fourth-border)),
    var(--fourth-border) calc(100% - var(--third-border)),
    calc(100% - var(--third-border)) calc(100% - var(--third-border)),
    calc(100% - var(--third-border)) var(--third-border)
  );
}

.mobile-show {
  display: none !important;
}
@media only screen and (max-width: 980px) {
  html {
    font-size: 2dvw;
  }
  #pattern {
    background: url("../images/back-mobile.jpg");
  }
  #logo {
    height: 10dvh;
  }
  .desktop-show {
    display: none !important;
  }

  .mobile-show {
    display: block !important;
  }

  h1 {
    font-size: 2rem !important;
  }
  #comming-soon {
    bottom: 35dvh;
  }
  h3 {
    font-size: 3rem;
  }
  p {
    font-size: 2rem;
  }
}