/* style.css — Neoscion Studios Common Theme */

/* Root variables */
:root {
	--body-color: #eee;
	--body-background: #111;
	--body-font: 'Georgia', serif;
	--link-color: #fff;
	--link-hover-color: #f46;
	--header-color: #f46;
	--header-background: #000;
	--nav-color: #f46;
	--nav-background: #111;
	--main-color: #f46;
	--main-background: #000;
	--card-color: #f46;
	--card-background: #111;
	--footer-color: #666;
	--footer-background: #111;
	--lyrics-color: #888;
	--lyrics-background: #111;
}

/* General reset */
body, header, main, nav, section, footer {
	margin: 0;
	padding: 0;
	box-sizing: border-box;
}
body {
	color: var(--body-color);
	background: var(--body-background);
	font-family: var(--body-font);
	line-height: 1.6;
}
a {
	color: var(--link-color);
	text-decoration: none;
	transition: color 0.3s;
}
a:hover {
	color: var(--link-hover-color);
	text-decoration: none;
}
p {
	color: var(--body-color);
}

header {
	color: var(--header-color);
	background: var(--header-background);
	padding: 4rem 2rem;
	text-align: center;
}
header h1 {
	font-size: 3rem;
	letter-spacing: 2px;
}
header a {
	font-weight: bold;
}

nav {
	color: var(--nav-color);
	background: var(--nav-background);
	padding: 1rem;
	text-align: center;
}
nav a {
	margin: 0 1rem;
	font-weight: bold;
}

main {
	padding: 2rem;
	color: var(--main-color);
	background: var(--main-background);
}

section {
	margin: auto;
	padding: 1rem;
	max-width: 1000px;
}
section h2 {
	border-bottom: 2px solid;
	padding-bottom: 0.5rem;
}
section a {
	font-weight: bold;
}

footer {
	color: var(--footer-color);
	background: var(--footer-background);
	padding: 2rem;
	text-align: center;
	font-size: 0.9rem;
}
footer a {
	font-weight: bold;
}

.grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
	gap: 2rem;
	margin-top: 2rem;
}
.card {
	color: var(--card-color);
	background: var(--card-background);
	padding: 1.5rem;
	border-radius: 12px;
	box-shadow: 0 0 12px rgba(0, 0, 0, 0.3);
	transition: transform 0.3s;
}
.card:hover {
	transform: scale(1.03);
}
.card h3 {
	margin-top: 0rem;
}
.card a {
	font-weight: bold;
}
.profile {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.profile img {
	width: 300px;
	height: 300px;
	object-fit: cover;
	border-radius: 50%;
	border: 3px solid;
}
.profile p {
	text-align: center;
	max-width: 700px;
}
.logo {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.logo img {
	width: 200px;
	height: auto;
	object-fit: cover;
	border-radius: 6px;
	border: 3px solid;
}
.cover {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.cover img {
	width: 300px;
	height: auto;
	object-fit: cover;
	border-radius: 6px;
	border: 3px solid;
}
.album-cover {
	display: flex;
	flex-direction: column;
	align-items: center;
}
.album-cover img {
	width: 300px;
	height: auto;
	object-fit: cover;
	border-radius: 6px;
	border: 3px solid;
}
.lyrics {
	color: var(--lyrics-color);
	background: var(--lyrics-background);
	padding: 1rem;
	white-space: pre-wrap;
	border-left: 3px solid;
}

/* page heros */
#home-hero {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/images/hero.jpg') center/cover no-repeat;
}
#about-hero {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/images/hero.jpg') center/cover no-repeat;
}
#books-hero {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/images/hero.jpg') center/cover no-repeat;
}
#music-hero {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/images/hero.jpg') center/cover no-repeat;
}
#people-hero {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/images/hero.jpg') center/cover no-repeat;
}

/* book heros */
#cursors-hero {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/books/cursors/hero.jpg') center/cover no-repeat;
}
#deadlines-hero {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/books/deadlines/hero.jpg') center/cover no-repeat;
}
#empty-space-hero {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/books/empty-space/hero.jpg') center/cover no-repeat;
}
#triskelion-hero {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/books/triskelion/hero.jpg') center/cover no-repeat;
}
#presents-from-the-past-hero {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/books/presents-from-the-past/hero.jpg') center/cover no-repeat;
}
#the-blue-wyvern-hero {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/books/the-blue-wyvern/hero.jpg') center/cover no-repeat;
}

