#sacrix {
    position: relative;
    margin-bottom: 500px;
    padding: 20px;
}

#circleAnimation {
position: absolute;
  animation: growAndMove 8s ease-in-out forwards;
}

#section01 {
    color:white;
    line-height: 18pt;
    text-align: left;
    padding: 0vw 20vw;
}


body {
    animation: main-load var(--load-time) ease-in-out;
    font-family: Arial, Helvetica, sans-serif;
    letter-spacing: 5px;
    background-color: rgb(21, 91, 106);
    text-align: center;
   

    line-height: 18pt;
}

h1 {
    color:   rgb(223, 200, 160);
}

h2 {
    color:  rgb(223, 200, 160);
}

h3 {
    color:white;
    font-weight: lighter;
}




a {
    display: inline-block;
    text-decoration: none;
    color:rgb(21, 91, 106);
    background-color: rgb(223, 200, 160);
    border-radius: 5px;
    transition: background-color 0.3s ease;
    max-width: 100vw;
    padding: 10pt;
    font-family: Arial, Helvetica, sans-serif;
    max-height: 100%;
  }

  a:hover {
    background-color: rgb(223, 200, 160);
    color:  #92F6F0;
  }


#S_letter {
    position:absolute;
    animation: strechAndStay 3s ease-in-out forwards;

}

#A_letter {
    position:absolute;
    animation: strechAndStay 3s ease-in-out forwards;

}

#C_letter {
    position:absolute;
    animation: strechAndStay 3s ease-in-out forwards;

}

#R_letter {
    position:absolute;
    animation: strechAndStay 3s ease-in-out forwards;

}

#I_letter {
    position:absolute;
    animation: strechAndStay 5s ease-in-out forwards;

}

#X_letter {
    position:absolute;
    animation: strechAndStay 3s ease-in-out forwards;

}

@keyframes growAndMove {
  0% { transform: scale(1); }
  10% { transform: scale(10); } 
  80% { transform: translateY(1000px) scale(1); }
  100% { transform: translateY(0px) scale(1); }
}