/* style.css */

@import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;900&family=Poppins:wght@300;400;500&display=swap');

*{
  margin:0;
  padding:0;
  box-sizing:border-box;
}

body{
  background:#a89cf7;
  min-height:100vh;
  display:flex;
  justify-content:center;
  align-items:center;
  font-family:'Poppins', sans-serif;
  overflow:hidden;
}

.hero{
  position:relative;
  width:90%;
  max-width:1100px;
  height:500px;
  background:#111;
  overflow:hidden;
  display:flex;
  justify-content:center;
  align-items:center;
}

/* CONTENIDO */

.content{
  text-align:center;
  color:white;
  z-index:5;
}

.content h1{
  font-family:'Playfair Display', serif;
  font-size:5rem;
  line-height:0.9;
  letter-spacing:2px;
  margin-bottom:20px;
}

.content p{
  font-size:0.9rem;
  color:#d3d3d3;
  margin-bottom:25px;
}

.btn{
  display:inline-block;
  padding:12px 35px;
  background:#7cff3c;
  color:#111;
  border-radius:30px;
  text-decoration:none;
  font-weight:600;
  transition:0.3s;
}

.btn:hover{
  transform:scale(1.05);
  background:#99ff66;
}

/* IMAGENES */

.image-left,
.image-right{
  position:absolute;
  z-index:4;
}

.image-left{
  left:-30px;
  bottom:40px;
  transform:rotate(-6deg);
}

.image-right{
  right:40px;
  top:40px;
  transform:rotate(8deg);
}

.image-left img{
  width:220px;
  object-fit:cover;
  filter:grayscale(100%);
  border:8px solid #fff;
}

.image-right img{
  width:260px;
  object-fit:cover;
  border:8px solid #fff;
}

/* cinta tipo collage */

.tape{
  position:absolute;
  background:#fff;
  opacity:0.9;
}

.tape-left{
  width:120px;
  height:25px;
  top:25px;
  left:40px;
  transform:rotate(-8deg);
}

.tape-right{
  width:110px;
  height:25px;
  top:-10px;
  right:50px;
  transform:rotate(12deg);
}

/* FLORES */

.flower{
  position:absolute;
  color:#fff;
  font-size:4rem;
  opacity:0.9;
}

.flower-1{
  left:280px;
  top:50px;
}

.flower-2{
  right:280px;
  bottom:40px;
}

/* CIRCULOS */

.circle{
  position:absolute;
  border:1px solid rgba(255,255,255,0.4);
  border-radius:50%;
}

.circle.one{
  width:120px;
  height:120px;
  top:20px;
  right:250px;
}

.circle.two{
  width:180px;
  height:180px;
  bottom:-60px;
  left:120px;
}

/* GARABATOS */

.scribble{
  position:absolute;
  border:2px solid rgba(255,255,255,0.5);
  border-radius:50%;
}

.scribble-1{
  width:160px;
  height:50px;
  top:40px;
  right:180px;
  transform:rotate(20deg);
}

.scribble-2{
  width:120px;
  height:40px;
  bottom:80px;
  left:200px;
  transform:rotate(-15deg);
}

/* CADENAS */

.chain{
  position:absolute;
  width:220px;
  height:20px;
  background:
  repeating-radial-gradient(circle at 10px 10px,
  transparent 0 6px,
  #fff 7px 9px,
  transparent 10px 20px);
  opacity:0.8;
}

.chain-top{
  top:20px;
  left:-40px;
}

.chain-bottom{
  bottom:30px;
  right:-40px;
}

/* FIGURAS NEON */

.shape{
  position:absolute;
  border-radius:50%;
}

.shape.pink{
  width:18px;
  height:18px;
  background:#ff4fd8;
  left:120px;
  bottom:120px;
}

.shape.green{
  width:16px;
  height:16px;
  background:#7cff3c;
  top:100px;
  left:55%;
}

.shape.purple{
  width:20px;
  height:20px;
  background:#b84dff;
  bottom:100px;
  right:180px;
}

/* RESPONSIVE */

@media(max-width:900px){

  .content h1{
    font-size:3.5rem;
  }

  .image-left img{
    width:170px;
  }

  .image-right img{
    width:190px;
  }

  .flower{
    font-size:2.5rem;
  }
}

@media(max-width:600px){

  .hero{
    height:auto;
    padding:80px 20px;
    flex-direction:column;
  }

  .image-left,
  .image-right{
    position:relative;
    margin:20px 0;
    left:auto;
    right:auto;
    top:auto;
    bottom:auto;
  }

  .content h1{
    font-size:2.5rem;
  }

  .flower,
  .circle,
  .scribble,
  .chain{
    display:none;
  }
}