logo1.css

@import url("https://fonts.googleapis.com/css2?family=Spartan:wght@700&display=swap");
@import url('https://fonts.googleapis.com/css2?family=Bowlby+One+SC&display=swap');

@keyframes typing { from { width: 0; } }
@keyframes blink-caret { 55% { border-color: transparent; } }
@-webkit-keyframes slide-up {
  0% {
    transform: translateY(-100px);
  }
  100% {
    transform: translateY(0);
  }
}


@keyframes slide-up {
  0% {
    transform: translateY(-200px);
  }
  100% {
    transform: translateY(0);
  }
}

.caption{
  background-size: cover;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  /* font-family: 'Bebas Neue', cursive; */
  color: white;
  position: relative;
  margin-left: 20%;
  
}

::-moz-selection {
  background: rgba(170, 170, 170, 0.3);
}

::selection {
  background: rgba(170, 170, 170, 0.3);
}

.heading {
  text-align: center;
  font-size: 50px;
  width: -webkit-max-content;
  width: -moz-max-content;
  width: fit-content;
  display: flex;
  flex-direction: row;

}
.heading > div {
  overflow: hidden;
}
.heading > div > p {
  width: -webkit-max-content;
  width: -moz-max-content;
  width: max-content;
  white-space: nowrap;
  margin: 0;
  line-height: 117%;
  font-family: 'Bowlby One SC', cursive
  
}

.green {
  color: rgb(231, 208, 0);
  font-weight: 800;
}

div.heading > div {
  -webkit-animation-delay: 5;
          animation-delay: 5;
}
div.heading > div:nth-child(2) > p {
  -webkit-animation-delay: 5.05s;
          animation-delay: 5.05s;
}

div.heading > div p span green{
  -webkit-animation-delay: 5s;
          animation-delay: 5s;
}
div.heading > div:nth-child(3) > p {
  -webkit-animation-delay: 5.075s;
          animation-delay: 5.075s;
}

.slide-up {
  -webkit-animation: slide-up 0.9s cubic-bezier(0.65, 0, 0.35, 1) both;
          animation: slide-up 1.5s cubic-bezier(0.65, 0, 0.35, 1) both;
}