/* ------------------------------ \
	This is a constant WIP!
\ ------------------------------ */

/* #region ---[ Variables ]------------------------------ */
:root {
	--raw-col--primary: #ff8300;
	--raw-col--secondary: #830000;
}
html { --raw-font: 'Inter', sans-serif; }

@supports (font-variation-settings: normal) {
	html { --raw-font: 'Inter var', sans-serif; }
}
/* #endregion */

/* #region ---[ Background & Basics ]------------------------------ */

html {
	box-sizing: border-box;
}

*,
*::before,
*::after {
	box-sizing: inherit;
	margin: 0;
	padding: 0;
}

body {
	background: linear-gradient(60deg, #000000, #040000, #0d0000, #1a0000, #280000, #350000, #3e0000, #420000);background: linear-gradient(60deg, #000000, #040000, #0d0000, #1a0000, #280000, #350000, #3e0000, #420000);
	background-size: 400% 400%;
	margin: 0 auto;
	animation: gradient 12s ease infinite;
	height: 100vh;
	overflow:hidden;
	font-family: var(--raw-font);
}

/* #endregion */

/* #region ---[ Animation/Keyframes ]------------------------------ */

@keyframes gradient {
	0% {
		background-position: 0% 50%;
	}
	50% {
		background-position: 100% 50%;
	}
	100% {
		background-position: 0% 50%;
	}
}

/* #endregion */

/* #region ---[ General Basics ]------------------------------ */
::-moz-selection {
	background-color: var(--raw-col--secondary);
	color: var(--raw-col--primary);
	text-shadow: none;
}

::selection {
	background-color: var(--raw-col--secondary);
	color: var(--raw-col--primary);
	text-shadow: none;
}

hr {
	display: block;
	height: 1px;
	border: 0;
	border-top: 1px solid #ccc;
	margin: 1em 0;
	padding: 0;
}

audio,
canvas,
iframe,
img,
svg,
video {
	vertical-align: middle;
}

/* #endregion */

/* #region ---[ Content ]------------------------------ */

.content {
	display: grid;
	place-items: center;
	height: 100%;
	width: 100%;
}


a {
	text-decoration: none;
	color: #fff;
}

a:hover {
	text-decoration: underline;
	color: #fff;
	/* cursor: pointer; */
}

.contact a {
	display: flex;
	align-items: center;
}

.icon {
	width: 1.1em;
	height: 1.1em;
	display: inline-block;
	background-color: #fff;
	margin-inline-end: 5px;
}

.github.icon {
	-webkit-mask: url(/github.svg) no-repeat 50% 50%;
	mask: url(/github.svg) no-repeat 50% 50%;
	-webkit-mask-size: cover;
	mask-size: cover;
}

.keybase.icon {
	-webkit-mask: url(/keybase.svg) no-repeat 50% 50%;
	mask: url(/keybase.svg) no-repeat 50% 50%;
	-webkit-mask-size: cover;
	mask-size: cover;
}

.map-marker.icon {
	-webkit-mask: url(/map-marker-solid.svg) no-repeat 50% 50%;
	mask: url(/map-marker-solid.svg) no-repeat 50% 50%;
	-webkit-mask-size: cover;
	mask-size: cover;
}

/* #endregion */

/* #region ---[ Logo ]------------------------------ */

#logo {
	position: relative;
    margin: auto;
    /* margin: 30vh auto 0; */
    /* max-width: 20vw; */
    width: clamp(420px, 23vw, 42rem);
    transition: all 420ms ease-in-out;
    transform: rotate(0);
}

#logo:hover {
    transform: rotate(-12deg);
	cursor: pointer;
}

#logo:after {
	position: absolute;
	content: "";
	top: -1vw;
	left: 1vw;
	right: 0;
	z-index: -1;
	height: 100%;
	width: 100%;
	margin: 0 auto;
	transform: scale(.69);
	filter: blur(3vw);
	background: linear-gradient(-45deg, #830000, #ff8300);
	background-size: 250% 250%;
	animation: gradient 8s ease infinite;
	transition: all 420ms 100ms ease-in-out;
}

#logo:hover:after {
	top: 1.5vw;
	left: -2vw;
	right: 0;
	transform: scale(.77);
	filter: blur(5vw);
}

/* #endregion */

/* #region ---[ Modal ]------------------------------ */

#modal {
	opacity: 0;
	transition: all 420ms ease;
	background: rgba(17, 17, 17, 0.5);
	position: absolute;
	left: 0;
	top: 0;
	width: 100%;
	height: 100%;
	z-index: -1;
}
#modal .modalContent {
	transition: all 420ms ease;
	width: clamp(350px, 35%, 35vw);
	margin: 40vh auto;
	padding: 2em 2.5em;
	background: rgba(0, 0, 0, 0.7);
	backdrop-filter: blur(3px);
	color: #fff;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
	border-radius: 5px;
}
#modal.visible {
	display: block;
	backdrop-filter: blur(6px);
	filter: blur(0);
	opacity: 1;
	z-index: 1000;
}

.blur {
	filter: blur(30px);
	backdrop-filter: grayscale(75%);
	transform: scale(1.05);
}

/* #endregion */

/* #region ---[ Icons ]------------------------------ */

.contact {
	display: flex;
	flex-flow: row nowrap;
	justify-content: flex-start;
	align-items: center;
	margin-block-start: 10px;
}

.contact a + a {
	margin-inline-start: 20px;
}

/* .github:before {
	content: "";
	display: block;
	background-image: url(/github.svg);
	background-size: 32px 32px;
	fill: #ff0;
	color: #ff0;
} */

/* #endregion */

/* #region ---[ Modal Content ]------------------------------ */

h1 {
	font-size: 3.6em;
	font-weight: 900;
	letter-spacing: -0.03em;
}

p {
	font-size: 1.4em;
}

.subtitle {
	font-size: 1.8em;
	color: #ccc;
	text-transform: uppercase;
	letter-spacing: 0.42em;
}

/* #endregion */

/* #region ---[ Canvas ]------------------------------ */

#canvas {
	position: absolute;
	/* background: linear-gradient(235deg, #1cb991, #3d4ae8); */
	background: transparent;
	top: 0;
	left: 0;
	z-index: -1;
	width: 100%;
	height: 100%;
	filter: blur(10px);
	transition: all 420ms ease;
	transform: scale(1.5);
}
#canvas.blur-less {
	filter: blur(0);
	transform: scale(1);
}

/* #region ---[ Print Styles ]------------------------------ */
/* Inlined to avoid the additional HTTP request:
	https://www.phpied.com/delay-loading-your-print-css/
*/

@media print {
	*,
	*::before,
	*::after {
		background: #fff !important;
		color: #000 !important;
		/* Black prints faster */
		box-shadow: none !important;
		text-shadow: none !important;
	}

	a,
	a:visited {
		text-decoration: underline;
	}

	a[href]::after {
		content: " (" attr(href) ")";
	}

	abbr[title]::after {
		content: " (" attr(title) ")";
	}

	/*
	* Don't show links that are fragment identifiers,
	* or use the `javascript:` pseudo protocol
	*/
	a[href^="#"]::after,
	a[href^="javascript:"]::after {
		content: "";
	}

	pre {
		white-space: pre-wrap !important;
	}

	pre,
	blockquote {
		border: 1px solid #999;
		page-break-inside: avoid;
	}

	tr,
	img {
		page-break-inside: avoid;
	}

	p,
	h2,
	h3 {
		orphans: 3;
		widows: 3;
	}

	h2,
	h3 {
		page-break-after: avoid;
	}
}
/* #endregion */