#lang {
	display: flex;
	column-gap: 2px;
	position: absolute;
	right: 4px;
	top: 4px;
	padding: 4px;
	font-family: "Encode Sans Condensed", sans-serif;
	font-size: 1em;
	cursor: pointer;
	transform-origin: 50% 53%;
	transition: rotate 0.3s cubic-bezier(1, 1.7, 0, 0.64), align-items 0.2s ease-out;
}

#lang:hover {
	animation: blink 0.3s;
}

@keyframes blink {
	0% {
		opacity: 1;
	}
	5% {
		opacity: 0;
	}
	100% {
		opacity: 1;
	}
}

#lang .jp,
#lang .en {
	position: relative;
	transform-origin: 50% 50%;
	transition: font-size 0.1s ease-out, top 0.1s ease-out, color 0.3s ease-out,
		rotate 0.4s cubic-bezier(0.57, -0.01, 0.47, 1.29);
}

#lang.jp {
	align-items: end;
	rotate: 0deg;
}

#lang.en {
	align-items: start;
	rotate: 179.9999999deg;
}

#lang.jp .jp,
#lang.jp .en {
	rotate: 0deg;
}

#lang.en .jp,
#lang.en .en {
	rotate: -179.9999999deg;
}

#lang.jp .jp,
#lang.en .en {
	color: #000;
	font-size: 1.2em;
}

#lang.jp .en,
#lang.en .jp,
#lang .sep {
	color: #aaa;
	font-size: 1em;
}

#lang.en .jp {
	top: 0.13em;
}

#lang.en .en {
	top: 0.1em;
}