@charset "UTF-8";

:root {
	--fullHeight: 100vh;
	--fontSize: 20px;
	--fontContainer: calc(var(--fontSize) * 4);
	--maxWidth: 8px;
	--babelSize: 60vmin;
	--triSize: calc(var(--babelSize) / 33.333);
	--gunSize: calc(var(--babelSize) * 0.8);
	--newsWidth: calc(var(--babelSize) * 1.2275);
}
	
* {
	user-select: none;
	pointer-events: none;
}

@font-face {
    font-family: 'Impact Regular';
    font-style: normal;
    font-weight: normal;
    src: local('Impact Regular'), url('babel/impact.woff') format('woff');
}

video {pointer-events: none;}

body {
	box-sizing: border-box;
	margin: 0 auto;
	padding: 0;
	overflow: hidden;
	font-size: var(--fontSize);
}
	
#webm-check {
	position: fixed;
	width: 25px;
  	height: 25px;
  	top: 0;
  	left: 0;
	opacity: 0.001;
	pointer-events: none;
}
	
#viewport {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--fullHeight);
	z-index: 2;
}

#mousemove{
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--fullHeight);
}

#babel-container {
	position: absolute;
	top: calc((var(--fullHeight) - var(--babelSize)) / 2.3);
	left: calc((100% - var(--babelSize)) / 2);
	width: var(--babelSize);
	height: var(--babelSize);
	will-change: transform;	
}
	
@media only screen and (max-width: 100vh) {
	#babel-container {
		top: calc((var(--fullHeight) - var(--babelSize)) / 2.8);
	}
}

#rotate-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--babelSize);
	will-change: transform;	
	z-index: 2;
}
	
#rotate-container {pointer-events: auto;}

.babel {
	display: flex;
	position: absolute;
	top: calc((var(--babelSize) - var(--fontContainer)) / 2);
	left: calc((var(--babelSize) - var(--fontContainer)) / 2);
	width: var(--fontContainer);
	height: var(--fontContainer);
	flex-direction: column;
	align-items: center;
	justify-content: center;
	animation: fadeIn 0.2s ease-in forwards;
	transform-style: preserve-3d;
	opacity: 0;
}
	
.babel.heavy {
	filter: drop-shadow(0 0 0.05rem);
}

#fall-container {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: var(--fullHeight);
	z-index: 1;
	pointer-events: none;
}
	
#fall-container span,
.babel span {
	display: inline-block;
	font-size: 1em;
}

span .emoji {
	width: 4vmin;
	width: calc(var(--babelSize) / 15);
}	
	
.graphic .emoji {
	width: 5vmin;
	width: calc(var(--babelSize) / 12);
}	
	
/* LETTERS */

.letter {
	position: absolute;
	top: 0;
	left: 0;
	width: var(--babelSize);
	height: var(--babelSize);
}

.letter-svg {
	position: absolute;
	top: 0;
	left: 0;
	top: calc(var(--babelSize) / 3);
	left: calc(var(--babelSize) / 3);
	width: 50%;
	height: auto;
	filter: drop-shadow(0 0 0.125rem black);
}

/* TITLE */

#title {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 100vh; 
	z-index: 3;
	color: red;
	font-size: 10vmin;
	font-size: calc(var(--babelSize) / 6);
	font-family: "Roboto", sans-serif;
	font-weight: 900;
	font-style: normal;		
	pointer-events: none;
}

.no-title {
	opacity: 0;
	visibility: hidden;
}

.show-title {
	opacity: 1;
	visibility: visible;
}

#name {
	margin: 0;
	font-size: 3vmin;
	font-size: calc(var(--babelSize) / 20);
}

#title div {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	height: 10vmin;
	height: calc(var(--babelSize) / 6);
	width: 100%;
	margin: 0;
	
}

.title-1 {
	font-family: "Roboto", sans-serif;
	text-transform: uppercase;
	font-size: 10vmin;
	font-size: calc(var(--babelSize) / 6);
	font-weight: 900;
	font-style: normal;
}

.title-2 {
	font-family: "bitcount-mono-single-line-sq", sans-serif;
	margin: -0.5vmin 0 -0.5vmin 0.25vmin;
	margin: calc(var(--babelSize) / -120) 0 calc(var(--babelSize) / -120) calc(var(--babelSize) / 240);
	text-transform: uppercase;
	font-size: 10vmin;
	font-size: calc(var(--babelSize) / 6);
	font-weight: 900;
	font-style: normal;
}

