@import url('fonts/ubuntu-mono.css');
@import url('fonts/moda.css');

/* Reset */

body, html {
	margin: 0; padding: 0;
}
a, a:hover, a:visited, a:active {
  color: inherit;
}
* {
	transition-duration: 0.2s;
	transition: 0.2s;
	scroll-behavior: smooth;
}

/* Fonts */

body {font-family: "Ubuntu Mono"; font-size: 1.5rem;}
h1, h2, h3, h4, h5, h6 {
	font-family: "Moda";
	font-weight: 400;
	text-transform: uppercase;
	line-height: 1;
}
h1 {font-size: 6rem;}
h2 {font-size: 4.5rem;}
h3 {font-size: 4rem;}
h4 {font-size: 3.5rem;}
h5 {font-size: 3rem;}
h5 {font-size: 2.5rem;}
p.kicker {
	font-size: 1.75rem;
	font-weight: bold;
}
.smaller-text, footer {
	font-size: 1.25rem !important;
	h1 {font-size: 5rem;}
	h2 {font-size: 3.5rem;}
	h3 {font-size: 3rem;}
	h4 {font-size: 2.5rem;}
	h5 {font-size: 2rem;}
	h5 {font-size: 1.5rem;}
	p.kicker {font-size: 1.5rem;}
}
@media (max-wdith: 24rem) {
	font-size: 1.25rem !important;
	h1 {font-size: 5rem;}
	h2 {font-size: 3.5rem;}
	h3 {font-size: 3rem;}
	h4 {font-size: 2.5rem;}
	h5 {font-size: 2rem;}
	h5 {font-size: 1.5rem;}
	p.kicker {font-size: 1.5rem;}
}

/* Layout */

body {
	min-width: 20rem !important;
	max-width: 80rem;
	margin: auto;
}
@media (min-width: 84rem) {
	body {
		border: 4px solid white;
		margin: 2rem auto;
		border-radius: 16px !important;
		& > *:first-child {
			border-top-left-radius: 12px;
			border-top-right-radius: 12px;
		}
		& > *:last-child {
			border-bottom-left-radius: 12px;
			border-bottom-right-radius: 12px;
		}
	}
}

section {padding: 4rem 2rem;}
section.section-larger {padding: 8rem 2rem;}
section.section-smaller {padding: 2rem;}

@media (max-width: 32rem) {
	section {padding: 2rem 1.5rem;}
	section.section-larger {padding: 4rem 1.5rem;}
	section.section-smaller, nav, footer {padding: 1.5rem;}
}

div.row {
	max-width: 80rem;
	margin: 1.5rem auto;
	&:first-child {margin-top: 0;}
	&:last-child {margin-bottom: 0;}
	& > * {
		margin: 1.5rem 0;
		&:first-child {margin-top: 0;}
		&:last-child {margin-bottom: 0;}
	}
}

nav, footer {padding: 2rem;}
nav ul > li {display:inline}
ul > li {margin: 0.5rem 0;}

/* Colors */

:root {
	--dark:     #131212;
	--darkish:  #252422;
	--light:    #f1faee;
	--accent: var(--accent-1);
	--background: var(--dark);
	--foreground: var(--light)
}

section, footer {
	background-color: var(--background);
	color: var(--foreground);
}

.section-accent {
	background-color: var(--accent);
	--background: black;
	--background-alt: var(--accent-dark);
	--foreground: var(--light);
}
.section-black {
	--background: black;
	--background-alt: #202020;
	--foreground: var(--light);
}
.section-dark {
	--background: var(--dark);
	--background-alt: black;
	--foreground: var(--light);
}
.section-darkish {
	--background: var(--darkish);
	--background-alt: black;
	--foreground: var(--light);
}
.section-light {
	--background: var(--light);
	--background-alt: #d8d8d8;
	--foreground: var(--dark);
}

