@import url('https://fonts.googleapis.com/css2?family=DotGothic16&display=swap');

body {
	margin: 0;
	background: url( "./bg.png" );
	font-family: 'DotGothic16', monospace;
}

.OpenButton {
	display: block;
	width: fit-content;
	padding: 16px 24px;
	margin: 64px auto 0;
	border: none;
	font-family: inherit;
	font-size: 16px;
	color: #fff;
	background: #d23f5b;
	cursor: pointer;
	box-shadow:
		0 0 0 4px #1a1a3e,
		0 0 0 8px #fff,
		0 0 0 12px #1a1a3e;
}

.OpenButton:hover {
	background: #ec5c79;
}

.OpenButton:active {
	transform: translate( 2px, 2px );
}

/* ===== Retro 8-bit dialog ===== */

.RetroDialog {
	position: fixed;
	inset: 0;
	z-index: 100;
	display: none;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-family: inherit;
	opacity: 0;
	transition:
		opacity .5s .5s,
		display 1s allow-discrete;
}

.RetroDialog.-open {
	display: flex;
	opacity: 1;
	/* transition: opacity .5s .5s; */
	transition:
		opacity .5s,
		display 1s allow-discrete;
}

.RetroDialog__Canvas {
	display: block;
}

.RetroDialog__Frame {
	width: min( 480px, 90vw );
	padding: 0 64px;
}

.RetroDialog__FrameInner {
	position: relative;
	box-sizing: border-box;
	padding: 32px;
	background: #1a1a3e;

}

.RetroDialog__Icon {
	display: flex;
	justify-content: center;
}

.RetroDialog__Body {
	margin: 0 0 16px;
	padding: 16px;
	font-size: 16px;
	line-height: 1.9;
	letter-spacing: 0.04em;
	background: #0c0c24;
	box-shadow: inset 0 0 0 2px #5a5a8e;
}

@keyframes blink {

	0%, 50%   { opacity: 1; }
	51%, 100% { opacity: 0; }

}

.RetroDialog__Cursor {
	display: inline-block;
	margin-left: 4px;
	color: #ffe14a;
	animation: blink 0.8s steps( 1 ) infinite;
}

.RetroDialog__Actions {
	display: flex;
	gap: 16px;
	justify-content: center;
	margin: 0;
	padding: 0;
	list-style: none;
}

.RetroDialog__Actions li {
	flex: 1;
	max-width: 160px;
}

.RetroButton {
	display: block;
	width: 100%;
	padding: 12px 20px;
	border: none;
	font-family: inherit;
	font-size: 16px;
	letter-spacing: 0.08em;
	color: #1a1a3e;
	background: #fff;
	cursor: pointer;
	box-shadow:
		0 0 0 3px #1a1a3e,
		0 0 0 6px #fff;
}

.RetroButton:hover {
	color: #1a1a3e;
	background: #ffe14a;
}

.RetroButton:active {
	transform: translate( 2px, 2px );
}

.RetroButton.-ghost {
	color: #fff;
	background: #1a1a3e;
	box-shadow:
		0 0 0 3px #fff,
		0 0 0 6px #1a1a3e;
}

.RetroButton.-ghost:hover {
	color: #1a1a3e;
	background: #fff;
}