.title-3 {
	font-family: "chantal", sans-serif;
	font-weight: 500;
	font-style: normal;
	font-size: 11.25vmin;
	font-size: calc(var(--babelSize) / 5.333);
	margin: -0.5vmin 0 -0.5vmin 0;
	margin: calc(var(--babelSize) / -120) 0 calc(var(--babelSize) / -120) 0;
	letter-spacing: 0.25vmin;
	letter-spacing: calc(var(--babelSize) / 240);
	text-transform: uppercase;
}
	
.title-4 {
	font-family: "amador", sans-serif;
	text-transform: uppercase;
	font-size: 10vmin;
	font-size: calc(var(--babelSize) / 6);
	font-weight: 900;
	font-style: normal;
}

.title-5 {
	font-family: "hwt-konop-12-line", sans-serif;
	font-weight: 400;
	font-style: normal;
	font-size: 7vmin;
	font-size: calc(var(--babelSize) / 8.5714);
}

.title-6 {
	font-family: "aviano-royale", serif;
	font-weight: 900;
	font-style: normal;
	font-size: 9vmin;
	font-size: calc(var(--babelSize) / 6.667);
}

/* GRAPHICS */

.graphic {
	position: absolute;
	opacity: 0;
	z-index: 3;
}

/* ARMS */

.arm {
	opacity: 0.8;
}

#babel-container.news .arm,
#babel-container.has-letter .arm,
#babel-container.news .news-fg,
#babel-container.news .news-bg {
	opacity: 1;
}

#babel-container.news .chat-message {
	transition: color 0.3s;
	color: hsla(0,0%,0%,1.00);
}

.arm-top-left {
	top: -10vmin;
	top: calc(var(--babelSize) / -6);
	left: -5vmin;
	left: calc(var(--babelSize) / -12);
	width: 40vmin;
	width: calc(var(--babelSize) / 1.5);
	height: 40vmin;
	height: calc(var(--babelSize) / 1.5);
	background-image: url("babel/arm1b.gif");
	background-size: contain;
	background-repeat: no-repeat;
	transform: scaleX(-1) rotate(-45deg);
}
	
.arm-center-left {
	top: 10vmin;
	top: calc(var(--babelSize) / 6);
	left: -15vmin;
	left: calc(var(--babelSize) / -4);
	width: 40vmin;
	width: calc(var(--babelSize) / 1.5);
	height: 40vmin;
	height: calc(var(--babelSize) / 1.5);
	background-image: url("babel/arm3b.gif");
	background-size: contain;
	background-repeat: no-repeat;
}

.arm-bottom-center {
	top: 10vmin;
	top:  calc(var(--babelSize) / 6);
	left: 10vmin;
	left:  calc(var(--babelSize) / 6);
	width: 70vmin;
	width:  calc(var(--babelSize) / 0.85714);
	height: 70vmin;
	height: calc(var(--babelSize) / 0.85714);
	background-image: url("babel/arm2b.gif");
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 4;
	opacity: 1;
}

.arm-top-right {
	top: -10vmin;
	top: calc(var(--babelSize) / -6);
	left: 30vmin;
	left: calc(var(--babelSize) / 2);
	width: 47.5vmin;
	width: calc(var(--babelSize) / 1.263);
	height: 47.5vmin;
	height: calc(var(--babelSize) / 1.263);
	background-image: url("babel/arm4b.gif");
	background-size: contain;
	background-repeat: no-repeat;
}

.arm-bottom-right {
	top: 20vmin;
	top: calc(var(--babelSize) / 3);
	left: 30vmin;
	left: calc(var(--babelSize) / 2);
	width: 40vmin;
	width: calc(var(--babelSize) / 1.5);
	height: 40vmin;
	height: calc(var(--babelSize) / 1.5);
	background-image: url("babel/arm1b.gif");
	background-size: contain;
	background-repeat: no-repeat;
	transform: rotate(30deg);
}
	
/* AHEGAO */

