@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:wght@400;500&display=swap');

html, body{
    background: #4e594e;
}



.right {
    font-family: 'EB Garamond', serif;
    margin-top: 5%;
    margin-left: 9%;
}

  .h6r {
    position: absolute;
    margin-left: 78%;
    margin-top: 21%;
    font-size: 20px;
  }

  .h5r {
    position: absolute;
    margin-left: 75%;
    margin-top: 24%;
    font-size: 30px;
  }

  .h4r {
    position: absolute;
    margin-left: 70%;
    margin-top: 28%;
    font-size: 40px;
  }

  .h3r {
    position: absolute;
    margin-left: 65%;
    margin-top: 32%;
    font-size: 50px;
  }
  
  .h2r {
    position: absolute;
    margin-left: 60%;
    margin-top: 37%;
    font-size: 60px;
  }

  .h1r {
    position: absolute;
    margin-left: 50%;
    margin-top: 43%;
    font-size: 70px;
  }



  .left {
    font-family: 'EB Garamond', serif;
    margin-top: 5%;
}

.h6l {
    position: absolute;
    margin-left: 10%;
    margin-top: 21%;
    font-size: 20px;
  }

  .h5l {
    position: absolute;
    margin-left: 13%;
    margin-top: 24%;
    font-size: 30px;
  }

  .h4l {
    position: absolute;
    margin-left: 16%;
    margin-top: 28%;
    font-size: 40px;
  }

  .h3l {
    position: absolute;
    margin-left: 19%;
    margin-top: 32%;
    font-size: 50px;
  }
  
  .h2l {
    position: absolute;
    margin-left: 22%;
    margin-top: 37%;
    font-size: 60px;
  }

  .h1l {
    position: absolute;
    margin-left: 30%;
    margin-top: 43%;
    font-size: 70px;
  }

  a:link {
    color: #c0cc95;
    text-decoration: none;
  }

  a:visited {
    color: #c0cc95;
    text-decoration: none;
  }

  a:hover {
    color: #728272;
  }

.glow {
    position: absolute;
    top: calc(50% - 20px);
    left: calc(50% - 20px);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: #cde6be;
    box-shadow:
      0 0 60px 30px #cde6be,
      0 0 100px 60px #cde6be,
      0 0 140px 90px #8fb094;
  }


.circles {
	position: sticky;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}

.circles li {
	position: sticky;
	display: block;
	list-style: none;
	width: 20px;
	height: 20px;
	animation: animate 20s linear infinite;
	bottom: calc(-150px - 40vh);
    color: #c0cc95;
}

.circles li:nth-child(1) {
	left: 25%;
	width: 80px;
	height: 80px;
	animation-delay: 0s;
	animation-duration: 20s;
	border-radius: 50%;
	border-top-left-radius: 0 !important;
    color: #c0cc95;
}

.circles li:nth-child(2) {
	left: 10%;
	width: 20px;
	height: 20px;
	animation-delay: 0s;
	animation-duration: 25s;
	border-radius: 50%;
	border-top-left-radius: 0 !important;
}

.circles li:nth-child(3) {
	left: 70%;
	width: 20px;
	height: 20px;
	animation-delay: 0s;
	animation-duration: 20s;
	border-radius: 50%;
	border-top-left-radius: 0 !important;
}

.circles li:nth-child(4) {
	left: 40%;
	width: 60px;
	height: 60px;
	animation-delay: 0s;
	animation-duration: 15s;
	border-radius: 50%;
	border-top-left-radius: 0 !important;
}

.circles li:nth-child(5) {
	left: 65%;
	width: 20px;
	height: 20px;
	animation-delay: 0s;
	animation-duration: 20s;
	border-radius: 50%;
	border-top-left-radius: 0 !important;
}

.circles li:nth-child(6) {
	left: 75%;
	width: 90px;
	height: 90px;
	animation-delay: 0s;
	animation-duration: 25s;
	border-radius: 50%;
	border-top-left-radius: 0 !important;
}

.circles li:nth-child(7) {
	left: 35%;
	width: 50px;
	height: 50px;
	animation-delay: 0s;
	animation-duration: 30s;
	border-radius: 50%;
	border-top-left-radius: 0 !important;
}

.circles li:nth-child(8) {
	left: 50%;
	width: 25px;
	height: 25px;
	animation-delay: 0s;
	animation-duration: 35s;
	border-radius: 50%;
	border-top-left-radius: 0 !important;
}

.circles li:nth-child(9) {
	left: 20%;
	width: 15px;
	height: 15px;
	animation-delay: 0s;
	animation-duration: 40s;
	border-radius: 50%;
	border-top-left-radius: 0 !important;
}

.circles li:nth-child(10) {
	left: 85%;
	width: 50px;
	height: 50px;
	animation-delay: 0s;
	animation-duration: 45s;
	border-radius: 50%;
	border-top-left-radius: 0 !important;
}

@keyframes animate {
	0% {
		transform: translateY(0) rotate(0deg);
		opacity: 0;
	}
	50% {
		transform: translateY(-60vh) rotate(360deg);
		opacity: 1;
	}
	100% {
		transform: translateY(-120vh) rotate(720deg);
		opacity: 0;
	}
}