/* http://meyerweb.com/eric/tools/css/reset/ 
   v2.0 | 20110126
   License: none (public domain)
   (Modified by James Duran)
*/

:root {
	--bg1:   #221c16;
	--bg2:   #443736;
	--hl1:   #DDCBA4;	
	--text1: #F2F0EF;
	--text2: #a49da4;
}

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, 
figure, figcaption, footer, header, hgroup, 
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
	margin: 0;
	padding: 0;
	border: 0;
	font-size: inherit;
	font: inherit;
	vertical-align: baseline;
	line-height: 1.25rem;
	scrollbar-color: var(--hl1) var(--bg2);
	scrollbar-width: auto;
}
html {
	/*
	font-family: Rockwell, 'Rockwell Nova', 'Roboto Slab', 'DejaVu Serif', 'Sitka Small', serif;
	*/
	font-family: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;
	font-weight: normal;
	color: var(--text1);
}

/*
 * HTML5 display-role reset for older browsers
 *
 * In the case of svg & img, the default inline-block align them with the baseline which adds extra
 * height to containers for no reason.
 */
article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, svg, img {
	display: block;
}
body {
	line-height: 1;
}
ul {
	list-style: disc;
	list-style-position: inside;
}
ol {
	list-style: decimal;
	list-style-position: inside;
}
blockquote, q {
	quotes: none;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: '';
	content: none;
}
table {
	border-collapse: collapse;
	border-spacing: 0;
}
a {
	color: inherit;
	-webkit-text-decoration: inherit;
	text-decoration: inherit;
}

/* Input elements */
label, summary, .noselect {
	-webkit-touch-callout: none; /* iOS Safari */
	-webkit-user-select: none;   /* Safari */
	-khtml-user-select: none;    /* Konqueror HTML */
	-moz-user-select: none;      /* Old versions of Firefox */
	-ms-user-select: none;       /* Internet Explorer/Edge */
	user-select: none;           /* Non-prefixed version, currently
	                                supported by Chrome, Edge, Opera and Firefox */
}

select {
	font: inherit;	
	&, &::picker(select) {
		appearance: base-select;
	}
}

input {
	font: inherit;
}

input.radio-pill {
	appearance: none;	
	margin: 0;
	padding: 0;
	width: 0;
	height: 0;
}

input.radio-pill:checked + label {
	background-color: var(--hl1);
	color: var(--bg1);
}

form input[type="button"], form button {
	appearance: none;
	background-color: #88888822;
	border-radius: 5px;
	border-width: 2px;
	border-style: outset;
	border-color: var(--text2);
	color: var(--text2);
}

form:valid input[type="button"], form:valid button {
	background-color: transparent;
	border-color: var(--text1);
	color: var(--text1);

	&:hover {
		background-color: var(--hl1);
		color: var(--bg1);
	}
}

details::details-content {
	block-size: 0;
	overflow: hidden;
	transition-property: block-size, content-visibility;
	transition-duration: 0.1s;
	transition-behavior: allow-discrete;
}
details[open]::details-content {
	block-size: auto;
	block-size: calc-size(auto, size);
}

/* Text/Font Utilities */
.text-xxl {
	font-size: 4rem;	
	line-height: 4.25rem;
}

.text-xl {
	font-size: 2.5rem;	
	line-height: 3rem;
}

.text-lg1 {
	font-size: 2rem;	
	line-height: 2.25rem;
}
.text-lg2 {
	font-size: 1.8rem;	
	line-height: 2rem;
}
.text-lg3 {
	font-size: 1.6rem;	
	line-height: 1.85rem;
}
.text-lg4 {
	font-size: 1.4rem;
	line-height: 1.65rem;
}
.text-lg5 {
	font-size: 1.2rem;	
	line-height: 1.45rem;
}
.text-lg6 {
	font-size: 1.1rem;
	line-height: 1.3rem;
}
.text-md {
	font-size: 1rem;
	line-height: 1.25rem;
}
.text-sm {
	font-size: 0.75rem;	
}
.wip {
	background-color: yellow;
	color: black;
	text-align: center;
	padding: 2px;
	border-radius: 5px;
}
.banner {
	padding: 2rem;
	font-size: 4rem;
	width: full;
	margin: 0.5rem;
	border-radius: 15px;
}

/* Sizing Utilities */
.w-full {
	width: full;
}

/* Layout Utilities */
.flex {
	display: flex;
}

.flex-row {
	display: flex;
	flex-direction: row;
}
.flex-col {
	display: flex;
	flex-direction: column;
}

.grow {
	flex-grow: 1;
}

.justify-between {
	justify-content: space-between;
}

.justify-evenly {
	justify-content: space-evenly;
}

.justify-center {
	justify-content: center;
}

.align-center {
	align-items: center;
}

.align-baseline {
	align-items: baseline;
}

.align-between {
	align-items: space-between;
}

.align-start {
	align-items: start;
}

.align-end {
	align-items: end;
}

/* Interactive Elements */
.outline {
	outline-color:	var(--hl1);
	outline-style:	solid;
	outline-width:	medium;
	transition:   	outline-width 0.05s cubic-bezier(0.25, 1, 0.5, 1);
}

.no-outline {
	outline-width: 0;
}

.hover-outline {
	outline-color:	var(--hl1);
	outline-style:	solid;
	outline-width:	0;
	transition:   	outline-width 0.05s cubic-bezier(0.25, 1, 0.5, 1);
}

.hover-outline:hover {
	/* I do NOT want this transition when the outline disappears */
	/*transition:   	outline-width 0.2s cubic-bezier(0.25, 1, 0.5, 1);*/
	transition-duration: 0.2s;
	outline-width: medium;
}

.hover-underline {
	text-decoration: none;
	text-underline-offset: 8px;
	transition: text-underline-offset 0.2s cubic-bezier(0.25, 1, 0.5, 1);
}

.hover-underline:hover {
	text-decoration: underline;
	text-underline-offset: 2px;
}