.ahegao-fg {
	top: 23vmin;
	top: calc(var(--babelSize) / 2.608);
	left: 10vmin;
	left: calc(var(--babelSize) / 6);
	width: 30vmin;
	width: calc(var(--babelSize) / 2);
	height: 20vmin;
	height: calc(var(--babelSize) / 3);
	background-color: pink;
	filter: blur(4vw);
	opacity: 0.4;
	z-index: 7;
}

.ahegao {
	top: 18vmin;
	top: calc(var(--babelSize) / 3.333);
	left: 11vmin;
	left: calc(var(--babelSize) / 5.4545);
	width: 32vmin;
	width: calc(var(--babelSize) / 1.875);
	height: 32vmin;
	height:  calc(var(--babelSize) / 1.875);
	background-image: url("babel/ahegao2.gif");
	background-size: contain;
	background-repeat: no-repeat;
	transform: skew(15deg, 5deg);
	filter: blur(0.04vw);
	opacity: 1;
	z-index: 6;
}
	
#ahegao {
	top: 18vmin;
	top:  calc(var(--babelSize) / 3.333);
	left: 11vmin;
	left:  calc(var(--babelSize) / 5.4545);
	width: 32vmin;
	width: calc(var(--babelSize) / 1.875);
	height: 32vmin;
	height: calc(var(--babelSize) / 1.875);
	transform: skew(15deg, 5deg);
	filter: blur(0.04vw);
	z-index: 6;
}

.ahegao-bg {
	top: 25vmin;
	top: calc(var(--babelSize) / 2.4);
	left: 12vmin;
	left: calc(var(--babelSize) / 5);
	width: 30vmin;
	width: calc(var(--babelSize) / 2);
	height: 20vmin;
	height: calc(var(--babelSize) / 3);
	background-color: pink;
	filter: blur(4vw);
	opacity: 0.2;
	z-index: 5;
}

/* CHAT */

.chat-window {
	position: absolute;
	top: calc(var(--babelSize) * 0.25);
	left:  calc(var(--babelSize) * 0.5);
	height: calc(var(--babelSize) * 0.5);
	width: var(--babelSize);
	opacity: 1;
	z-index: 10;
}

.chat-container {
	display: flex;
	position: absolute;
	flex-direction: column-reverse;
	align-items: flex-start;
	justify-content: flex-start;
	bottom: 0;
	left: calc(var(--babelSize) * 0.4);
	height: calc(var(--babelSize) * 0.4);
	width: calc(var(--babelSize) * 0.6);
	mask-image: linear-gradient(to bottom, rgba(0, 0, 0, 0), rgba(0, 0, 0, 1));
	overflow: hidden;
	z-index: 2;
}

.emoji-container{
	position: absolute;
	top: 0;
	left: 0;
	height: calc(var(--babelSize) * 0.5);
	width: calc(var(--babelSize) * 0.4);
	z-index: 1;
}

.animoji-container,
.animoji {
	position: absolute;
	bottom: 0;
	left: 0;
	width: 3vmin;
	width: calc(var(--babelSize) / 20);
	height: 3vmin;
	height: calc(var(--babelSize) / 20);
	opacity: 0;
	animation-delay: 0s;
}

.animoji-container {
	animation: animojiFade 2s ease-in-out forwards, animojiRise 2.5s linear forwards;
}

.animoji {
	opacity: 1;
	background-image: url("babel/heart.png");
	background-size: contain;
	background-repeat: no-repeat;
}

.animoji-position-1 {
	left: 30%;
}

.animoji-position-2 {
	left: 37%;
}

.animoji-position-3 {
	left: 45%;
}

.animoji-position-4 {
	left: 53%;
}

@keyframes animojiRise {
	0% {transform: translate(0,0) scale(0.7);}
	50% {transform: translate(0,-500%) scale(1.1);}
	100% {transform: translate(0,-1000%) scale(1);}
}

.animoji-1 {
	animation: none;
}

.animoji-2 {
	animation: animojiTwo 2s ease-out;
}
@keyframes animojiTwo {
    0% {transform: translate(0, 0);}
    60% {transform: translate(40%,0);}
    100% {transform: translate(0,0);}
}

.animoji-3 {
	animation: animojiThree 2s ease-out;
}
@keyframes animojiThree {
    0% {transform: translate(0, 0);}
    60% {transform: translate(-40%,0);}
    100% {transform: translate(0,0);}
}

