:root {
	--primary: #C0E6F1; /* Light Blue */
	--secondary: #58C4DF; /* Bright Blue */
	--accent1: #D7881B; /* Gold */ 
	--accent2: #591943; /* Aubergine */
	--accent3: #2F1736; /* Twilight */
	--accent4: #FFF4FD; /* White */
	--verticalspacing: 1.35em;
} 

html * {  
  box-sizing: border-box;
}

body {
  	font-family: "Georgia", system-ui, sans-serif;
  	font-size: 100%;
  	line-height: var(--verticalspacing);
  	background-color: var(--primary);
  	color: var(--accent3);
  	margin: 1em;
  	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
	grid-template-areas: 
	"hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr hdr"
	"mne mne mne mne mne mne mne mne mne mne mne mne"
	"ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr ftr"	
	;
	gap: 0;
}

header {
	min-height: 30vh;
	width: 100%;
	grid-area: hdr;
	display: grid;
	grid-column: span 12;
	padding: 1em;
	margin: 0;
	border-bottom: 4px solid var(--accent1);
}

header> * {
	grid-column: span 12;
}

h1, h3 {
	line-height: var(--verticalspacing);
	color: var(--accent1);
}

main {
	color: var(--accent2)
}

.index main {
	grid-area: mne;
	display: grid;
	grid: 2 / -1;
	row-gap: 3vw;
	justify-items: left;
}

.card main {
	grid: span 12;
}

.curtain {
	width: 100%;
}

.about main {
	grid-area: mne;
	display: grid;
	row-gap: 3vw;
	justify-items: left;
}

.portfolio main {
	grid-area: mne;
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(360px, 1fr));
	row-gap: 3vw;
	justify-items: left;
}

.bsg {
	grid: span 12;
}

.visualart {
	margin: 0;
	grid: 3 / -1;
	padding: 8px;
	align-items: center;
}

.visualart figure {
	margin: 0;
	text-align: center;
}

.visualart img {
	max-width: 400px;
}

.visualart p {
	min-height: 4em;
}

.comic {
	margin: 0;
	width: 90%;
	padding: 8px;
	align-items: center;
}

.comic figure {
	margin: 0;
	text-align: center;
}

.comic img {
	max-width: 300px;
}

.comic p {
	min-height: 4em;
}

.kintsugi main {
	grid-area: mne;
}

.twilight main {
	grid-area: mne;
}

footer {
	grid-area: ftr;
	border-top: 4px solid var(--accent1);
	color: var(--accent3);
}

ul.top-links {
	list-style: none;
	padding: 0;
	display: flex;
	flex-direction: column;
	justify-content: space-around;
	align-items: center;
}

.top-links li {
	width: 66%;
	margin-top: .5em;
	text-align: center;
}

.top-links a {
	text-decoration: none;
	background-color: var(--accent2);
	color: var(--primary);  
	display: block;
	padding: .5em;
	border-radius: 12px;
}

a {
	text-decoration: none;
	
}

a:link {
	color: var(--accent2);
}

a:visited {
	color: var(--accent1);
}

a:hover {
	color: var(--secondary); 
	text-decoration: underline;
}

a:active {
	font-weight: bold;
}

a.current {
	pointer-events: auto;
	color: var(--accent4);
}

/* ------------------------------- media queries ------------------------------------- */

@media (prefers-color-scheme: dark) {
	body {
		background-color: var(--accent3);
		color: var(--primary);
	}
	
	h3, p, figcaption, li {
		color: var(--primary);
	}
	
	a {
		text-decoration: none;
	}
	
	a:link {
		color: var(--secondary);
	}
	
	a:visited {
		color: var(--accent1);
	}
	
	a:hover {
		color: var(--primary); 
		text-decoration: underline;
	}
	
	a:active {
		font-weight: bold;
	}
	
	a.current {
		pointer-events: auto;
		color: var(--accent4);
}
}

@media (min-width: 664px) {
	.portfolio main {
		grid-column: span 6;
	}
	header> * {
		grid-column: span 6;
	}
}

@media (min-width: 996px) {
	.portfolio main {
		grid-column: span 4;
	}
	header> * {
		grid-column: span 4;
	}
} 

@media (min-width: 1328px) {
	.portfolio main, header> * {
		grid-column: span 3;
	}
}