<!DOCTYPE html>
<html lang="en-US">
<head>
	<meta http-equiv="X-UA-Compatible" content="IE=edge" />
	<meta charset="utf-8" />
	<title>Welcome to Craft CMS</title>
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no, viewport-fit=cover" />
	<meta name="referrer" content="origin-when-cross-origin" />
	<style>
		html,
		body {
			font-size: 16px;
			-webkit-text-size-adjust: 100%;
			height: 100%;
			font-family: system-ui, BlinkMacSystemFont, -apple-system, 'Segoe UI', 'Roboto', 'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue', sans-serif;
		}

		body {
			margin: 0;
			padding: 0;
			background-color: hsl(212, 10%, 93%);
			color: hsl(212, 20%, 20%);
			display: flex;
		}

		h1 {
			margin-top: 0;
		}

		h2 {
			margin-top: 24px;
			font-size: 1em;
		}

		h2:first-child {
			margin-top: 0;
		}

		p {
			line-height: 1.4em;
			margin-bottom: 1.4em;
		}

		ul {
			line-height: 1.3em;
			padding-left: 20px;
			margin-bottom: 0;
		}

		ul li {
			margin-bottom: 0.35em;
		}

		a {
			color: #0d78f2;
			text-decoration: none;
		}

		a:hover {
			text-decoration: underline;
		}

		.go {
			color: #0d78f2;
		}

		.go:after {
			padding-left: 4px;
			content: '→';
			text-decoration: none !important;
		}

		small {
			color: #777;
		}

		code {
			display: inline-block;
			color: #da513d;
			padding: 0 2px;
			background: hsl(212, 10%, 96%);
			border-radius: 3px;
			line-height: 1.3;
			font-family: "SFMono-Regular", Consolas, "Liberation Mono", Menlo, Courier, monospace;
			font-size: 0.9em;
		}

		#container {
			flex-grow: 1;
		}

		#modal {
			background: #fff;
		}

		#aside {
			background: hsl(212, 10%, 93%);
		}

		.content {
			padding: 35px;
			padding-left: calc(35px + env(safe-area-inset-left));
			padding-right: calc(35px + env(safe-area-inset-right));
		}

		table {
			border-spacing: 0px;
			border-collapse: collapse;
		}

		table tr th {
			background-color: #D3D3D3;
		}

		table tr th, table tr td {
			border: 1px solid #7d7d7d;
			padding: 5px;
			text-align: left;
		}

		@media (min-width:480px) {
			body {
				background-image: url("{{ view.getAssetManager().getPublishedUrl('@app/web/assets/installer/dist', true, 'images/install-bg-1920.png') }}");
				background-repeat: no-repeat;
				background-size: cover;
				background-position: center center;
			}

			#container {
				display: flex;
				align-items: normal;
				justify-content: normal;
			}
		}

		@media (min-width:480px) and (min-height: 376px) {
			#container {
				padding: 24px;
				align-items: center;
				justify-content: center;
			}

			#modal {
				height: 100%;
				max-width: 770px;
				max-height: 510px;
				border-radius: 4px;
				overflow: auto;
				box-shadow: 0 25px 100px rgba(0, 0, 0, 0.5);
			}

			#aside {
				background: #f9f9f9;
				overflow: auto;
			}
		}

		@media (min-width:768px) {
			#modal {
				display: flex;
			}

			#main {
				width: 100%;
				overflow: auto;
			}

			#aside {
				width: 50%;
				overflow: auto;
			}
		}

		@media only screen and (min-width: 1921px) {
			body {
				background-image: url("{{ view.getAssetManager().getPublishedUrl('@app/web/assets/installer/dist', true, 'images/install-bg-5120.png') }}");
			}
		}

		@media only screen and (-webkit-min-device-pixel-ratio: 1.5) and (min-width: 961px),
		only screen and (-moz-min-device-pixel-ratio: 1.5) and (min-width: 961px),
		only screen and (-o-min-device-pixel-ratio: 3/2) and (min-width: 961px),
		only screen and (min-device-pixel-ratio: 1.5) and (min-width: 961px),
		only screen and (min-resolution: 1.5dppx) and (min-width: 961px) {
			body {
				background-image: url("{{ view.getAssetManager().getPublishedUrl('@app/web/assets/installer/dist', true, 'images/install-bg-5120.png') }}");
			}
		}
	</style>
</head>
<body class="ltr">
<div id="container">
	<div id="modal">
		<div id="main">
			<div class="content">
				{% if block("content") is defined %}
					{{ block("content") }}
				{% endif %}
			</div>
		</div>
	</div>
</div>
</body>
</html>