.animoji-4 {
	animation: animojiFour 2s ease-out forwards;
}
@keyframes animojiFour {
    0% {transform: translate(0, 0);}
    100% {transform: translate(-200%,0);}
}

.animoji-5 {
	animation: animojiFive 2s ease-out forwards;
}
@keyframes animojiFive {
    0% {transform: translate(0, 0);}
    100% { transform: translate(200%,0);}
}

@keyframes animojiFade {
	0% {opacity: 0;}
	20% {opacity: 1;}
	60% {opacity: 1;}
	100% {opacity: 0;}
}

.chat {
	display: flex;
	flex-direction: row;
	align-items: flex-start;
	justify-content: flex-start;
	width: 100%;
	margin-top: 1.5vmin;
	margin-top: calc(var(--babelSize) / 40);
}

.avatar {
	width: 3.5vmin;
	width: calc(var(--babelSize) / 17.143);
	height: 3.5vmin;
	height:  calc(var(--babelSize) / 17.143);
	background-size: contain;
	background-repeat: no-repeat;
}

.chat-message {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	width: calc(100% - 5vmin);
	width: calc(100% - (var(--babelSize) / 12));
	margin-left: 1vmin;
	margin-left:  calc(var(--babelSize) / 40);
	font-family: "Roboto", sans-serif;
	font-weight: 400;
	font-size: 1.75vmin;
	font-size:  calc(var(--babelSize) / 34.285);
	font-style: normal;
	color: hsla(0,0%,22%,1.00);
}

.chat-message p {margin: 0;}

.username {font-weight: 700;}

/* STOCK TICKER */

.ticker-container {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	top: -5vmin;
	top:  calc(var(--babelSize) / -12);
	left: 15vmin;
	left:  calc(var(--babelSize) / 4);
	width: 90vmin;
	width: calc(var(--babelSize) / 0.666);
	height: 40vmin;	
	height: calc(var(--babelSize) / 1.5);
	font-kerning: none;
	font-family: bitcount-mono-single-circle, sans-serif;
	font-style: normal;
	font-weight: 300;
	font-size: 3vmin;
	font-size: calc(var(--babelSize) / 20);
	z-index: 9;
}
	
.ticker {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	width: 30vmin;
	width: calc(var(--babelSize) / 2);
	height: 40vmin;
	height: calc(var(--babelSize) / 1.5);
}
	
.ticker-line {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
}
	
.money-line {
	font-size: 2.5vmin;
	font-size: calc(var(--babelSize) / 24);
}
	
.triangle {
	width: 0;
	height: 0;
	border-left: var(--triSize) solid transparent;
	border-right: var(--triSize) solid transparent;
	transform: scaleX(0.6);
}
	
.candlestick-container {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	justify-content: flex-start;
	margin-left: 2vmin;
	margin-left: calc(var(--babelSize) / 30);
	width: 58vmin;
	width: calc(var(--babelSize) / 1.0344);
	height: 40vmin;
	height: calc(var(--babelSize) / 1.5);
}
	
.candlestick-chart {
	position: relative;
	top:0;
	left:0;
	width: 58vmin;
	width: calc(var(--babelSize) / 1.0344);
	height: 20vmin;
	height: calc(var(--babelSize) / 3);
}
	
.candlestick {
	position: absolute;
	bottom: 0; 
	left: 0;
	height: 1vmin;
	height: calc(var(--babelSize) / 60);
	width: 1.5vmin;
	width: calc(var(--babelSize) / 40);
	transform-origin: bottom;
}
	
.candle-line {
	position: absolute;
	top: -3vmin;
	top: calc(var(--babelSize) / -20);
	left: calc((1.5vmin - 2px) / 2);
	left: calc((var(--babelSize / 40) - 2px) / 2);
	left: calc(((var(--babelSize) / 40) - 2px) / 2);
	height: 8vmin;
	height: calc(var(--babelSize) / 7.5);
	width: 2px; 
}

.candlestick.positive,
.candlestick.positive div {
	background-color: hsla(108,95%,45%,1.00);
}
	
.candlestick.negative,
.candlestick.negative div {
	background-color: red;
}
	
.positive span {
	color: hsla(108,95%,45%,1.00);
}

.positive .triangle {
	border-bottom: var(--triSize) solid hsla(108,95%,45%,1.00);
}
	
