*,
*::after,
*::before
{
	margin:0;
	padding:0;
	box-sizing: border-box;
}
:root {
	--size: 8vw;
	--font-size: 7vw;
}
html,body {
	height:100%;
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
	overflow: hidden;
	font-family:'Times New Roman', Times, serif
}

.word {
	display:flex;
	justify-content: center;
	align-items: center;
	position: relative;
	z-index: 2;
}
.word + .word {
	z-index: 1;
	margin-top: 25px;
}
div.char {
	position: relative;
	transform-style: preserve-3d;
	width:var(--size);
	height:var(--size);
	margin:2px;
	transform:scale(0);
	animation: scaleAnimate 1s ease-in-out 1 calc(0.5s + var(--j) * 0.1s) normal forwards, rotationAnimate 12s linear infinite calc(3s + var(--j) * 0.1s);
	transition: all 300ms ease-in-out;
	pointer-events: none;
}
/* div.char:hover {
	width:220px;height:220px;
	transform:translateZ(110px);
} */

.char div {
	border:1px solid white;
	width:100%;height:100%;
	position: absolute;
	top:0;right:0;
	background-color: black;
	transform: rotateX(calc(90deg * var(--i))) translateZ(calc(var(--size)/2));
	color: white;
	display:grid;
	place-items: center;
	font-size:var(--font-size);
	pointer-events: none;
	
}

.trail {
    position: absolute;
    height: 26px; 
	width: 26px;
    border-radius: 3px;
    background: rgba(255, 33, 70, .7);
    /* background: rgba(0,0,0, .7); */
	clip-path: path("M12 4.419c-2.826-5.695-11.999-4.064-11.999 3.27 0 7.27 9.903 10.938 11.999 15.311 2.096-4.373 12-8.041 12-15.311 0-7.327-9.17-8.972-12-3.27z");
	transform:scale(5);
	z-index: -1;
}
.portrait-mode {
	display:none;
	place-items: center;
	font-size:5vw;
}
.portrait-mode img{
	max-width: 100%;
	height:auto;
	filter:grayscale()
}
@keyframes scaleAnimate {
	0% {
		transform:scale(0);
	}
	75% {
		transform:scale(1.2);
	}
	100% {
		transform:scale(1);
	}
}
@keyframes rotationAnimate {
	0% {
		transform: rotateX(0deg) ;
	}
	10%,25% {
		transform: rotateX(90deg) ;
	}
	35%,50% {
		transform: rotateX(180deg)
	}
	60%,75% {
		transform: rotateX(270deg) ;
	}
	85%,100% {
		transform: rotateX(360deg) ;
	}
}
@media (orientation: portrait) {
	body .wrapper,
	.trail {
		display:none;
	  /* transform: rotate(90deg);
	  transform-origin: center;
	  width: 100%;
	  height: 100%;
	  overflow: hidden;
	  position: fixed;
	  top: 0;
	  left: 0; */
	}
	.portrait-mode {
		display:grid;
		
	}
  }
