/* ==BG Animation== */

@keyframes rotate {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}
.gradient {
  --size: 250px;
  --speed: 20s;
  --easing: cubic-bezier(0.8, 0.4, 0.4, 0.8);
  width: var(--size);
  height: var(--size);
  filter: blur(calc(var(--size) / 7));
  background-image: linear-gradient(rgba(55, 235, 169, 0.35), rgba(91, 35, 225, .3));
  animation: rotate var(--speed) var(--easing) alternate infinite;
  border-radius: 50% 70% 70% 50%/30% 30% 80% 80%;
}

@media (min-width: 720px) {
  .gradient {
    --size: 720px;
  }
}
body {
	background-color: #fff;
	/*position: absolute;*/
	inset: 0;
	display: flex;
	place-content: center;
	align-items: center;
	overflow: hidden;
}

/* This is just to transition when you change the viewport size. */
* {
  transition: all 0.25s ease-out;
}

/* ==Design Controls== */

p {
	font-family: "neulis-neue", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 1.4em;
	color: #3300a4;
}

.logo-container {
	float: inherit;
	margin: auto;
	width: 100%;
	text-align: center;
	z-index: 1;
}
.logo-control {
	float: none;
	width: 50%;
	min-width: 400px;
	padding-top: 40%;
	/*padding-left: 100px;*/
}

.word-control {
	width: 100%;
	padding-top: 5%;
	text-align: center;
	/*padding-left: 100px;*/
}
/* Z-Indexing */

.index-up-01 {
	z-index: 5;
}

.index-up-02 {
	z-index: 10;
}

.index-down-01 {
	z-index: -5;
}