/* Palette URL: http://paletton.com/#uid=34P1q0kwi++bu++hX++++rd++kX */
/* 90¡Æ Triad, Hue 308¡Æ (Purple), Shiny Preset */

body {
	background: var(--black);
	background-image: url(images/sky.jpg);
	color: var(--white);
	font-size: 0; /* Prevents newlines in html from creating whitespace. */
	margin: 0;
	text-align: center;
}

h1 {
	font: 32px "Arial Black", Gadget, sans-serif;
	margin: 0 0 16px 0;
	text-transform: uppercase;
}
h3 { font: 20px "Arial Black", Gadget, sans-serif; }
h5 { font: 18px "Arial Black", Gadget, sans-serif; }
h6 { font: 16px "Arial Black", Gadget, sans-serif; }

p, ol, ul, td {
	font: 16px "Lucida Sans Unicode", "Lucida Grande", sans-serif;
	margin: 0;
}

img {
	object-fit: cover;
}

a.button { text-decoration: none; }
.button {
	border: none;
	border-radius: 28px;
	color: var(--white);
	display: inline-block;
	font: 20px "Arial Black", Gadget, sans-serif;
	margin: 8px 4px;
	padding: 6px 12px;
	-webkit-transition: background-color .2s, color .2s;
	transition: background-color .2s, color .2s;
	width: 144px; /*was 112px, then 224px*/
}
.button:active { color: var(--black); }
.button.blue { color: #A7E7FF; }
.button.blue:hover {
	background-color: #A7E7FF;
	color: #0ABBFF;
}
.button.blue:active { color: #004C69; }
.button.orange { color: #FFD3A4; }
.button.orange:hover {
	background-color: #FFD3A4;
	color: #FF8500;
}
.button.orange:active { color: #A75700; }
.button.purple { color: #EDA6FF; }
.button.purple:hover {
	background-color: #EDA6FF;
	color: #CE07FF;
}
.button.purple:active { color: #58006E; }

.main-content {
	margin: 0 auto;
	padding: 12px 40px;
	max-width: 1000px;
	min-width: 420px;
}

.content-holder {
	background-color: var(--gray-dark);
	border: 10px solid black;
	border-radius: 25px;
	display: flex;
	flex-direction: column;
	margin-bottom: 40px;
	padding: 24px 40px;
}
.content-holder:last-of-type {
	margin-bottom: 24px;
}
.content-holder p {
	text-align: left;
}
.content-holder img {
	border-radius: 15px;
}

.sub-content-holder {
	background-color: #303030;
	border-width: 5px;
	border-style: solid;
	border-radius: 15px;
	display: flex;
	flex-direction: column;
	margin-bottom: 24px;
	padding: 24px;
}
.sub-content-holder:last-child {
	margin-bottom: 0;
}
.sub-content-holder img {
	border-radius: 10px;
}

.navbar {
	align-items: center;
	display: flex;
	justify-content: center;
}

.navbar-img {
	max-width: 350px;
	width: 100%;
}

/* COLORS */

/* TODO: Make 5 varients of gray too. */
:root {
	--blue: #0ABBFF;
	--blue-lighter: #A7E7FF;
	--blue-light: #76D9FF;
	--blue-dark: #006388;
	--blue-darker: #004C69;

	--orange: #FF8500;
	--orange-lighter: #FFD3A4;
	--orange-light: #FFBA70;
	--orange-dark: #D97100;
	--orange-darker: #A75700;

	--purple: #CE07FF;
	--purple-lighter: #EDA6FF;
	--purple-light: #E474FF;
	--purple-dark: #73008F;
	--purple-darker: #58006E;

	--black: #303030;
	--gray-dark: #505050;
	--gray: #808080;
	--gray-light: #B0B0B0;
	--white: #D0D0D0;
}

.blue { background-color: var(--blue); }
.blue-border { border-color: var(--blue); }
.blue-border h1,
.blue-border h3 { color: var(--blue-light); }

.orange { background-color: var(--orange); }
.orange-border { border-color: var(--orange); }
.orange-border h1,
.orange-border h3 { color: var(--orange-light); }

.purple { background-color: var(--purple); }
.purple-border { border-color: var(--purple); }
.purple-border h1,
.purple-border h3 { color: var(--purple-light); }