@import url("https://fonts.googleapis.com/css?family=Poller+One|Arima+Madurai");

:root {
	/* CHANGE TO CONTROL SCALE */
	--radius: 5rem;
	/* CHANGE BORDER SIZE TO VIEW GRID */
	--sketch-grid: 0px dotted gray;
	--color-top: #cca27c;
	--color-bottom: #272727;
	/* CHANGE TO CONTROL TIMING OF ANIMATION */
	--animation-timing: 5s;
}

.lettering {
	position: relative;
	width: calc(var(--radius) * 2);
	height: calc(var(--radius) * 2);
	border-radius: 50%;
	border: var(--sketch-grid);
	top: calc(var(--radius) * 0.2);
}

.lettering h2 {
	border: var(--sketch-grid);
	height: var(--radius);
	color: var(--color-top);
	font-family: "Poller One", sans-serif;
	text-transform: uppercase;
}

.lettering h2 span {
	font-size: calc(var(--radius) / 5);
	height: var(--radius);
	position: absolute;
	width: calc(var(--radius) / 5);
	left: calc(var(--radius) - calc(calc(var(--radius) / 5) / 2));
	top: 0;
	transform-origin: bottom center;
	border: var(--sketch-grid);
}

.lettering h2 .char1 {
	transform: rotate(-32deg);
}

.lettering h2 .char2 {
	transform: rotate(-24deg);
}

.lettering h2 .char3 {
	transform: rotate(-12deg);
}

.lettering h2 .char4 {
	transform: rotate(-6deg);
}

.lettering h2 .char5 {
	transform: rotate(6deg);
}

.lettering h2 .char6 {
	transform: rotate(18deg);
}

.lettering h2 .char7 {
	transform: rotate(32deg);
}

.lettering h1 {
	font-family: "Arima Madurai", sans-serif;
	border: var(--sketch-grid);
	height: calc(var(--radius) * 2.3);
	color: var(--color-bottom);
	margin-top: calc(var(--radius) / -2);
	padding-top:1rem;
	width: 100%;background:#ffffffb0 !important;
	margin-left: 0px;/*calc(var(--radius) / -2);*/
	text-transform: uppercase;
}

.lettering h1 span {
	font-size: calc(var(--radius) * 1.5);
	height: auto;
	line-height: calc(var(--radius) * 1.5);
	position: absolute;
	width: auto;
	border: var(--sketch-grid);
	animation: breathe ease-in-out infinite;
	transition: font-weight 0.2s;
}

.lettering h1 span:nth-child(odd) {
	animation-delay: 1s;
}

.lettering h1 span:nth-child(even) {
	animation-delay: 1.5s;
}

.lettering h1 .char1 {
	margin-left: calc(var(--radius) * 0.2);
	margin-top: calc(var(--radius) * 0.1);
	font-size: calc(var(--radius) * 1.2);
	animation-duration: var(--animation-timing);
	left:0px;
}

.lettering h1 .char2 {
	margin-left: calc(var(--radius) * .5);
	margin-top: calc(var(--radius) * 0.3);
	font-size: calc(var(--radius) * 1.5);
	animation-duration: calc(var(--animation-timing) * 1.2);
	left:5px;
}

.lettering h1 .char3 {
	margin-left: calc(var(--radius) * 1.1);
	margin-top: calc(var(--radius) * 0);
	font-size: calc(var(--radius) * 1.5);
	animation-duration: calc(var(--animation-timing) * 1.15);
	left:10px;
}

.lettering h1 .char4 {
	margin-left: calc(var(--radius) * 1.7);
	margin-top: calc(var(--radius) * 0.4);
	font-size: calc(var(--radius) * 1.3);
	animation-duration: calc(var(--animation-timing) * 1.3);
	left:15px;
}

.lettering h1 .char5 {
	margin-left: calc(var(--radius) * 2.1);
	margin-top: calc(var(--radius) * .2);
	animation-duration: calc(var(--animation-timing) * 0.98);
	font-size: calc(var(--radius) * 1.4);
	left:20px;
}

.lettering h1 .char6 {
	margin-left: calc(var(--radius) * 2.8);
	margin-top: calc(var(--radius) * .6);
	animation-duration: calc(var(--animation-timing) * 1.25);
	font-size: calc(var(--radius) * 1.2);
	left:25px;
}

.lettering h1 .char7 {
	margin-left: calc(var(--radius) * 3.4);
	margin-top: calc(var(--radius) * 0);
	animation-duration: calc(var(--animation-timing) * 1.2);
	font-size: calc(var(--radius) * 1.4);
	left:30px;
}

.lettering h1 .char8 {
	margin-left: calc(var(--radius) * 4);
	margin-top: calc(var(--radius) * .3);
	animation-duration: calc(var(--animation-timing) * 1.15);
	font-size: calc(var(--radius) * 1.3);
	left:35px;
}
.lettering h1 .char9 {
	margin-left: calc(var(--radius) * 4.5);
	margin-top: calc(var(--radius) * .0);
	animation-duration: calc(var(--animation-timing) * 1.15);
	font-size: calc(var(--radius) * 1.3);
	left:35px;
}
.lettering h1 .char10 {
	margin-left: calc(var(--radius) * 5);
	margin-top: calc(var(--radius) * .8);
	animation-duration: calc(var(--animation-timing) * 1.15);
	font-size: calc(var(--radius) * 1.3);
	left:35px;
}

@keyframes breathe {
	0% {
		transform: scale(1) rotate(0deg) skew(0deg, 0deg) translateY(0px);
		opacity: 1;
	}
	25% {
		transform: scale(1) rotate(3deg) skew(2deg, 2deg) translateY(2px);
		opacity: 0.8;
	}
	50% {
		transform: scale(1.2) rotate(-3deg) skew(-2deg, -2deg) translateY(-2px);
		opacity: 1;
	}
	75% {
		transform: scale(1.1) rotate(3deg) skew(2deg, 2deg) translateY(2px);
		opacity: 0.8;
	}
	100% {
		transform: scale(1) rotate(0deg) skew(0deg, 0deg) translateY(0px);
	}
	opacity: 1;
}