.negative span {
	color: red;
}
	
.negative .triangle {
	border-top: var(--triSize) solid red;
}

/* NEWS */

.news-fg {
	position: absolute;
	width: 40vw;
	width: var(--newsWidth);
	height: 22.5vw;
	height: calc(var(--newsWidth) / 1.778);
	top: 15%;
	left: -8%;
	pointer-events: none;
	overflow: hidden;
	opacity: 0;
	z-index: 7;
	clip-path: polygon(0% 0%, 0% 50%, 0.25% 50%, 0.25% 100%, 99.75% 100%, 99.75% 50%, 100% 50%, 100% 0%);
}



.news-bg {
	position: absolute;
	width: 40vw;
	width: var(--newsWidth);
	height: 22.5vw;
	height: calc(var(--newsWidth) / 1.778);
	top: 15%;
	left: -8%;
	pointer-events: none;
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 0;
	zIndex: -1;
}

.live-indicator {
	display: flex;
	position: absolute;
	width: 35%;
	height: auto;
	top: 5%;
	background: linear-gradient(180deg, rgba(156,10,10,1) 0%, rgba(255,0,20,1) 100%);
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	border: 0.1em solid white;
	opacity: 0.7;
	border-left: none;
}

.live-indicator-text {
	font-family: Arial, Helvetica, sans-serif;
	color: white;
	font-size: 0.75vw;
	font-size: calc(var(--newsWidth) / 53.3);
	font-weight: 500;
	letter-spacing: 0.1em;
	margin: 0.3vw;
	margin:  calc(var(--newsWidth) / 133.3);
	margin-right: 1vw;
	margin-right:  calc(var(--newsWidth) / 40);
}

.background-item {
	position: absolute;
	width: 40%;
	height: 9vw;
	height:  calc(var(--newsWidth) / 4.44);
	top: 10%;
	left: 5%;
	background-size: contain;
	background-repeat: no-repeat;
	pointer-events: none;
	border: 0.1em solid white;
}

.bottom-overlays {
	position: absolute;
	width: 100%;
	height: auto;
	left: 0;
	bottom: 0;
	font-family: Arial, Helvetica, sans-serif;
	color: white;
	font-size: 1vw;
	font-size:  calc(var(--newsWidth) / 40);
	font-weight: 500;
	letter-spacing: 0.1em;
	opacity: 0.975;
	overflow: hidden;
}

.headline-container {
	position: relative;
	width: 96%;
	height: 4vw;
	height:  calc(var(--newsWidth) / 10);
	margin-left: 2%;
	margin-right: 2%;
	margin-bottom: 0.4vw;
	margin-bottom:  calc(var(--newsWidth) / 100);
}

.breaking-news-line {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	width: 30%;
	height: 1vw;
	height: calc(var(--newsWidth) / 40);
	top: 0;
	left: 0;
	background-color: #BA1717;
}

.breaking-news-line p {
	font-size: 0.75vw;
	font-size:  calc(var(--newsWidth) / 53.3);
	font-weight: 700;
	letter-spacing: 0.3em;
}

.breaking-news-bg {
	position: absolute;
	width: 1vw;
	width:  calc(var(--newsWidth) / 40);
	height: 3vw;
	height: calc(var(--newsWidth) / 13.3);
	top: 0;
	left: 0;
	background-color: #BA1717;
	z-index: 1;
}

.headline {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	width: 85%;
	height: 3vw;
	height: calc(var(--newsWidth) / 13.3);
	top: 1vw;
	top:  calc(var(--newsWidth) / 40);
	left: 0.2vw;
	left: calc(var(--newsWidth) / 200);
	background-color: white;
	color: black;
	font-size: 2vw;
	font-size:  calc(var(--newsWidth) / 20);
	z-index: 1;
}

.headline p {
	font-size: 1.75vw;
	font-size:  calc(var(--newsWidth) / 22.857);
	font-weight: 700;
	letter-spacing: 0.01em;
	padding: 1vw;
	padding: calc(var(--newsWidth) / 40);
	margin: 0;
	opacity: 0.7;
}

.logo-container {
	position: absolute;
	width: 13%;
	height: 4vw;
	height: calc(var(--newsWidth) / 10);
	top: 0;
	right: 0;
	background-color: white;
}