/* Accents:
 * Accents must be able to contrast against both --light, and --dark colors.
 * Change accent colors, and add and remove accents with just the below lines,
 * and the RNG in the script to randomize accent colors.
*/
:root {
	--accent-1: #FFB200;
	--accent-1-dark: #dF8200;
	--accent-2: #d03888;
	--accent-2-dark: #b82070;
	--accent-3: #5a1a98;	
	--accent-3-dark: #3a0068;	
}
.accent-1 {--accent: var(--accent-1); --accent-dark: var(--accent-1-dark);}
.accent-2 {--accent: var(--accent-2); --accent-dark: var(--accent-2-dark);}
.accent-3 {--accent: var(--accent-3); --accent-dark: var(--accent-3-dark);}

/** Styling */

/* Dropcaps have a stencil style, with an accent-colored background */
.dropcap {
	float: left;
	font-size: 4rem;
	background-color: var(--accent);
	color: var(--background);
	margin-right: 1rem;
	margin-bottom: 0;
	border-radius: 1000px;
	padding: 6px;
	font-weight: 900;
}

/* Highlights
 * Highlight color set to acccent color.
 * Highlight for titles bleeds left and right of the text,
 * and is ~50% of the height of the text.
*/
mark {
	background-color: var(--accent);
	padding: 4px;
}
h1, h2, h3, h4, h5, h6 {
	& mark {
		color: inherit;
		background-color: unset;

		background-image: linear-gradient(
			to bottom,
			transparent 25%,
			var(--accent) 25%,
			var(--accent) 60%,
			transparent 60%
		);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		background-position: 0 0;
		padding: 0 0.5rem;
		margin-left: -0.5rem;
		margin-right: -0.5rem;
		
		font-weight: 400;
	}
}

/* Buttons
 * Has an accent-colored border, and a box shaddow to pop it out of the page
 * Button depressed into page upon hover
 * Add .disabled class to disable the button hover and press effects.
*/
a.button {
	position: relative;
	display: inline-block;
	bottom: 10px;
	left: 0px;
	text-decoration: none;
	font-weight: 700;
	background-color: var(--background);
	color: var(--foreground);
	border: 0.25rem solid var(--accent);
	padding: 0.5rem 1rem;
	box-shadow:
		0 10.5px var(--accent-dark),
		0 10px var(--accent-dark),
		0 9.5px var(--accent-dark),
		0 9px var(--accent-dark),
		0 8.5px var(--accent-dark),
		0 8px var(--accent-dark),
		0 7.5px var(--accent-dark),
		0 7px var(--accent-dark),
		0 6.5px var(--accent-dark),
		0 6px var(--accent-dark),
		0 5.5px var(--accent-dark),
		0 5px var(--accent-dark),
		0 4.5px var(--accent-dark),
		0 4px var(--accent-dark),
		0 3.5px var(--accent-dark),
		0 3px var(--accent-dark),
		0 2.5px var(--accent-dark),
		0 2px var(--accent-dark),
		0 1.5px var(--accent-dark),
		0 1px var(--accent-dark),
		0 0.5px var(--accent-dark);
	margin: 0.75rem 0.25rem;
	
	&.variation-1 {border-radius: 10px;}
	&.variation-2 {border-radius: 20px;}
	&.variation-3 {border-radius: 40px;}
	
	&:hover:not(.disabled) {
		box-shadow:
			0 5px var(--accent-dark),
			0 4.5px var(--accent-dark),
			0 4px var(--accent-dark),
			0 3.5px var(--accent-dark),
			0 3px var(--accent-dark),
			0 2.5px var(--accent-dark),
			0 2px var(--accent-dark),
			0 1.5px var(--accent-dark),
			0 1px var(--accent-dark),
			0 0.5px var(--accent-dark);
		bottom: 5px !important;
		left: 0 !important;
	}
	&:active:not(.disabled) {
		box-shadow: none;
		bottom: 0px !important;
		left: 0 !important;
		
	}
}

/* Badges
 * Similar to buttons
 * Basically, I wanted a button that didn't have a link, but made it visually distinct
*/
span.badge {
	bottom: 6px;
	left: 0px;
	background-color: var(--accent);
	color: var(--foreground);
	padding: 0.5rem 0.75rem;
	border-radius: 100px;
	margin: 0.5rem 0.25rem;
}
	

