body {
   
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh;
    width: 300px;

    height: 500px;
    background: linear-gradient(var(--sky), var(--sky2), var(--sky3));
   

   
}

#titulo {
    position: absolute;
    top: 5%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    cursor: pointer;
    text-align: center;

    z-index: 10;
}

#texto {
    position: absolute;
    top: 55%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 38px;
    max-width: 600px;
    text-align: center;
    cursor: pointer;

    z-index: 10;
}
:root {
    --sky: #4f7db3;
    --sky2: #3a3d98;
    --sky3: #a1a4e4;
    --moon: #fcf1ca;
    --moon2: #94a8cc;

    


}

   
.circulo {
  width: 100px;  
  height: 100px;
  background-color: rgb(233, 246, 84);
  border-radius: 50% 50% 50% 50% / 50% 30% 70% 70%;
 
  position: absolute;
  z-index: 2;
  top: 50px;
  left: 50px;
  display: flex;
  

}
.circulo:hover{
    background-color: rgb(214, 11, 28);
}
.circulo:hover{
  transform: translateY(-15px);
}

.circulo2 {
  width: 100px;  
  height: 100px;
  background-color: rgb(233, 246, 84);
  border-radius: 50% 50% 50% 50% / 50% 30% 70% 70%;
 
  position: absolute;
  z-index: 2;
  top: 220px;
  left: 200px;
  display: flex;
  

}

.circulo2:hover{
  box-shadow: 0px 4px 10px rgba(0,0,0,0.3);
}

.circulo3 {
  width: 60px;  
  height: 60px;
  background-color: rgb(233, 246, 84);
  border-radius: 50% 50% 50% 50% / 50% 30% 70% 70%;
 
  position: absolute;
  z-index: 2;
  top: 200px;
  left: 30px;
  display: flex;
  

}

.circulo4 {
  width: 100px;  
  height: 100px;
  background-color: rgb(233, 246, 84);
  border-radius: 50% 50% 50% 50% / 50% 30% 70% 70%;
 
  position: absolute;
  z-index: 2;
  top: 300px;
  left: 400px;
  display: flex;
  

}

.circulo5 {
  width: 90px;  
  height: 90px;
  background-color: rgb(233, 246, 84);
  border-radius: 50% 50% 50% 50% / 50% 30% 70% 70%;
 
  position: absolute;
  z-index: 2;
  top: 450px;
  left: 350px;
  display: flex;
  

}

.circulo6 {
  width: 80px;  
  height: 80px;
  background-color: rgb(233, 246, 84);
  border-radius: 50% 50% 50% 50% / 50% 30% 70% 70%;
 
  position: absolute;
  z-index: 2;
  top: 550px;
  left: 530px;
  display: flex;
  

}

.circulo7 {
  width: 80px;  
  height: 80px;
  background-color: rgb(233, 246, 84);
  border-radius: 50% 50% 50% 50% / 50% 30% 70% 70%;
 
  position: absolute;
  
  top: 100px;
  left: 360px;
  display: flex;
  

}

.circulo8 {
  width: 40px;  
  height: 40px;
  background-color: rgb(233, 246, 84);
  border-radius: 50% 50% 50% 50% / 50% 30% 70% 70%;
 
  position: absolute;
 
  top: 600px;
  left: 650px;
  display: flex;
  

}


.estrellas {
    position: absolute;
    width: 80px;
    height: 80px;
    top: 300px;
    left: 100px;
    background-color: rgb(236, 205, 33);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% );
}
.estrellas:hover{
    background-color: aqua;
}

.estrellas:hover{
  transform: rotate(8deg);
}

.estrellas2 {
    position: absolute;
    width: 80px;
    height: 80px;
    top: 300px;
    left: 100px;
    background-color: rgb(236, 205, 33);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% );
}
.estrellas2:hover{
    background-color: aqua;
}

.estrellas3 {
    position: absolute;
    width: 80px;
    height: 80px;
    top: 10px;
    left: 150px;
    background-color: rgb(236, 205, 33);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% );
}

.estrellas3:hover{
    background-color: aqua;
}
.estrellas4 {
    position: absolute;
    width: 80px;
    height: 80px;
    top: 50px;
    left: 300px;
    background-color: rgb(236, 205, 33);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% );
}
.estrellas4:hover{
    background-color: aqua;
}


.estrellas5 {
    position: absolute;
    width: 80px;
    height: 80px;
    top: 200px;
    left: 300px;
    background-color: rgb(236, 205, 33);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% );
}

