/* FONTS */
@import url('https://fonts.googleapis.com/css?family=Quattrocento:400|Inconsolata:400|Calligraffitti:400|Exo:400');

:root {
	/* COLORS */
	/* --green: #00ebc7; */
	--aqua: #0fc;
	/* --red: #ff5470; */
	--red: #ff3232;
	--hotpink: #ff1a75;
	/* --yellow: #fde24f; */
	/* --black: #1b2d45; */
	--black: #111;
	/* --darkBlue: #00214d; */
	/* --gray: #bfbfbf; */
	--white: #fff;
	/* --darkGray: #222; */
	--darkGray: #191919;
	--lightGray: rgba(255, 255, 255, 0.5);
	--gray: #f5f5f5;

	/* COLORS INTENTIONS */
	--primary: var(--aqua);
	--danger: var(--red);
	--background: var(--black);
	--textColor: var(--white);
	--lineColor: var(--hotpink);
	--cardBG: var(--darkGray);
	--cardBGGradient: linear-gradient(315deg, var(--black), var(--cardBG), var(--black));
	--headerBG: var(--black);
	--headerLinkText: var(--white);
	--btnTextColor: var(--textColor);
	--footerBG: var(--black);
	--headerLinkOpacity: var(--lightGray);
	--headerBorder: var(--aqua);
	--waveBG: var(--darkGray);
	--darkAquaLightHotPink: var(--aqua);

	/* STYLES */
	--line: 1px solid var(--lineColor);

	/* TYPE */
	--headingFont: 'Quattrocento', serif;
	--bodyFont: 'Inconsolata', monospace;
	--slantText: 'Calligraffitti', cursive;
	--baseFontSize: 100%;

	/* SIZING FOR NON DEFAULT STYLING */
	--h1: 4.209em;
	--h2: 3.157em;
	--h3: 2.369em;
	--h4: 1.777em;
	--h5: 1.333em;
	--smallTextSize: 0.75em;

	/* ELEVATION LEVELS */
	--level1: 0 1px 3px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
	--level2: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--level3: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--level4: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

	/* POSITIONING */
	--containerPadding: 2.5%;
	--headerHeight: 4rem;
	--borderRadius: 10px;
}

/* FROM TYPE-SCALE */
html {
	font-size: var(--baseFontSize);
	box-sizing: border-box;
} /*18px Desktop*/

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

body {
	font-family: var(--bodyFont);
	font-weight: 400;
	line-height: 1.65;
	background: var(--background);
	color: var(--textColor);
}

header {
	color: white;
	position: fixed;
	left: 0;
	top: 0;
	width: 100%;
	height: var(--headerHeight);
	background: var(--headerBG);
	box-shadow: var(--level2);
	display: flex;
	justify-content: space-between;
	align-items: center;
	padding: 0 var(--containerPadding);
	z-index: 5;
}

header nav a {
	/* color: white; */
	color: var(--headerLinkText);
	text-decoration: none;
}

/* handles spacing of nav items */
header nav a + a {
	margin-left: 20px;
}

footer {
	--footerTextColor: var(--white);
	color: var(--footerTextColor);
	background: var(--footerBG);
	padding: 2rem var(--containerPadding);
	text-align: center;
}

footer a {
	color: var(--footerTextColor);
}

footer p {
	margin-bottom: 0;
	max-width: none;
}

p {
	margin-bottom: 1.15rem;
	max-width: 40em;
}

p a,
blockquote a {
	color: var(--textColor);
	text-decoration: none;
	border-bottom: solid 2px var(--primary);
}

h1,
h2,
h3,
h4,
h5 {
	margin: 2.75rem 0 1.05rem;
	font-family: var(--headingFont);
	font-weight: 400;
	line-height: 1.15;
}

h1 {
	margin-top: 0;
	font-size: var(--h1);
}

h2 {
	font-size: var(--h2);
}

h3 {
	font-size: var(--h3);
}

h4 {
	font-size: var(--h4);
}

h5 {
	font-size: var(--h5);
}

small,
.text_small {
	font-size: var(--smallTextSize);
}

/* END TYPE-SCALE */

blockquote {
	/* border: solid 1px var(--darkBlue); */
	margin: 10px;
	padding: 2em;
	background: var(--cardBG);
	box-shadow: var(--level3);
}

label {
	display: block;
	font-size: var(--smallTextSize);
}

input,
textarea {
	padding: 4px 5px;
	border: var(--line);
	border-radius: 4px;
}

textarea {
	width: 100%;
	height: 5rem;
}

