@import url("https://fonts.googleapis.com/css2?family=Ultra&display=swap");

:root {
  --green: #b8d953;
  --lilac: #b2b2eb;
  --pink: #bb86e9;
  --dark-green: #529a91;
  --peach: #fe96b7;
  --black: #191819;
  --grey: #2a292a;
  --white: #d9d9d9;
}

body {
  font-size: 10vw;
  background-color: var(--black);
  margin: 100px;
  font-family: "Ultra", serif;
}

.bizzy {
  display: flex;
  align-items: center;
  gap: 5%;
  justify-content: space-around;
  max-height: 100px;
  text-align: center;
}

@keyframes fontGrow {
  0% {
    transform: scaleY(1);
  }
  50% {
    transform: scaleY(2);
  }
  100% {
    transform: scaleY(1);
  }
}

.bizzy-letters {
  animation-name: fontGrow;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  transform-origin: top;
  transition-timing-function: ease-in-out;
}

.letter-b {
  color: var(--peach);
}

.letter-i {
  color: var(--green);
  animation-delay: 1s;
}

.letter-z1 {
  color: var(--pink);
}

.letter-z2 {
  color: var(--lilac);
  animation-delay: 1s;
}

.letter-y {
  color: var(--dark-green);
}

.bizzy-B {
  display: flex;
  justify-content: space-around;
  gap: 5%;
}

@keyframes fontGrowReverse {
  0% {
    transform: scaleY(2);
  }
  50% {
    transform: scaleY(1);
  }
  100% {
    transform: scaleY(2);
  }
}

.bizzy-letters-B {
  animation-name: fontGrowReverse;
  animation-duration: 2s;
  animation-iteration-count: infinite;
  transform-origin: bottom;
  transition-timing-function: ease-in-out;
  
}

.letter-C {
  color: #cbe69f;
}

.letter-O {
  color: #cbe;
  animation-delay: 1s;
  font-stretch: ultra-condensed;
}

.letter-D {
  color: #91d1df;
}

.letter-I {
  color: #f7b407;
  animation-delay: 1s;
}

.letter-N {
  color: pink;
}