.about-panel {
	position: absolute;
	background: $word-type-bg;
	z-index: 999;
	top: -100%;

	overflow: hidden;

	padding: 2em;

	height: 100%;
	width: 100%;

	text-align: center;

	@include single-transition(all, 300ms);

	.logo {
		max-height: 40%;
	}

	img {
		max-width: 80%;
		max-height: 40%;
	}

	h1 {
		text-transform: uppercase;
		font-size: 2em;

		.english {
			font-size: 1.4em;
		}
	}

	.version {
		font-weight: bold;
	}

	.dev-stage {
		padding: 0.5em 0.9em;
		text-transform: uppercase;
		font-size: 0.9em;
		background: darken($word-type-bg, 10%);
	}

	h2 {
		font-size: 1em;
		margin: 2.5em 0;
		opacity: 0.5;
	}

	.cancel {
		position: absolute;
		left: calc(100% - 3rem);
		top: -2rem;

		background: #FF2E2E;

		padding: 3rem 3rem 1.5rem 1.5rem;

		text-decoration: none;
		font-size: 1.5em;
		font-weight: bold;

		color: white;

		@include border-radius(20em);
	}
}

@import 'states/visible';