@font-face {
	font-family: 'arimoregular';
	src: url('arimo-webfont.woff') format('woff');
	font-weight: normal;
	font-style: normal;
}

body {
	font-family: 'arimoregular', Cambria;
}

* {
	margin: 0;
	padding: 0;
}

.content {
	width: 1920px;
	height: 1080px;
	display: grid;
	grid-template:
		'header-confirm header-confirm header-error' 1fr
		'text-confirm text-confirm text-error' 1fr
		'contents-confirm contents-confirm contents-error' 7fr
		'contents-confirm contents-confirm date-time' 1fr / 1fr 1fr 1fr;
}

.header-confirm {
	grid-area: header-confirm;
}

.text-confirm {
	grid-area: text-confirm;
}

.contents-confirm {
	grid-area: contents-confirm;
}

.header-error {
	background-color: #feeae9;
	grid-area: header-error;
}

.text-error {
	background-color: #feeae9;
	grid-area: text-error;
}

.contents-error {
	background-color: #feeae9;
	grid-area: contents-error;
}

.date-time {
	grid-area: date-time;
}

.title-icon-size {
	font-size: 50px;
}

.flex-center {
	display: flex;
	align-items: center;
	justify-content: center;
}

.flex-center h1 {
	font-size: 80px;
}

.flex-center p {
	font-size: 50px;
}

.blue-colour {
	color: #00b5d7;
}

.red-colour {
	color: #d50001;
}

.date-time-element {
	background-color: black;
	color: whitesmoke;
	display: grid;
	grid-template-columns: 50% 50%;
	grid-template-rows: 50% 50%;
	font-size: 40px;
}

.date-time-element > div {
	display: flex;
	align-items: center;
	justify-content: start;
}

.date-time-element > div:first-child {
	justify-content: center;
	font-size: 90px;
}

.date-time-element > .time-element {
	grid-row: 1 / 3;
}

.check-in-column {
	display: grid;
	grid-gap: 5px;
	grid-template-columns: 1fr;
	grid-template-rows: repeat(7, 80px);
	grid-auto-flow: column;
	padding: 5px;
}

.confirm-column {
	grid-template-columns: repeat(2, 49%);
	grid-template-rows: repeat(10, 80px);
}

.check-in-row {
	display: grid;
	gap: 5px;
	grid-template-columns: auto 1fr 1fr;
}

.check-in-row > div {
	display: flex;
	align-items: center;
	justify-content: center;
	font-size: 50px;
}

.check-in-row:nth-child(1) div p {
	font-size: 40px;
}

.check-in-row > div:nth-child(3) {
	overflow: hidden;
	white-space: nowrap;
	justify-content: start;
}

.error-column > div > div:not(:first-child) {
	background-color: #fe7f7e;
	color: #4c0100;
}

.confirm-column > div:nth-child(odd) div:not(:first-child) {
	background-color: #9fd8cb;
}

.confirm-column > div:nth-child(even) div:not(:first-child) {
	background-color: #bde4da;
}

.error-column .check-in-row > div:first-child::before {
	content: '▶';
	color: #d50001;
	font-size: 50px;
	background-color: unset;
}

@media screen and (max-width: 1100px) {
	.content {
		height: 1920px;
		width: 1080px;
		grid-template:
			'header-confirm text-confirm' 1fr
			'contents-confirm contents-confirm' 4fr
			'header-error text-error' 1fr
			'contents-error contents-error' 4fr
			'date-time date-time' 1fr / 1fr 1fr;
	}

	.flex-center h1 {
		font-size: 70px;
	}
}