/* Sfondo giallo */
body {
  margin: 0;
  min-height: 100vh;
  background-color: #ffce49;
  position: relative;
  overflow: hidden; /* evita scroll */
}

/* Overlay statico al centro */
.overlay-static {
  position: absolute;
  top: 44%;
  left: 42%;
  transform: translate(-50%, -50%); /* centra il div */

  width: 80vw;                      /* proporzionato allo schermo */
  height: calc(80vw / 1.414);       /* mantiene proporzioni PNG */

  background: url("box.png") no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 5;
}

/* Overlay animato leggermente a destra */
.overlay-anim {
  position: absolute;
  top: 50%;
  left: 55%;                        /* leggermente a destra del centro */
  transform: translate(-50%, -50%); /* centra il div rispetto al punto scelto */

  width: 77vw;
  height: calc(77vw / 1.414);

  background: url("macetta.png") no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 10;

  animation: overlayMove 2s infinite;
}

/* Animazione overlay animato */
@keyframes overlayMove {
  0%   { transform: translate(-50%, -50%) translate(0,0); }
  25%  { transform: translate(-50%, -50%) translate(-0.5vw, 0.3vh); }
  50%  { transform: translate(-50%, -50%) translate(0.5vw, -0.3vh); }
  75%  { transform: translate(-50%, -50%) translate(-0.3vw, 0.2vh); }
  100% { transform: translate(-50%, -50%) translate(0,0); }
}

/* Logo in alto a sinistra */
.logo {
  position: absolute;
  top: 5vh;
  left: 2vw;
  width: 69vw;   /* proporzionato allo schermo */
  height: auto;
  z-index: 20;
}

.about {
 position: absolute;
  top: 44%;
  left: 42%;
  transform: translate(-50%, -50%); /* centra il div */

  width: 80vw;                      /* proporzionato allo schermo */
  height: calc(80vw / 1.414);       /* mantiene proporzioni PNG */

  background: url("about2.png") no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 5;
}

.home {
 position: absolute;
  top: 44%;
  left: 42%;
  transform: translate(-50%, -50%); /* centra il div */

  width: 80vw;                      /* proporzionato allo schermo */
  height: calc(80vw / 1.414);       /* mantiene proporzioni PNG */

  background: url("home2.png") no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 5;
}

.social {
 position: absolute;
  top: 44%;
  left: 42%;
  transform: translate(-50%, -50%); /* centra il div */

  width: 80vw;                      /* proporzionato allo schermo */
  height: calc(80vw / 1.414);       /* mantiene proporzioni PNG */

  background: url("social2.png") no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 5;
}

.instagram {
  position: absolute;
  top: 44%;
  left: 42%;
  transform: translate(-50%, -50%); /* centra il div */

  width: 80vw;                      /* proporzionato allo schermo */
  height: calc(80vw / 1.414);       /* mantiene proporzioni PNG */

  background: url("inst.png") no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 5;
}


.tumblr {
  position: absolute;
  top: 44%;
  left: 42%;
  transform: translate(-50%, -50%); /* centra il div */

  width: 80vw;                      /* proporzionato allo schermo */
  height: calc(80vw / 1.414);       /* mantiene proporzioni PNG */

  background: url("tumb.png") no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 5;
}



.tiktok {
  position: absolute;
  top: 44%;
  left: 42%;
  transform: translate(-50%, -50%); /* centra il div */

  width: 80vw;                      /* proporzionato allo schermo */
  height: calc(80vw / 1.414);       /* mantiene proporzioni PNG */

  background: url("tik.png") no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 5;
}

 .quad1 {
  position: absolute;
  top: 44%;
  left: 42%;
  transform: translate(-50%, -50%); /* centra il div */

  width: 80vw;                      /* proporzionato allo schermo */
  height: calc(80vw / 1.414);       /* mantiene proporzioni PNG */

  background: url("quad1.png") no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 5;
}

.quad2 {
  position: absolute;
  top: 44%;
  left: 42%;
  transform: translate(-50%, -50%); /* centra il div */

  width: 80vw;                      /* proporzionato allo schermo */
  height: calc(80vw / 1.414);       /* mantiene proporzioni PNG */

  background: url("quad2.png") no-repeat;
  background-size: contain;
  pointer-events: none;
  z-index: 5;
}