::placeholder {
	color: var(--gray);
}

select {
	border: var(--line);
}

hr {
	border-top: var(--line);
}

button {
	--btnColor: var(--primary);

	appearance: none;
	color: var(--btnTextColor);
	background: var(--btnColor);
	border: none;
	border-radius: 10px;
	padding: 5px 25px;
	cursor: pointer;
	box-shadow: var(--level1);
	transition: 0.3s ease-out box-shadow;
}

button:hover {
	box-shadow: var(--level2);
}

button[disabled] {
	opacity: 0.4;
}

button.cancel {
	--btnColor: var(--danger);
	--btnTextColor: white;
}

button.small {
	font-size: var(--smallTextSize);
}

.layout {
	padding: calc(3rem + var(--headerHeight)) 0;
}

.grid {
	--gridCols: 2;
	display: block;
	grid-template-columns: repeat(var(--gridCols), 1fr);
}

.cols-3 {
	--gridCols: 3;
}

.flex {
	--jContent: space-between;
	display: block;
	justify-content: var(--jContent);
}

.flex-around {
	--jContent: space-around;
}

@media only screen and (min-width: 500px) {
	:root {
		--baseFontSize: 112.5%;
	}
	.grid {
		display: grid;
	}
	.flex {
		display: flex;
	}
}

.card {
	padding: 2em;
	background: var(--cardBG);
	box-shadow: var(--level3);
	border-radius: var(--borderRadius);
}

/* first item will never have margin top */
.card > *:first-child {
	margin-top: 0;
}

/* last item will never have margin bottom */
.card > *:last-child {
	margin-bottom: 0;
}

.lightTheme {
	--primary: var(--aqua);
	--danger: var(--red);
	--background: var(--white);
	--textColor: var(--black);
	--lineColor: var(--hotpink);
	--cardBG: var(--gray);
	--cardBGGradient: linear-gradient(315deg, var(--white), var(--cardBG), var(--white));
	--headerBG: var(--white);
	--headerLinkText: var(--black);
	/* --btnTextColor: var(--textColor); */
	--footerBG: var(--white);
	--headerLinkOpacity: var(--black);
	--headerBorder: var(--hotpink);
	--waveBG: var(--gray);
	--darkAquaLightHotPink: var(--hotpink);
}

/* .dark { */
/*   --cardBG: var(--darkGray); */
/*   --background: var(--black); */
/*   --textColor: var(--lightGray); */
/*   --headerBG: var(--darkGray); */
/*   --btnTextColor: var(--black); */
/*   --footerBG: var(--darkGray); */
/* } */
/*  */
/* .oled { */
/*   --black: #000; */
/*   --cardBG: var(--darkGray); */
/*   --headerBG: var(--darkGray); */
/*   --footerBG: var(--darkGray); */
/* } */

/* THEME */
.theme {
	/* COLORS */
	--green: #4fc4cf;
	--red: #ff5470;
	--yellow: #fbdd74;
	--black: #181818;
	--darkBlue: #994ff3;
	--gray: #bfbfbf;
	--lightGray: #f2f4f6;
	--white: #fff;
	--darkGray: #222;

	/* COLORS INTENTIONS */
	--primary: var(--green);
	--danger: var(--red);
	/* --background: var(--lightGray); */
	--background: var(--yellow);
	--textColor: var(--black);
	--lineColor: var(--gray);
	--cardBG: var(--white);
	--headerBG: var(--black);
	--btnTextColor: var(--textColor);
	--footerBG: var(--black);

	/* STYLES */
	--line: 1px solid var(--lineColor);
	/* --line: 1px solid var(--yellow); */

	/* TYPE */
	--headingFont: 'Exo', sans-serif;
	--bodyFont: 'Inconsolata', monospace;
	--slantText: 'Calligraffitti', cursive;
	--baseFontSize: 110%;

	/* SIZING FOR NON DEFAULT STYLING */
	--h1: 4.209em;
	--h2: 3.157em;
	--h3: 2.369em;
	--h4: 1.777em;
	--h5: 1.333em;
	--smallTextSize: 0.75em;

	/* ELEVATION LEVELS */
	--level1: 0 2px 5px 0 rgba(0, 0, 0, 0.1), 0 1px 2px 0 rgba(0, 0, 0, 0.06);
	--level2: 0 6px 8px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
	--level3: 0 12px 17px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
	--level4: 0 22px 27px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04);

	/* POSITIONING */
	--containerPadding: 2.5%;
	--headerHeight: 4rem;
	--borderRadius: 25px;
}