@font-face {
  font-family: 'MyFont';
  src: url('/fonts/montecarlo-regular.ttf') format('truetype');
}
@font-face {
  font-family: 'MyFont2';
  src: url('/fonts/cormorantgaramond.ttf') format('truetype');
}

*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html, body {
  height: 100%;
  overflow-x: hidden;
}
 
body {
  background-color: #f7f2eb;
  color: #808241;
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}


.MainText {
  font-family: 'MyFont';
  font-size: 5em;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.Yai {
  position: relative;
  right: 10px;
  font-feature-settings: "ss03" 1;
}

.ampersand {
  position: relative;
  top: 10px;
  font-feature-settings: "ss03" 1;

}

.Mal {
  position: relative;
  top: 10px;
  left: 10px;
  font-feature-settings: "ss04" 1;
}

.text {
  width: 43%;
}


.button {
  font-family: 'MyFont2';
  display: block;
  width: fit-content;
  margin-top: 0.8em;
  background-color: #808241;
  color: #f7f2eb;
  text-decoration: none;
  padding: 0.75em 2em;
  border-radius: 999px;
  font-size: 1.3rem;
}


.leaf-top-left {
  position: absolute;
  top: 70px;
  width: 110px;
  left: -20px; /* push it halfway off screen */
  transform: rotate(120deg);
}

.leaf-bot-left {
  position: absolute;
  bottom: 100px;
  width: 110px;
  left: -20px; /* push it halfway off screen */
  transform: rotate(50deg);
}

.leaf-top-right {
  position: absolute;
  top: 70px;
  width: 110px;
  right: -20px; /* push it halfway off screen */
  transform: rotate(220deg);
}

.leaf-mid-right {
  position: absolute;
  top: 460px;
  width: 90px;
  right: -20px; /* push it halfway off screen */
  transform: rotate(220deg) scaleX(-1);
}

.pflower1-left {
  position: absolute;
  top: 300px;
  width: 180px;
  left: -40px; /* push it halfway off screen */
  transform: rotate(0deg);
}

.pflower2-left {
  position: absolute;
  bottom: -40px;
  left: -40px;
  width: 180px;
  transform: scaleX(-1) rotate(240deg);
}


.pflower3-right {
  position: absolute;
  top: 260px;
  width: 160px;
  right: -20px; /* push it halfway off screen */
  transform: rotate(220deg);
}

.pflower4-right {
  position: absolute;
  bottom: 20px;
  width: 170px;
  right: -20px; /* push it halfway off screen */
  transform: rotate(230deg);
}

/*Pink flowers*/

@keyframes spinright {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

@keyframes spinleft {
  from { transform: rotate(360deg); }
  to   { transform: rotate(0deg); }
}

.pinkflower1-left {
  position: absolute;
  top: 5%;
  width: 20px;
  left: 6%; /* push it halfway off screen */
  animation: spinright 6s linear infinite;
}

.pinkflower2-left {
  position: absolute;
  top: 50%;
  width: 40px;
  left: 3%; /* push it halfway off screen */
  animation: spinleft 15s linear infinite;
}

.pinkflower3-left {
  position: absolute;
  top: 84%;
  width: 30px;
  left: 6%; /* push it halfway off screen */
  animation: spinright 15s linear infinite;
}

.pinkflower5-right {
  position: absolute;
  top: 45%;
  width: 20px;
  right: 2%; /* push it halfway off screen */
  animation: spinleft 15s linear infinite;
}

/*PEACH FLOWERS*/

.peachflower1-left {
  position: absolute;
  top: 55%;
  width: 60px;
  left: 4%; /* push it halfway off screen */
  animation: spinleft 15s linear infinite;
}

.peachflower2-right {
  position: absolute;
  top: 74%;
  width: 60px;
  right: 4%; /* push it halfway off screen */
  animation: spinright 30s linear infinite;
}

/*YELLOW FLOWERS*/

@keyframes fall {
  from {
    transform: rotate(-20deg) translateY(0%) opacity(0);
  }
  to {
    transform: rotate(10deg) translateY(120vh);
  }
}

.yellowflower1 {
  position: absolute;
  top: -10%;
  width: 40px;
  right: 10%; /* push it halfway off screen */
  transform: rotate(10deg);
  animation: fall 12s ease-in infinite;
}

.yellowflower2 {
  position: absolute;
  top: -10%;
  width: 80px;
  left: 20%; /* push it halfway off screen */
  transform: rotate(-10deg);
  animation: fall 20s ease-in infinite ;
  animation-delay: 3s;
}

.yellowflower3 {
  position: absolute;
  top: -10%;
  width: 30px;
  left: 10%; /* push it halfway off screen */
  transform: rotate(40deg);
  animation: fall 7s ease-in infinite ;
  animation-delay: 6s;
}