@font-face {
  font-family: "Bebas Neue";
  src:
    url("./fonts/BebasNeue-Bold.woff2") format("woff2"),
    url("./fonts/BebasNeue-Bold.woff") format("woff");
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}

html {
  /*font-size: 0.2667vw;*/
  font-size: 0.22vw;
}

body {
  font-family: "Bebas Neue", sans-serif;
  margin: 0;
  padding: 0;
  /*font-size: 0.2667vw;*/
  font-size: 0.22vw;

  background: #3a186e;
}

@media (min-width: 1024px) {
  body {
    background: linear-gradient(90deg, #522694, #3d1a74);
  }
}

@media (min-width: 1440px) {
  body {
    background: linear-gradient(90deg, #522694, #3d1a74);
  }
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

@media (min-width: 1024px) {
  html {
    font-size: 0.069vw;
  }
}

@media (min-width: 1450px) {
  html {
    font-size: 1px;
  }
}

.stub {
  position: relative;
  width: 100vw;
  overflow-x: hidden;
  overflow-y: visible;
  height: 100dvh;
  z-index: 2;
}

@media (min-width: 1024px) {
  .stub {
    overflow: hidden;
  }
}

@media (min-width: 1440px) {
  .stub {
  }
}

.wrapper {
  position: relative;
  width: 100%;
  height: 100dvh;
  min-height: 651rem;
  z-index: 10;
}

@media (min-width: 768px) {
  .wrapper {
    min-height: 760rem;
  }
}

@media (min-width: 1024px) {
  .wrapper {
    min-height: 640rem;
    overflow: hidden;
  }
}

@media (min-width: 1440px) {
  .wrapper {
    max-width: 1440px;
    margin: 0 auto;
    min-height: 740rem;
    overflow-x: visible;
    overflow-y: clip;
  }
}

.logowrapper {
  padding: 5rem 0;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4rem 10rem 0 rgba(0, 0, 0, 0.2);
  background: linear-gradient(309.39deg, #612fac 13.63%, #3a186e 87.57%);

  img {
    width: 144rem;
  }
}

@media (min-width: 1024px) {
  .logowrapper {
    display: none;
  }
}

.family {
  width: 480rem;
  position: absolute;
  left: 50%;
  transform: translateX(-56vw);
  top: 20rem;
  z-index: -1;
  min-width: 480rem;
}

@media (max-width: 375px) {
  .family {
    width: 510rem;
  }
}

@media (min-width: 1024px) {
  .family {
    width: 70%;
    left: unset;
    right: -200rem;
    transform: unset;
    top: -24px;
    min-width: 1400rem;
  }
}

@media (min-width: 1440px) {
  .family {
    /*width: 1045rem;*/
    transform: unset;
    right: -99rem;
    top: 0;
    min-width: 1045rem;
  }
}

.pic_desktop {
  display: none;
}

@media (min-width: 1024px) {
  .pic_desktop {
    display: block;
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media (min-width: 1440px) {
  .pic {
    height: 740rem;
  }
}

.pic {
  position: absolute;
  z-index: -1;
  top: 0;
  left: 0;
  width: 100%;
  height: 812rem;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

@media (min-width: 1024px) {
  .pic {
    height: 1046rem;
    display: none;
  }
}

@media (min-width: 1440px) {
  .pic {
    height: 740rem;
  }
}

.logodesk {
  display: none;
}

@media (min-width: 1024px) {
  .logodesk {
    width: 178rem;
    position: absolute;
    display: block;
    top: 35rem;
    left: 70rem;
  }
}

.bright {
  display: none;
}

@media (min-width: 1024px) {
  .bright {
    position: absolute;
    z-index: 1;
    top: 0;
    left: 0;
    display: block;
    width: 600rem;
  }
}

.picetta {
  position: absolute;
  top: 270rem;
  left: 18rem;
  width: 108rem;
}

@media (min-width: 1024px) {
  .picetta {
    top: unset;
    bottom: 53rem;
    width: 260rem;
    left: 524rem;
  }
}

.shadow {
  position: absolute;
  width: 180rem;
  top: 347rem;
  left: -3rem;
}

@media (min-width: 1024px) {
  .shadow {
    width: 257rem;
    top: unset;
    bottom: -1rem;
    left: 549rem;
  }
}

.nuggets {
  position: absolute;
  top: 255rem;
  right: 14rem;
  width: 140rem;
}

@media (min-width: 1024px) {
  .nuggets {
    width: 334rem;
    top: unset;
    bottom: 63rem;
    right: 314rem;
  }
}

.popcorn {
  display: none;
}

@media (min-width: 1024px) {
  .popcorn {
    position: absolute;
    display: block;
    width: 330rem;
    bottom: 42rem;
    right: 34rem;
  }
}

.title {
  position: absolute;
  top: 345rem;
  left: 50%;
  transform: translateX(-50%);
  width: 240rem;
}

@media (min-width: 1024px) {
  .title {
    width: 355rem;
    top: 63rem;
    left: 75rem;
    transform: unset;
  }
}

@media (min-width: 1440px) {
  .title {
    width: 389rem;
    top: 63rem;
    left: 67rem;
  }
}

.date {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 0;
  margin: 0;
  position: absolute;
  top: 660rem;
  left: 50%;
  transform: translateX(-50%);
  font-weight: 700;
  font-size: 40rem;
  text-align: center;
  text-transform: uppercase;
  color: #ffd700;
}

@media (min-width: 1024px) {
  .date {
    justify-content: flex-start;
    top: 551rem;
    left: 70rem;
    transform: unset;
    font-size: 53rem;
  }
}

@media (min-width: 1440px) {
  .date {
    justify-content: flex-start;
    top: 557rem;
    left: 54rem;
    transform: unset;
    font-size: 60rem;
  }
}

.prize {
  position: absolute;
  top: 485rem;
  left: 50%;
  transform: translateX(-50%);
  width: 270rem;
}

@media (min-width: 1024px) {
  .prize {
    width: 446rem;
    top: 277rem;
    left: 31rem;
    transform: unset;
  }
}

@media (min-width: 1440px) {
  .prize {
    width: 480rem;
    top: 273rem;
    left: 23rem;
  }
}

.con1 {
  display: none;
}

@media (min-width: 1024px) {
  .con1 {
    display: block;
    position: absolute;
    width: 138rem;
    left: -76rem;
    bottom: 249rem;
    animation: second 3s ease-in-out infinite alternate;
    z-index: 1;
  }
}

.con2 {
  position: absolute;
  top: 592rem;
  right: 39rem;
  width: 31rem;
  transform: rotate(120deg);
  animation: imgSecond 3s ease-in-out infinite alternate;
}

@media (min-width: 1024px) {
  .con2 {
    transform: rotate(0deg);
    top: unset;
    right: unset;
    left: 136rem;
    bottom: 40rem;
    width: 31rem;
    animation: imgSecondPoint 3s 600ms ease-in-out infinite alternate;
  }
}

@media (min-width: 1440px) {
  .con2 {
    bottom: 17rem;
  }
}

.con3 {
  position: absolute;
  bottom: -15rem;
  right: -20rem;
  width: 60rem;
  animation: first 3.2s 400ms ease-in-out infinite alternate;
}

@media (min-width: 1024px) {
  .con3 {
    bottom: unset;
    right: unset;
    top: 341rem;
    left: 406rem;
  }
}

@media (min-width: 1440px) {
  .con3 {
    bottom: unset;
    right: unset;
    top: 250rem;
    left: 440rem;
  }
}

.con4 {
  position: absolute;
  top: 28rem;
  left: 24rem;
  width: 26rem;
  animation: imgSecond 3s 200ms ease-in-out infinite alternate;
}

@media (min-width: 1024px) {
  .con4 {
    top: 80rem;
    left: 49rem;
  }
}

.con5 {
  position: absolute;
  top: 462rem;
  right: 9rem;
  width: 76rem;
  animation: second 2.8s 100ms ease-in-out infinite alternate;
}

.con6 {
  position: absolute;
  top: 440rem;
  left: 32rem;
  width: 19rem;
  animation: first 3s 500ms ease-in-out infinite alternate;
}

.con7 {
  position: absolute;
  top: 390rem;
  left: 30rem;
  width: 45rem;
  animation: first 3.2s 400ms ease-in-out infinite alternate;
}

@media (min-width: 1024px) {
  .con7 {
    display: none;
  }

  .con6 {
    display: none;
  }

  .con5 {
    display: none;
  }
}

.con8 {
  position: absolute;
  bottom: 136rem;
  left: 15rem;
  width: 72rem;
  animation: second 3s 200ms ease-in-out infinite alternate;
}

@media (min-width: 1024px) {
  .con8 {
    bottom: unset;
    top: 20rem;
    left: 470rem;
    width: 91rem;
  }
}


@keyframes first {
  0% {
    transform: translateX(0) translateY(0);
  }
  100% {
    transform: translateX(-12rem) translateY(-10rem);
  }
}

@keyframes second {
  0% {
    transform: rotate(0deg) translateX(0) translateY(0);
  }
  100% {
    transform: rotate(-12deg) translateX(-12rem) translateY(-10rem);
  }
}

@keyframes imgSecondPoint {
  0% {
    transform: rotate(0deg) translateX(0) translateY(0);
  }
  100% {
    transform: rotate(-12deg) translateX(-12rem) translateY(-0rem);
  }
}

@keyframes imgSecond {
  0% {
    transform: rotate(120deg) translateX(0) translateY(0);
  }
  100% {
    transform: rotate(120deg) translateX(-12rem) translateY(-4rem);
  }
}