.logo {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	width: 100%;
	height: 2.75vw;
	height:  calc(var(--newsWidth) / 14.545);
	top: 1vw;
	top:  calc(var(--newsWidth) / 40);
	left: 0;
}

.logo p {
	font-family: CNN, Arial, sans-serif;
	font-size: 2vw;
	font-size:  calc(var(--newsWidth) / 20);
	color: #BA1717;
	margin-top: 35%;
}

.logo-live {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	width: 100%;
	height: 1vw;
	height:  calc(var(--newsWidth) / 40);
	top: 0;
	left: 0;
	background-color: #BA1717;
}

.timeline {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	width: 100%;
	height: 0.75vw;
	height: calc(var(--newsWidth) / 53.3);
	top: 3.25vw;
	top: calc(var(--newsWidth) / 12.308);
	left: 0;
	background-color: black;
}

.timeline p { font-size: 0.5vw; font-size:  calc(var(--newsWidth) / 80);}

.news-stock-ticker {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-start;
	position: relative;
	width: 200%;
	height: auto;
	background-color: black;
	font-family: Arial, Helvetica, sans-serif;
	color: white;
	font-size: 0.5em;
	font-weight: 500;
	letter-spacing: 0.1em;
	overflow: hidden;
}

.news-stock-ticker p {
	padding-right: 2em;
	border-right: 0.1em solid white;
	margin-right: 2em;
}

/* GUN */

.gun-container {
	width: var(--babelSize);
	height: var(--babelSize);
	top:0;
	left:0;
	opacity:1;
	z-index: 8;
}
	
.gun, .bullet, .cartridge, .bullet-flash {
	position: absolute;
	background-size: contain;
	background-repeat: no-repeat;
	width: var(--gunSize);
	height: var(--gunSize);	
	left: calc(var(--gunSize) / -6);
	top: calc(var(--gunSize) / 2.5);	
}
	
.gun {
	filter: blur(0.01vmin);
	background-image: url("babel/ak47.gif");
	animation: recoil 0.1625s ease-out infinite;
	z-index: 1;
}
	
.cartridge {
	background-image: url("babel/ak47_cartridge.png");
	animation: cartridge 0.65s ease-out infinite;
	z-index: 3;
}
	
.bullet {
	left: calc((var(--gunSize) / -6) - var(--gunSize));
	background-image: url("babel/ak47_bullet.png");
	opacity: 0;
	transform-origin: top right;
   	animation: moveRotate 0.65s ease-out infinite;
	z-index: 2;
}
	
.cartridge-2, .bullet-2 {animation-delay: 0.1625s;}
.cartridge-3, .bullet-3 {animation-delay: 0.325s;}
.cartridge-4, .bullet-4 {animation-delay: 0.4875s;}
	
.bullet-flash {
	left: calc((var(--gunSize) / -6.2) - var(--gunSize));
	background-image: url("babel/ak47_flash.gif");
	transform-origin: center right;
	filter: blur(0.1vmin);
	animation: chaoticChange 0.1625s infinite;
}

@keyframes chaoticChange {
	0% {transform: translateX(0%) scaleX(1);}
	20% {transform: translateX(1%) scaleX(2.4);}
	40% {transform: translateX(2%) scaleX(1.5);}
	70% {transform: translateX(1%) scaleX(2);}
	100% {transform: translateX(0%) scaleX(1);}
}
	
@keyframes recoil {
	0% {transform: translateX(0%);}
	40% {transform: translateX(2%);}
	100% {transform: translateX(0%);}
}

@keyframes moveRotate {
    0% {opacity: 0; transform: translate(0,0) rotate(0deg);}
	1% {opacity: 1; transform: translate(0,0) rotate(0deg);}
    33% {opacity: 1; transform: translate(0,0) rotate(180deg);}
    66% {opacity: 1; transform: translate(100%,0) rotate(180deg);}
	99% {opacity: 1; transform: translate(100%,-30%) rotate(360deg);}
    100% {opacity: 0; transform: translate(100%,-30%) rotate(360deg);}
}
	
@keyframes cartridge {
    0% {opacity: 1; transform: translate(0,0) scale(1);}
	40% {opacity: 1; transform: translate(8%,-15%) scale(1.4);}
    100% {opacity: 0; transform: translate(16%,100%) scale(1.8);}
}