.estrellas6 {
    position: absolute;
    width: 80px;
    height: 80px;
    top: 400px;
    left: 250px;
    background-color: rgb(236, 205, 33);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% );
}

.estrellas7 {
    position: absolute;
    width: 80px;
    height: 80px;
    top: 30px;
    left: 450px;
    background-color: rgb(236, 205, 33);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% );
}

.estrellas8 {
    position: absolute;
    width: 50px;
    height: 50px;
    top: 200px;
    left: 450px;
    background-color: rgb(236, 205, 33);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% );
}

.estrellas9 {
    position: absolute;
    width: 70px;
    height: 70px;
    top: 300px;
    left: 600px;
    background-color: rgb(236, 205, 33);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% );
}

.estrellas10 {
    position: absolute;
    width: 60px;
    height: 60px;
    top: 520px;
    left: 630px;
    background-color: rgb(236, 205, 33);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% );
}

.estrellas11 {
    position: absolute;
    width: 60px;
    height: 60px;
    top: 450px;
    left: 500px;
    background-color: rgb(236, 205, 33);
    clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35% );
}

.castillo2 {
    position: absolute;
    width: 200px;
    height: 100px;

    top: 590px;
    left: 800px;
    background-color: rgb(44, 89, 46);
    border-radius: 100px 100px 0 0;
}

.castillo3 {
    position: absolute;
    width: 200px;
    height: 120px;

    top: 570px;
    left: 990px;
    background-color: rgb(95, 142, 97);
    border-radius: 100px 100px 0 0;
}

.castillo4 {
    position: absolute;
    width: 200px;
    height: 200px;

    top: 490px;
    left: 1100px;
    background-color: rgb(44, 89, 46);
    border-radius: 100px 100px 0 0;
}

.castillo5 {
    position: absolute;
    width: 200px;
    height: 300px;

    top: 390px;
    left: 1290px;
    background-color: rgb(27, 61, 29);
    border-radius: 100px 100px 0 0;
}

.castillo6 {
    position: absolute;
    width: 200px;
    height: 100px;

    top: 590px;
    left: 660px;
    background-color: rgb(27, 61, 29);
    border-radius: 100px 100px 0 0;
}

.castillo7 {
    position: absolute;
    width: 200px;
    height: 100px;

    top: 590px;
    left: 350px;
    background-color: rgb(55, 102, 58);
    border-radius: 100px 100px 0 0;
}

.castillo8 {
    position: absolute;
    width: 200px;
    height: 100px;

    top: 590px;
    left: 250px;
    background-color: rgb(75, 135, 78);
    border-radius: 100px 100px 0 0;
}

.castillo9 {
    position: absolute;
    width: 200px;
    height: 200px;

    top: 490px;
    left: 80px;
    background-color: rgb(46, 80, 49);
    border-radius: 100px 100px 0 0;
}

.castillo10 {
    position: absolute;
    width: 200px;
    height: 150px;

    top: 540px;
    left: 0px;
    background-color: rgb(27, 61, 29);
    border-radius: 100px 100px 0 0;
}

.luna{
    position: absolute;
    width: 200px;
    height: 200px;
    border-radius: 50%;
    box-shadow: inset -20px -20px 0 0 rgb(236, 236, 155);

    top: 20px;
    left: 970px;

    background: linear-gradient(var(--sky), var(--sky2));
   
}
.luna:hover{
    background: rgb(237, 71, 5);
}

.copa {
    position: absolute;
    width: 0px;
    height: 0px;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 60px solid salmon;

    top:330px;
    left: 900px;
    
}

.ladrillo {
    position: absolute;
    width: 60px;
    height: 250px;
    border-radius: 5%;
    background-color: salmon;

    top: 378px;
    left: 900px;
    z-index: -1;
    
}

.copa2 {
    position: absolute;
    width: 0px;
    height: 0px;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 60px solid salmon;

    top: 400px;
    left: 810px;
    
}

.ladrillo2 {
    position: absolute;
    width: 110px;
    height: 179px;
    border-radius: 20%;
    background-color: salmon;

    top: 450px;
    left: 790px;
    z-index: -1;
    
}

.copa3 {
    position: absolute;
    width: 0px;
    height: 0px;
    border-left: 30px solid transparent;
    border-right: 30px solid transparent;
    border-bottom: 60px solid salmon;
    

    top: 400px;
    left: 990px;
    z-index: -1;
    
}

.ladrillo3 {
    position: absolute;
    width: 110px;
    height: 198px;
    border-radius: 20%;
    background-color: salmon;

    top: 450px;
    left: 960px;

    z-index: -1;
    
}