body {
    background-color: #F4EDE3;
    margin: 5%;
}

.heading {
     font-family: "Barriecito", system-ui;
  font-weight: 400;
  font-style: normal;
    font-size: 70px;
    position: absolute;
    top: 0;
    text-align: margin-left;
    color: var(--brown);

}


.text {
    font-family: 'Space Mono', monospace;
    font-size: 20px;
    text-align: margin-left;
    position: absolute;
    align-items: center;
    top: 25vh;
    font-weight: 400;
    line-height: normal;
    letter-spacing: -0.052vw;
    color: var(--brown);
}

h1 span{
  display: inline-block;
  cursor: pointer;
}

h1 span:hover{
    animation: text;
    animation-duration: 1s; 
    animation-timing-function: ease-in-out; 
    animation-iteration-count: infinite; 
    animation-fill-mode: forwards;
}

img {
  width: 25%;
}


.shapes img {
  animation-name: shapes;
  animation-timing-function: ease-in-out;
  animation-iteration-count: infinite;
  animation-fill-mode: forwards;
}

.home {
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 999;
}

.home img{
    width: 50px;
    height: 50px;
    display: block;
    animation: none;
}
.nav{
    display:flex;
    
    
}

.guides{
    position: fixed;
    top: 20px;
    right: 20px;
    display: flex;
    gap: 12px;
    align-items: center;
    z-index: 999; 
}

.guide{
    font-family: "Space Mono", monospace;
    font-size: 24px;
    font-style: normal;
    font-weight: 400;
    line-height: normal;
    color: var(--brown);

    text-decoration: none;
}


@keyframes shapes {
  0% {
    transform: rotate(50deg);
    scale: 100%;

  }
  50% {
    transform: rotate(-50deg);
    scale: 300%;
    

  }
  100% {
    transform: rotate(50deg);
    scale: 100%;

  }

}

@keyframes text {
  0% {
    color: rgb(59, 72, 22);
    scale: 100%;

  }
  50% {
    scale: 300%;
    

  }
  100% {
    scale: 100%;
        color: rgb(59, 72, 22);


  }

}

/* green star */
#shape5 {
    position: absolute;
    top: 80vh;
    left: 75vw;



}

/* blue semicircle */
#shape6 {
    position: absolute;
    top: 55vh;
    left: 12vw;


}

/*orange fork shape*/
#shape7 {
    position: absolute;
    top: 82vh;
    left: 32vw;


}

/*orange stairs shape*/
#shape10 {
    position: absolute;
    top: 50vh;
    left: 85vw;


}

/*green bridge block*/
#shape11 {
    position: absolute;
    top: 48vh;
    left: 38vw;


}

/*blue flower shape*/
#shape12 {
    position: absolute;
    top: 56vh;
    left: 58vw;


}

#shape5 img { animation-delay: 0s;   animation-duration: 6.2s; }
#shape6 img { animation-delay: 1s;   animation-duration: 5.4s; }
#shape7 img { animation-delay: 2.2s; animation-duration: 7s;   }
#shape10 img{ animation-delay: 0.6s; animation-duration: 6.6s; }
#shape11 img{ animation-delay: 1.6s; animation-duration: 5.8s; }
#shape12 img{ animation-delay: 2.8s; animation-duration: 6.4s; }





@media(max-width: 768px) {


   body {
    background-color: #F4EDE3;
    margin: 5%;
}

.heading {
    font-family: 'Anton', sans-serif;
    font-size: 40px;
    position: absolute;
    top: 0;
    line-height: 10vh;
    text-align: left;

}


.text {
    font-family: 'Space Mono', monospace;
    font-size: 16px;
    text-align: left;
    position: absolute;
    top: 28vh;
    font-weight: 350;
    line-height: normal;
    letter-spacing: -0.052vw;





}

img {
    width: 35%;
    text-align: center;
}


  .shapes div{
  display: inline-block;
  text-align: center;
  position: relative;
}



/* green star */
#shape5 {
    position: absolute;
    top: 87vh;
    left: 30vw;



}

/* blue semicircle */
#shape6 {
    position: absolute;
    top: 70vh;
    left: 60vw;


}

/*orange fork shape*/
#shape7 {
    position: absolute;
    top: 80vh;
    left: 2vw;


}

/*orange stairs shape*/
#shape10 {
    position: absolute;
    top: 45vh;
    left: 48vw;


}

/*green bridge block*/
#shape11 {
    position: absolute;
    top: 60vh;
    left: 19vw;


}

/*blue flower shape*/
#shape12 {
    position: absolute;
    top: 45vh;
    left: 2vw;


}

@keyframes shapes {
  0% {
    transform: rotate(50deg);
    scale: 100%;

  }
  50% {
    transform: rotate(-50deg);
    scale: 130%;
    

  }
  100% {
    transform: rotate(50deg);
    scale: 100%;

  }

}
}