<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="UTF-8">

		<link rel="apple-touch-icon" sizes="180x180" href="/img/favicon/apple-touch-icon.png">
		<link rel="icon" type="image/png" sizes="32x32" href="/img/favicon/favicon-32x32.png">
		<link rel="icon" type="image/png" sizes="16x16" href="/img/favicon/favicon-16x16.png">
		<link rel="manifest" href="/img/favicon/site.webmanifest">
		<link rel="mask-icon" href="/img/favicon/safari-pinned-tab.svg" color="#5bbad5">
		<link rel="shortcut icon" href="/img/favicon/favicon.ico">

		<meta name="msapplication-TileColor" content="#b91d47">
		<meta name="msapplication-config" content="/img/favicon/browserconfig.xml">
		<meta name="theme-color" content="#f65596">

		<meta property="og:title" content="traxxx" />
		<meta property="og:image" content="https://traxxx.me/img/og_logo.png" />

		<meta name="viewport" content="width=device-width,height=device-height,initial-scale=1.0,interactive-widget=resizes-content" />

		<title>traxxx - None shall pass</title>

		<style>
			:root {
				--primary-dark-10: #e54485;
				--primary: #f65596;
				--primary-light-10: #f075a6;
				--primary-light-20: #f2a6c4;
				--primary-light-30: #f7c9dc;
			}

			html,
			body {
				height: 100%;
				margin: 0;
			}

			.content {
				height: 100%;
				display: flex;
				flex-direction: column;
				justify-content: center;
				align-items: center;
				box-sizing: border-box;
				padding: 1rem;
			}

			.explainer {
				margin-bottom: 3rem;
				font-size: 1.25rem;
				text-align: justify;
				line-height: 1.5;
			}

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

			.links {
				display: flex;
				gap: 1rem;
				list-style: none;
				padding: 0;
				margin: 1rem 0 0 0;
			}

			.links li {
				padding: .25rem 0;
				margin: 0;
				font-size: 1.25rem;
			}

			.links a {
				padding: .5rem 1rem;
				border-radius: .5rem;
				background: var(--primary);
				color: white;
				text-decoration: none;
				white-space: nowrap;
				flex-shrink: 0;
			}

			.links a:hover {
				background: var(--primary-dark-10);
			}
		</style>
	</head>

	<body>
		<div class="content">
			<h2 class="heading">Not so fast, rascal.</h2>

			<p class="explainer">The content offered by traxxx is restricted in your jurisdiction.</p>

			<% if (!noVpn) { %>
			<div class="useful">
				Useful links:
				<ul class="links">
					<li>
						<a
							href="https://mullvad.net/"
							target="_blank"
							rel="noopener"
							class="link"
						>Mullvad VPN</a>
					</li>

					<li>
						<a
							href="https://protonvpn.com/"
							target="_blank"
							rel="noopener"
							class="link"
						>Proton VPN</a>
					</li>
				</ul>
			</div>
			<% } %>
		</div>
	</body>
</html>