/* ANGER */

.anger {
	width: 5vmin;
	width: calc(var(--babelSize) / 12);
	height: 5vmin;
	height: calc(var(--babelSize) / 12);
	transform: rotate(45deg);
	background-image: url("babel/anger-sign.gif");
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 1;
}
	
.anger-top-left {
	top: 15vmin;
	top: calc(var(--babelSize) / 4);
	left: 15vmin;
	left:  calc(var(--babelSize) / 4);
}
	
.anger-center-left {
	top: 20vmin;
	top: calc(var(--babelSize) / 3);
	left: 18vmin;
	left: calc(var(--babelSize) / 3.333);
}
	
.anger-top-right {
	top: 15vmin;
	top: calc(var(--babelSize) / 3);
	left: 40vmin;
	left: calc(var(--babelSize) / 1.5);
}
	
.anger-center-right {
	top: 20vmin;
	top: calc(var(--babelSize) / 3);
	left: 40vmin;
	left: calc(var(--babelSize) / 1.5);
}
	
.anger-lower-right {
	top: 40vmin;
	top: calc(var(--babelSize) / 1.5);
	left: 40vmin;
	left: calc(var(--babelSize) / 1.5);
}

/* STEAM */

.steam {
	width: 17.5vmin;
	width: calc(var(--babelSize) / 3.428);
	height: 17.5vmin;
	heigth: calc(var(--babelSize) / 3.428);
	background-image: url("babel/steam.gif");
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 1;
}
	
#steam {
	width: 17.5vmin;
	width: calc(var(--babelSize) / 3.428);
	height: 17.5vmin;
	height: calc(var(--babelSize) / 3.428);
	object-fit: contain;
}
	
.steam-right {
	top: 10vmin;
	top: calc(var(--babelSize) / 6);
	left: 40vmin;
	left: calc(var(--babelSize) / 1.5);
}
	
.steam-left {
	top: 10vmin;
	top: calc(var(--babelSize) / 6);
	left: 0;
	transform: scaleX(-1);
}

/* EYES */

.eye {
	position: absolute;
	width: 17.5%;
	height: calc(0.175 * var(--babelSize));
	top: 22.5%;
	opacity: 0;
	z-index: 9;
	visibility: hidden;
	clip-path: circle(50% at 50% 50%);
}

#eye-l {left: 25%;}
#eye-r {left: 55%;}

.show-eye {
	opacity: 1;
	visibility: visible;
}
	
model-viewer {
  --progress-bar-color: transparent;
}

/* OTHER */

.meme {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: space-between;
	top: 5vmin;
	top: calc(var(--babelSize) / 12);
	left: 0;
	width: 100%;
	height: 54vmin;
	height: calc(var(--babelSize) / 1.111);
	text-align: center;
	font-family: "Impact Regular", Impact, anton, Haettenschweiler, "Franklin Gothic Bold", "Arial Black", "sans-serif";
	color: white;
	font-size: 8vmin;
	font-size: calc(var(--babelSize) / 7.5);
	-webkit-text-stroke: 0.4vmin black;
	-webkit-text-stroke: calc(var(--babelSize) / 150) black;
	letter-spacing: -0.01em;
	opacity: 1;
	z-index: 5;
}

.fire {
	top: -2vmin;
	top: calc(var(--babelSize) / -30);
	left: 15vmin;
	left: calc(var(--babelSize) / 4);
	width: 30vmin;
	width: calc(var(--babelSize) / 2);
	height: 30vmin;
	height: calc(var(--babelSize) / 2);
	background-image: url("babel/fire4.gif");
	background-size: contain;
	background-repeat: no-repeat;
	opacity: 1;
	z-index: 1;
}
	
#fire {
	top: -2vmin;
	top: calc(var(--babelSize) / -30);
	left: 15vmin;
	left: calc(var(--babelSize) / 4);
	width: 30vmin;
	width: calc(var(--babelSize) / 2);
	height: 30vmin;
	height: calc(var(--babelSize) / 2);
	object-fit: contain;
	z-index: 1;
}
	
