/* =========================
   JABI.MP3 — HOME
   ========================= */

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  width: 100%;
  min-height: 100%;
}

body {
  background: #ffffff;
  overflow-x: hidden;
}


/* =========================
   ESCENARIO
   ========================= */

.scene {
  position: relative;

  width: min(100vw, 1920px);
  aspect-ratio: 16 / 9;

  margin: 0 auto;

  overflow: hidden;

  background: #ffffff;
}


/* =========================
   FONDOS
   ========================= */

.background {
  position: absolute;

  left: 0;
  top: 0;

  width: 100%;
  height: 100%;

  pointer-events: none;
}

.water {
  z-index: 1;
}

.grass {
  z-index: 2;
}


/* =========================
   🌸 FLORES
   ESTÁTICAS
   ========================= */

.flowers {
  position: absolute;

  /*
    El archivo 2-crop.png
    corresponde a las flores.
  */

  left: 60.83%;
  top: 52.69%;

  width: 39.79%;
  height: auto;

  z-index: 3;

  pointer-events: none;

  transform: none;
  transition: none;
}


/* =========================
   BOTONES
   ========================= */

.button {
  position: absolute;

  display: block;

  z-index: 20;

  line-height: 0;

  cursor: pointer;

  text-decoration: none;

  transition:
    transform 0.18s ease,
    filter 0.18s ease;
}


.button img {
  display: block;

  width: 100%;
  height: auto;

  pointer-events: none;
}


/* =========================
   HOVER
   ========================= */

.button:hover {
  transform: scale(1.06);

  filter: brightness(1.08);

  z-index: 50;
}


/* =========================
   💖 SOBRE MÍ
   ========================= */

.about {
  left: 2.19%;
  top: 23.15%;

  width: 19.79%;
}


/* =========================
   🐱 PATO FAN CLUB
   ========================= */

.pato {
  left: 28.96%;
  top: 16.20%;

  width: 36.09%;
}


/* =========================
   🛸🐄 WEBS COOL
   ========================= */

.webs {
  /*
    El archivo 3-crop.png
    corresponde a la vaca + OVNI.
  */

  left: 53.02%;
  top: 0%;

  width: 45.52%;

  transform-origin: top right;
}


/* =========================
   🎧 YOUTUBE + SPOTIFY
   ========================= */

.music {
  left: 1.98%;
  top: 49.17%;

  width: 32.08%;
}


/* =========================
   🐱💻 LETRAS Y ACORDES
   ========================= */

.lyrics {
  left: 35.83%;
  top: 53.24%;

  width: 28.85%;
}


/* =========================
   💿 JABI.MP3
   ESTÁTICO
   ========================= */

.logo {
  position: absolute;

  left: 0.63%;
  top: 0.93%;

  width: 39.43%;
  height: auto;

  z-index: 10;

  pointer-events: none;

  transform: none;
  transition: none;
}


/* =========================
   PANTALLAS GRANDES
   ========================= */

@media (min-width: 1921px) {

  .scene {
    width: 1920px;
  }

}