/* album heros */
#veil-and-flame-hero {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/music/veil-and-flame/hero.jpg') center/cover no-repeat;
}

/* person heros */
#caelion-thorne-hero {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/books/cursors/hero.jpg') center/cover no-repeat;
}
#symphony-elyra-hero {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/books/cursors/hero.jpg') center/cover no-repeat;
}
#adrian-graye-hero {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/books/deadlines/hero.jpg') center/cover no-repeat;
}
#elena-langford-hero {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/books/deadlines/hero.jpg') center/cover no-repeat;
}
#elliot-blaine-hero {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/books/deadlines/hero.jpg') center/cover no-repeat;
}
#martha-ellis-hero {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/books/deadlines/hero.jpg') center/cover no-repeat;
}
#mason-duncan-hero {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/books/deadlines/hero.jpg') center/cover no-repeat;
}
#sabrina-thorne-hero {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/books/deadlines/hero.jpg') center/cover no-repeat;
}
#trista-rhodes-hero {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/books/deadlines/hero.jpg') center/cover no-repeat;
}
#vivian-drake-hero {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/books/deadlines/hero.jpg') center/cover no-repeat;
}
#william-everett-hero {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/books/deadlines/hero.jpg') center/cover no-repeat;
}

/* book cards */
#cursors-card {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/books/cursors/hero.jpg') center/cover no-repeat;
}
#deadlines-card {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/books/deadlines/hero.jpg') center/cover no-repeat;
}
#empty-space-card {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/books/empty-space/hero.jpg') center/cover no-repeat;
}
#triskelion-card {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/books/triskelion/hero.jpg') center/cover no-repeat;
}
#presents-from-the-past-card {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/books/presents-from-the-past/hero.jpg') center/cover no-repeat;
}
#the-blue-wyvern-card {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/books/the-blue-wyvern/hero.jpg') center/cover no-repeat;
}
#the-cursor-theory-card {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/images/hero.jpg') center/cover no-repeat;
}
#the-quoted-path-card {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/images/hero.jpg') center/cover no-repeat;
}
#systematic-management-card {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/images/hero.jpg') center/cover no-repeat;
}
#the-boss-card {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/images/hero.jpg') center/cover no-repeat;
}
#philosophical-christianity-card {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/images/hero.jpg') center/cover no-repeat;
}
#kens-life-card {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/images/hero.jpg') center/cover no-repeat;
}

/* album cards */
#veil-and-flame-card {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/music/veil-and-flame/hero.jpg') center/cover no-repeat;
}

/* person cards */
.card#caelion-thorne {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/people/caelion-thorne/profile.jpg') center/cover no-repeat;
}
.card#symphony-elyra {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/people/symphony-elyra/profile.jpg') center/cover no-repeat;
}
.card#adrian-graye {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/people/adrian-graye/profile.jpg') center/cover no-repeat;
}
.card#elena-langford {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/people/elena-langford/profile.jpg') center/cover no-repeat;
}
.card#elliot-blaine {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/people/elliot-blaine/profile.jpg') center/cover no-repeat;
}
.card#martha-ellis {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/people/martha-ellis/profile.jpg') center/cover no-repeat;
}
.card#mason-duncan {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/people/mason-duncan/profile.jpg') center/cover no-repeat;
}
.card#sabrina-thorne {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/people/sabrina-thorne/profile.jpg') center/cover no-repeat;
}
.card#trista-rhodes {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/people/trista-rhodes/profile.jpg') center/cover no-repeat;
}
.card#vivian-drake {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/people/vivian-drake/profile.jpg') center/cover no-repeat;
}
.card#william-everett {
	background: linear-gradient(to bottom, rgba(0,0,0,0.4), rgba(0,0,0,0.8)), url('/people/william-everett/profile.jpg') center/cover no-repeat;
}