.speech {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	top: 10vmin;
	top: calc(var(--babelSize) / 6);
	left: 40vmin;
	left: calc(var(--babelSize) / 1.5);
	width: 15vmin;
	width: calc(var(--babelSize) / 4);
	height: 15vmin;
	height: calc(var(--babelSize) / 4);
	font-size: 1.9em;
	background-image: url("babel/speech.gif");
	background-size: contain;
	background-repeat: no-repeat;
	z-index: 8;
}

.effects {color: black;}
.no-fade {animation: none; opacity: 1;}
.playing { opacity: 1;}
.hide {opacity: 0;}
.fadeIn {animation: fadeIn 0.6s ease-out forwards;}
.fadeOut {animation: fadeOut 0.2s ease-out forwards;}
.armFadeOut {animation: armFadeOut 0.2s ease-out forwards;}
.bubbleIn {animation: fadeIn 0.8s ease-in forwards, bubbleIn 1s ease-in-out forwards;}
.fadeEx {animation: fadeEx 6s ease-in-out infinite;}
.shift {animation: shiftBlur 2s ease-in-out infinite;}
.hue {color: hsla(359,100%,44%,1.00); animation: hue 5s infinite;}

/* ANIMATIONS */

@keyframes fadeIn {0% {opacity: 0} 100% {opacity: 1} }
@keyframes fadeOut {0% {opacity: 1} 100% {opacity: 0} }
@keyframes armFadeOut {0% {opacity: 0.8} 100% {opacity: 0} }
@keyframes bubbleIn {0% {transform: scale(0.7) translate(-30%,20%)} 100% {transform: scale(1) translate(0,0)} } 
@keyframes fadeEx {0% {opacity: 1} 5% {opacity: 0} 10% {opacity: 1} 60% {opacity: 1} 65% {opacity: 0} 70% {opacity: 1} 100% {opacity: 1} }
@keyframes shiftBlur {0% {filter: blur(0)} 13% {filter: blur(0)} 15% {filter: blur(0.4vw)}	17% {filter: blur(0)} 63% {filter: blur(0)}
	65% {filter: blur(0.4vw)} 67% {filter: blur(0)} 73% {filter: blur(0)} 75% {filter: blur(0.4vw)}	77% {filter: blur(0)} 100% {filter: blur(0)} }
@keyframes shift {0% {transform: translate(0%, 0%)} 14% {transform: translate(0%, 0%)} 15% {transform: translate(-3%, 2%)} 16% {transform: translate(0%, 0%)}	
	64% {transform: translate(0%, 0%)} 65% {transform: translate(-4%, 1%)} 66% {transform: translate(0%, 0%)} 74% {transform: translate(0%, 0%)}
	75% {transform: translate(3%, -2%)}	76% {transform: translate(0%, 0%)} 100% {transform: translate(0%, 0%)} }
@keyframes hue {0% {filter: hue-rotate(0deg) blur(0)} 13% {filter: hue-rotate(90deg) blur(0)} 15% {filter: hue-rotate(120deg) blur(0.4vw)}	17% {filter: hue-rotate(150deg) blur(0)} 63% {filter: hue-rotate(360deg) blur(0)} 65% {filter: hue-rotate(320deg) blur(0.4vw)} 67% {filter: hue-rotate(300deg) blur(0)} 73% {filter: hue-rotate(280deg) blur(0)} 75% {filter: hue-rotate(240deg) blur(0.4vw)} 77% {filter: hue-rotate(200deg) blur(0)} 100% {filter: hue-rotate(0deg) blur(0)} }
	
@media only screen and (max-width: 576px) {
		
	:root {
		--fontSize: 16px;
		--fontContainer: calc(var(--fontSize) * 4);
	}	
		
	.ahegao {background-image: url("babel/ahegao2_mobile.gif");}
	.fire {background-image: url("babel/fire4_mobile.gif");}
	.steam {background-image: url("babel/steam_mobile.gif");}
	.arm-top-left {background-image: url("babel/arm1b_mobile.gif");}
	.arm-center-left {background-image: url("babel/arm3b_mobile.gif");}
	.arm-bottom-center {background-image: url("babel/arm2b_mobile.gif");}
	.arm-top-right {background-image: url("babel/arm4b_mobile.gif");}
	.arm-bottom-right {background-image: url("babel/arm1b_mobile.gif");}
		
}

@media only screen and (min-width: 1400px) {

	:root {
		
		--fontSize: 22px;
		--babelSize: 472.5px;
	}
		
}