/**
 * (c) Hustletology.lol
 */

@import url('https://fonts.googleapis.com/css2?family=Roboto:ital,wght@0,100..900;1,100..900&family=Winky+Sans:ital,wght@0,300..900;1,300..900&display=swap');

html {
	scroll-behavior: smooth;
	cursor: url('https://hustletology.lol/img/cursor.png'), auto;
	background: radial-gradient(circle, rgb(255, 86, 222) 0%, rgb(96, 0, 166) 100%);
	background-attachment: fixed;
	padding: 0;
	margin: 0;
	height: 100vh;
}

body {
	background: transparent url(https://hustletology.lol/img/scene.png);
	background-position: bottom center;
	background-size: 100%;
	background-attachment: fixed;
	background-repeat: no-repeat;
	text-align: center;
	min-height: 100vh;
	background-position: fixed;
	color: white;
	font-size: 20pt;
	font-family: "Winky Sans", sans-serif;
	font-optical-sizing: auto;
	font-weight: bold;
	-webkit-text-stroke: 1.25px black;
	text-shadow: 0 0 3px #0005;
	padding: 0;
	margin: 0;
	line-height: 1.25;
}	

.stars {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: auto;
	mix-blend-mode: lighten;
	z-index: 1;
	pointer-events: none;
}

.wrapper {
	max-width: 860px;
	margin: 0 auto;
	z-index: 2;
	box-sizing: border-box;
	padding: 0.5em;
}

a {
	text-decoration: underline;
	color: #80ff6e;
	cursor: url('https://hustletology.lol/img/pointer.png'), auto !important;
	-webkit-text-stroke: 0.85px black !important;
	font-size: 110%;
}

a:hover {
	text-decoration: none;
}

img {
	width: 90%;
}

.logo {
	max-width: 640px;
	margin: 0.85em auto 0 auto;
}

.strip {
	margin: 1.25em auto;
	cursor: url('https://hustletology.lol/img/pointer.png'), auto;
}

footer {
	-webkit-text-stroke: 0.2px black;
	font-size: 70%;
	border-top: 1px solid #ffa5cf;
	padding: 1em;
	width: 90%;
	margin: 2em auto 0.5em auto;
	font-family: "Roboto", sans-serif;
	text-transform: uppercase;
	color: white;
	text-shadow: 0 0 3px #0005;
}

footer a {
	color: white;
	-webkit-text-stroke: 0.2px black;	
	text-shadow: 0 0 3px #0005;
}

footer a:hover {
	text-decoration: underline !important;
}

.go-up {
	display: inline-block;
	background: #df00db;
	border: 3px solid #ffbf00;
	border-radius: 5px;
	padding: 8px;
	box-shadow: 0px 0px 6px #0004;	
	color: #57ff3f;
	text-decoration: none;
	-webkit-text-stroke: 0;
	text-shadow: 0 0 2px #0006;	
	margin-bottom: 0.85em;
	font-size: 1.5em;
	text-transform: none;
}

.go-up:hover {
	text-decoration: none;
}

.go-up:hover {
	background: #ff2cf2;
}

.italic {
	font-style: italic;
}

/* Simple Lightbox */

.sl-overlay {
	background: #3b1a48 !important;
}

.sl-wrapper .sl-close,
.sl-wrapper .sl-navigation button.sl-prev,
.sl-wrapper .sl-navigation button.sl-next {
	color: white !important;
	-webkit-text-stroke: 0 !important;
}

.sl-caption {
	-webkit-text-stroke: 0 !important;
	font-weight: normal !important;
	background: #f750cd !important;
	text-shadow: none !important;
}

@media screen and (max-width: 850px) {
	h2 {
		font-size: 130%;
		padding-left: 0.5em;
		padding-right: 0.5em;
		line-height: 1.20;
		-webkit-text-stroke: 1px black !important;
	}

	h1 {
		-webkit-text-stroke: 2px black !important;
	}
	
	.logo {
		margin-top: 0.5em;
	}
	
	footer {
		margin-top: 0;
	}
}