/* Reset some default styles */
html, body {
  margin: 0;
  padding: 0;
  resize: none;
}

h1 {
 font-size: 80px; 
}



body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-image: linear-gradient(to bottom, #25353c, #11478d);
}


h2 {
  font-size: 22px;
}


/* Apply your text styling */

img.animatedImg {
  transition: transform 0.3s ease-in-out;
}

/* Adjust the spacing */
.headingContainer {
  display: flex;
  flex-direction: column; /* Stack elements vertically */
  align-items: center;
  justify-content: center; /* Center elements vertically */

}

.orbitsText:hover {
  transform: scale(1.2); /* Zoom in by 20% */
}

/* ... Previous CSS rules ... */

/* Apply your text styling */
.orbitsText {
  transition: transform 0.3s ease-in-out;
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  background: -webkit-linear-gradient(#ffac75, #f6ff75);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  overflow: hidden; /* Add this line to hide the overflowing content during animation */
}

img.animatedImg::before {
  transform-origin: bottom left;
}


.orbitsText::before {
  /* ... Previous ::before rules ... */
  transform-origin: bottom left;
  transform: scaleX(0);
  z-index: -1;
  transition: transform 0.3s ease;
}

.orbitsText:hover::before {
  transform: scaleX(1);
}

/* Add a keyframes animation for initial line height animation */
@keyframes initialLineHeight {
  0% {
    line-height: 0;
    
  }
  100% {
    line-height: 125%;
  }
}

@keyframes fontSizeAnimation {
  0%  {
    font-size: 0;
  }
  100% {
    font-size: 500%;
  }
}

@keyframes initialImageHeight {
  0% {
    height: 0;
  }
  100% {
    height: 145px;
  }
}





/* Apply the initial line height animation to the #orbitsText element */
.orbitsText {
  animation: initialLineHeight 0.3s ease-in-out;
}
h1 {
  animation: fontSizeAnimation 0.3s ease-in-out;
}


/* Other previous CSS rules... */

img.round {
  border-radius: 15px;
  height: 145px;
}

img.round {
  animation: initialImageHeight 0.3s ease-in-out;
}


img {
  transition: transform 0.2s ease-in-out;
}

img:hover {
  transform: scale(1.04); /* Zoom in by 4% */
}



.container {
  margin: 0 -20px;
  left: 0;
  right: 0;
  align-items: center;
  justify-content: space-evenly;
  text-align: center;
}

.icons {
  width: 200px;
  height: 200px;
}

header a{
  color: unset;
  text-decoration: unset;
  text-align: center;
  font-family: 'Outfit', sans-serif;
  font-weight: 700;
  background: -webkit-linear-gradient(#ffac75, #f6ff75);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  position: relative;
  overflow: hidden; /* Add this line to hide the overflowing content during animation */
  font-size: 44px;
}