/* Estilos generales */
body,
html {
    margin: 0;
    padding: 0;
    scroll-behavior: smooth;
    background-color: pink;
    font-family: 'Barbie', sans-serif;
    font-size: 36px;
    max-width:100%;
    overflow-x: hidden;
}

.responsive-image {
    max-width: 300px; /* Ajusta el tamaño máximo para pantallas más grandes */
    height: auto;
}
/* Estilos para pantallas de computadora (ancho mayor a 768px) */
@media only screen and (min-width: 769px) {
    .responsive-image {
        max-width: 250px; /* Ajusta el tamaño máximo para pantallas más grandes */
        height: auto;
    }
    .responsive-image2 {
        max-width: 200px; /* Ajusta el tamaño máximo para pantallas más grandes */
        height: auto;
    }
}
@media only screen and (min-width: 600px) {
    .responsive-image {
        max-width: 250px; /* Ajusta el tamaño máximo para pantallas más grandes */
        height: auto;
    }
    .responsive-image2 {
        max-width: 170px; /* Ajusta el tamaño máximo para pantallas más grandes */
        height: auto;
    }
}

/* Estilos para pantallas de celular (ancho menor o igual a 768px) */
@media only screen and (max-width: 600px) {
    .responsive-image {

        max-width: 180px; /* Ajusta el tamaño máximo para pantallas más pequeñas */
        height:auto;
    }
    .responsive-image2{
        max-width: 150px; /* Ajusta el tamaño máximo para pantallas más pequeñas */
        height:auto;
    }
}
img{

}
/* Estilo para cada sección */
.section {
    height: 100vh;
    max-width: 100%;
    /* Ocupa toda la pantalla */
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 20px;
}

/* Colores y fondos */
.section-1 {
    background: url('../img/shiny-stars-on-bright-pink-background-vector.jpg') no-repeat center center/cover;
    color: #fff;
}

.section-2 {
    background-color: #ffc0cb;
    background: url('../img/pxfuel-princess.jpg') no-repeat center center/cover;
    /* Rosa claro */
    color: #000;
}

.section-3 {

    background-color: #ff69b4;
    /* Rosa fuerte */
    color: #fff;
}

.section-4 {
    background-color: #ffc0cb;
    color: #000;
}

.section h1,
.section h2,
.section p {
    margin: 0;
}

/* Estilo para el countdown */
#countdown {
    font-size: 2rem;
    margin-top: 20px;
}

svg.one {
    position: absolute;
    top: 68%;
    right: 50%;
}

svg.two {
    position: absolute;
    top: 40%;
    right: 35%;
}

svg.three {
    position: absolute;
    
    top: 70%;
    right: 70%;
}

.group {
    -webkit-transform: translate(42.5px, 42.5px);
    -moz-transform: translate(42.5px, 42.5px);
    transform: translate(42.5px, 42.5px);
}

path {
    -webkit-transform: translate(-42.50px, -42.50px);
    -moz-transform: translate(-42.50px, -42.50px);
    transform: translate(-42.50px, -42.50px);
}

.large {
    -webkit-animation: large 2.5s infinite;
    -moz-animation: large 2.5s infinite;
}

.large-2 {
    -webkit-animation: large-2 2.5s infinite;
    -moz-animation: large-2 2.5s infinite;
}

.small {
    -webkit-animation: small 2.5s infinite;
    -moz-animation: small 2.5s infinite;
}

@-webkit-keyframes large {
    0% {
        opacity: 0;
        -webkit-transform: rotate(0deg) scale(0);
        transform: rotate(0deg) scale(0);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: rotate(360deg) scale(1.5);
        transform: rotate(360deg) scale(1.5);
    }
}

@-moz-keyframes large {
    0% {
        opacity: 0;
        transform: rotate(0deg) scale(0);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: rotate(360deg) scale(1.5);
    }
}

@-webkit-keyframes large-2 {
    0% {
        opacity: 0;
        -webkit-transform: rotate(45deg) scale(0);
        transform: rotate(45deg) scale(0);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: rotate(405deg) scale(1.1);
        transform: rotate(405deg) scale(1.1);
    }
}

@-moz-keyframes large-2 {
    0% {
        opacity: 0;
        transform: rotate(45deg) scale(0);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: rotate(405deg) scale(1.1);
    }
}

@-webkit-keyframes small {
    0% {
        opacity: 0;
        -webkit-transform: rotate(0deg) scale(0);
        transform: rotate(0deg) scale(0);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        -webkit-transform: rotate(-360deg) scale(1);
        transform: rotate(-360deg) scale(1.5);
    }
}

@-moz-keyframes small {
    0% {
        opacity: 0;
        transform: rotate(0deg) scale(0);
    }

    50% {
        opacity: 1;
    }

    100% {
        opacity: 0;
        transform: rotate(-360deg) scale(1.5);
    }
}
@keyframes appear-left {
    from {
        opacity: 0;
        transform: translate(-100px, 0px);
    }
    to {
        opacity: 1;
        transform: translate(0);
    }
}
@keyframes appear-right {
    from {
        opacity: 0;
        transform: translate(100px, 0px);
    }
    to {
        opacity: 1;
        transform: translate(0);
    }
}
@keyframes appear-top {
    from {
        opacity: 0;
        transform: translate(0px, -100px);
    }
    to {
        opacity: 1;
        transform: translate(0);
    }
}

@keyframes growShrink {
    0%, 100% {
        transform: scale(1)  rotate(-3deg);
    }
    50% {
        transform: scale(1.1)  rotate(3deg);
    }
}
@keyframes bouncing {
    0%, 100% {
        transform: scale(1) translate(0px,0px);
    }
    50% {
        transform:  scale(1.1) scale(0px,200px);
    }
}
.animated-div-left-to-right{
    opacity: 0;
}
.animated-div-left-to-right.visible {
    animation: fadeIn 2s forwards;
    animation: appear-left 2s forwards;
}
.animated-div-right-to-left.visible {
    animation: fadeIn 2s forwards;
    animation: appear-right 2s forwards;
}

.animated-div-top-to-center.visible {
    animation: fadeIn 1s forwards;
    animation: appear-top 2s forwards;
}
.growing{
    animation: growShrink 2s ease-in-out infinite;
}
.bouncing{
    animation: bouncing 2s ease-in-out infinite;
}
.star {
    position: absolute;
    top: -20px;
    color: #fff;
    animation: animate 10s linear forwards;
    /* you can set infinite too */
  }
  
  .star::before {
    content: "\f005";
    font-family: FontAwesome;
    text-shadow: 0 0 5px #fff, 0 0 20px #fff, 0 0 50px #fff;
  }
  
  @keyframes animate {
    0% {
      transform: translateY(0) rotate(0deg);
      opacity: 1;
    }
  
    80% {
      opacity: 1;
    }
  
    100% {
      transform: translateY(500vh) rotate(360deg);
      opacity: 0;
    }
  }
  
  @media screen and (max-width: 600px) {
    .star {
      font-size: 8px;
    }
  }