/* Navigation
 * Similar to buttons, but each list is a contiguous block,
 * and each li > a item depresses individually.
 * Unless it's set to .disabled .
 * Nav blocks have an accent background.
 * How TF did this end up being over 100 lines??
*/
nav {
	/* Colors and borders */
	background-color: var(--accent);
	border-top: 4px solid var(--foreground);
	border-bottom: 4px solid var(--foreground);
	ul > li > a {
		margin: 0 !important;
		font-size: 1.25rem; /* Reset font size */
		background-color: var(--foreground);
		border-width: 4px 2px;
		border-style: solid;
		border-color: var(--background);
		color: var(--background) !important;
		padding: 0.5rem 0.75rem;
		font-weight: bold;
		text-decoration: none;
		display: inline-block;
	}
	/* First and last items */
	ul > li {
		&:first-child a {
			border-left-width: 4px;
			border-top-left-radius: 1000px;
			border-bottom-left-radius: 1000px;
		}
		&:last-child a {
			border-right-width: 4px;
			border-top-right-radius: 1000px;
			border-bottom-right-radius: 1000px;
		}
	}
	
	
	/* Support for horizontal placement of lists */
	overflow-x: scroll;
	& > .row {display:flex;}
	ul {
		display: inline-block;
		width: max-content;
		flex-shrink: 0;
		margin: 0.25rem 0.5rem !important;
		margin-bottom: -0.5rem !important;
		padding: 0;
		&:first-child {margin-left: 0;}
		&:last-child {padding-right: 1rem;}
		/* No space character displayed between list items */
		font-size: 0;
		
		height: 45px !important;
	}
	
	/* Support for above horizontal placement of lists */
	ul {
		/** Icons only */
		li > a:has(svg) {
			padding: 0.25rem 0.4rem !important;
			svg {height: 1.5rem; aspect-ratio: 1;}
		}
		li:has(a > svg) {
			aspect-ratio: 1 !important;
		}
		&:has(> :nth-child(2)) > li {
			&:first-child a {padding-left: 1.5rem;}
			&:last-child a {padding-right: 1.5rem;}
			
			&:first-child > a:has(svg) {padding-left: 1rem !important;}
			&:last-child > a:has(svg) {padding-right: 1rem !important;}
		}
	}
	
	/* Items should depress when hovered over */
	ul > li > a {
		position: relative;
		box-shadow:
			0 8px var(--background-alt),
			0 7.5px var(--background-alt),
			0 7px var(--background-alt),
			0 6.5px var(--background-alt),
			0 6px var(--background-alt),
			0 5.5px var(--background-alt),
			0 5px var(--background-alt),
			0 4.5px var(--background-alt),
			0 4px var(--background-alt),
			0 3.5px var(--background-alt),
			0 3px var(--background-alt),
			0 2.5px var(--background-alt),
			0 2px var(--background-alt),
			0 1.5px var(--background-alt),
			0 1px var(--background-alt),
			0 0.5px var(--background-alt),
			0 0 var(--background-alt);
		bottom: 8px;
		left: 0px;
		
		&.active:not(.disabled) {
			box-shadow:
				0 5px var(--background-alt),
				0 4.5px var(--background-alt),
				0 4px var(--background-alt),
				0 3.5px var(--background-alt),
				0 3px var(--background-alt),
				0 2.5px var(--background-alt),
				0 2px var(--background-alt),
				0 1.5px var(--background-alt),
				0 1px var(--background-alt),
				0 0.5px var(--background-alt),
				0 0 var(--background-alt);
			bottom: 5px;
			left: 0;
		}
		
		&:hover {
			box-shadow:
				0 3px var(--background-alt),
				0 2.5px var(--background-alt),
				0 2px var(--background-alt),
				0 1.5px var(--background-alt),
				0 1px var(--background-alt),
				0 0.5px var(--background-alt),
				0 0 var(--background-alt) !important;
			bottom: 3px !important;
			left: 0 !important;
		}
		
		&:active:not(.disabled) {
			box-shadow: none !important;
			bottom: 0px !important;
			left: 0 !important;
			
		}
	}
}