:root {
	--quark-dark-blue: #023047;
	--card-background: rgba(0, 0, 0, 0.25);
	--quark-medium-blue: #219EBC;
	--quark-light-blue: #8ECAE6;
	--quark-light-orange: #FFb703;
	--quark-dark-orange: #FB8500;
	--quark-text-grey: #212529;
	--border-radius: 0.375rem;


}

body {
	background-image: linear-gradient(-45deg, var(--quark-dark-blue), var(--quark-medium-blue));
	background-color: var(--quark-dark-blue);
	background-size: cover;
	background-repeat: no-repeat;
	line-height: 1.75em;
	color: var(--quark-light-orange);
}

html {
	min-height: 100%;
	margin: 0;
}


footer {
	text-align: left;
	opacity: 60%;
}

a {
	color: var(--quark-light-orange);
}


h1,h2,h3,h4 {
	color: var(--quark-light-orange);
}


/* General */

.q-btn {
	background-color: var(--quark-dark-orange);
	color: var(--quark-text-grey);
	font-weight: 600; /* 400 = reg, 800 = bold */
}

.q-btn:hover {
	color: var(--quark-text-grey);
	background-color: var(--quark-light-orange);
}

.q-btn-outline {
	margin-top: 0.5em;
	border: 1px solid var(--quark-dark-orange);
	color: var(--quark-dark-orange);
}

.q-btn-outline:hover {
	border: 1px solid var(--quark-light-orange);
	color: var(--quark-light-orange);
	background-color: var(--card-background);
}

.q-orange {
	color: var(--quark-dark-orange);
}

.q-card {
	background-color: var(--card-background);
	border-radius: var(--border-radius);
}

.q-blurb {
	max-width: 480px;
	padding-left: 10px;
	padding-right: 10px;

	/* force-center blurb <p> tag */
	margin-left: auto;
	margin-right: auto;
}

.q-footer {
	height: 30px;
	min-height: 30px;
}

.q-avatar {
	width: 15em;
	border-radius: 50%;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.q-ref-col {
	max-width: 150px;
}

.q-light {
	color: whitesmoke;
}

.q-links {
	display: flex;
	justify-content: center;
	color: var(--quark-dark-orange);
}
.q-links > * {
	margin: .5rem;
	color: var(--quark-dark-orange);
}

/* Gallery Section */
.q-gallery {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	align-items: center;
	margin: 1px;
}

.q-collection {
	padding: 10px;
}

.q-gallery-item {
	border-radius: var(--border-radius);
	margin: 12px;
	width: 300px;
}
.q-photo {
	width: 300px;
	box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}



/* TOS Section */
.list-heading {
	list-style-type: decimal;
	font-size: large;
	font-weight: bold;
}

.q-list > li {
	list-style-type: disc;
}



/* Testing */
.red {
	background-color: red;
}

.blue {
	background-color: blue;
}

.green {
	background-color: green;
}