@import "./common.css";

.title-page {
	max-width: 800px;
	min-width: 0;
	margin: 2rem auto;
	padding-inline: 4rem;
	height: calc(100vh - 10rem);
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	& > div {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		height: fit-content;
		justify-content: space-between;
		align-items: end;
		color: var(--color-a1);
		font-weight: bold;

		@media (max-width: 800px) {
			justify-content: center;
		}

		.ascii-logo {
			letter-spacing: 0.01em;
		}

		.ascii-name {
			margin-bottom: 0.3lh;
			font-size: 1.2em;
		}
	}

	.barcode {
		width: 100%;
		transform: skew(-30deg);
		display: flex;
		font-size: 0.5rem;
		margin: 1rem;
		margin-top: 3rem;

		i {
			height: 1.5rem;
		}
		> :first-child {
			width: max(100% - 50rem, 4rem);
		}

		> * {
			background: var(--color-bg);
		}
		.a1 {
			background: var(--color-a1);
		}
		.a2 {
			background: var(--color-a2);
		}
		.a3 {
			background: var(--color-a3);
		}
		.fg {
			background: var(--color-fg);
		}
		.w1 {
			flex-grow: 1;
		}
		.w2 {
			flex-grow: 2;
		}
		.w3 {
			flex-grow: 3;
		}
		.w4 {
			flex-grow: 4;
		}
		.w6 {
			flex-grow: 6;
		}
		.w18 {
			flex-grow: 18;
		}
		.w36 {
			flex-grow: 36;
		}
	}
}