@import url('https://fonts.googleapis.com/css2?family=Alexandria:wght@100..900&display=swap');

body {
  position: relative; 
  background-color: #FFFEF1;
  color: #6A6A6A;
  margin: 0;
  font-family: "Alexandria", sans-serif;
  font-weight: 100;
  font-size: 17px;
  text-align: justify;
  overflow: hidden;
}

h1 {
  font-weight: 100;
  font-size: 50px;
  text-align: center;
  position: absolute; 
  width: 700px;
  top: 20px;
  left: 350px;
}

#contenedor-texto1 {
  position: absolute;
   width: 500px; 
  top: 120px;
  left: 450px;
  z-index: 8;
}

#p1 {
  font-weight: 100;
  text-align: justify;
  font-family: "Alexandria", sans-serif;
}
#contenedor-texto2 {
  width: 500px;
  position: absolute; 
  top: 210px;
  left: 450px;
}

#p2 {

  font-weight: 100;
  text-align: justify;
  font-family: "Alexandria", sans-serif;
}
#contenedor-texto3 {
  width: 500px;
  position: absolute; 
  top: 360px;
  left: 450px;
}
#p3 {
  
  font-weight: 100;
  text-align: justify;
  font-family: "Alexandria", sans-serif;
  
}
#contenedor-texto4 {
  width: 500px;
  position: absolute; 
  top: 480px;
  left:450px;
}
#p4 {
  font-weight: 100;
  text-align: justify;
  font-family: "Alexandria", sans-serif;
}
#contenedor-texto5 {
  width: 500px;
  position: absolute; 
  top: 510px;
  left: 450px;
  padding-bottom: 50px;
}

#pasto{
  position: absolute;
  width: 400px;
  top: 630px;
  right: 1040px;
  padding-bottom: 5px;
  
}
#pasto2{
  position: absolute;
  width: 400px;
  top: 630px;
  left: 350px;
  padding-bottom: 5px;
  
}
#pasto3{
  position: absolute;
  width: 400px;
  top: 630px;
  left: 740px;
  padding-bottom: 5px;
  
}
#pasto4{
  position: absolute;
  width: 400px;
  top: 630px;
  left: 1040px;
  padding-bottom: 5px;
}

  #nube{
  position: absolute;
  width: 400px;
  top: -50px;
  left: -40px;
}
  #nube2{
  position: absolute;
  width: 250px;
  top: 50px;
  left: 160px;
}
  #luna{
  position: absolute;
  width: 200px;
  top: 20px;
  right: 190px;
  z-index: 4;
  opacity: 0;
  pointer-events: none;
}

#sol{
  position: absolute;
  width: 400px;
  top: -30px;
  right: 50px;
  z-index: 2;
  pointer-events: auto;
}

#sol:hover{
  opacity: 0;
}

#sol:hover + #luna{
  opacity: 1;
  pointer-events: auto;
}


#p5{
    font-weight: 100;
  text-align: justify;
  font-family: "Alexandria", sans-serif;
}
#a1,
#a1:visited,
#a1:hover,
#a1:active,
#a1:focus {
  text-decoration: none;
  color: #6A6A6A;
}
#a1:hover {
  opacity: 0.65;
}

.item img {
  position: absolute;
    width: 100%;
  height: auto;
}
.ascii {
  position: absolute;
  opacity: 1;
}

.real {
  position: absolute;
  opacity: 0;
}

.item.activo .real {
  opacity: 1;
}

.item.activo .ascii {
  opacity: 0;
}