@import "../fonts/sometype-mono-variable.css";
@import "../fonts/bebas-neue.css";
@import "../fonts/syncopate-bold.css";

* { box-sizing: border-box; }

:root { font-size: 19px; }

html {
  /*scrollbar-width: thin;*/
  scrollbar-width: auto !important;
  scrollbar-color: #32495f #070c1d;
  overflow-x: hidden; overflow-y: scroll;
  scroll-behavior: smooth;
}
body {
	margin: 0;
	font-family: "SometypeMono-Variable", sans-serif;
	font-size: 1rem;
	background: #070c1d;
	color: #e3f5f1;
}

/*** LAYOUT ***/
.layout {
	display: flex;
	margin: 0 auto;
	width: 90%;
}
.portfolio {
	width: 72%;
	min-height: 100vh;
	padding: 4rem;
	background: #182e41;
}
.game {
	display: flex;
	gap: 1rem;
	flex-direction: column;
	justify-content: center;
	position: sticky;
	top: 0;
	width: 28%;
	height: 100vh;
	padding: 2rem;
	padding-right: 0;
}

/*** LINKS ***/
a, a:visited { color:#e2b570; }
a:hover, a:active, a:focus { color: #eee98a; }

/*** HEADER ***/
.home {
	display: block; width: fit-content; margin: 0 auto; /* bound tight, center horizontally */
	text-align: center;
	text-decoration: none;
	color: #e3f5f1;
}
.home:hover, .home:active, .home:visited, .home:focus { color: #e3f5f1; }
.header {
	width: fit-content;
	font-family: "BebasNeue", sans-serif;
	font-size: 5rem;
	line-height: 4.5rem;
}
.subheader {
	width: fit-content;
	margin-bottom: 1.5rem;
	font-family: "Syncopate-Bold", sans-serif;
	font-size: 1.48rem;
	color: #e2b570;
}

/*** NAVIGATION ***/
.navigation {
	display: flex;
	gap: 2rem;
	justify-content: center;
	flex-wrap: wrap;
	width: fit-content; margin: 0 auto;
	margin-bottom: 2.5rem;
}
.navigation > a {
	border-bottom: 3px solid transparent;
	padding: 0 0.5rem 0.2rem; /* top | sides | bottom */
	font-size: 1.5rem;
	font-weight: 600;
	text-decoration: none;
	color: #81afb5;
}
.navigation > a:hover { color: #e3f5f1; }
.navigation > a[data-active="true"] {
	border-bottom: 3px solid #e2b570;
	color: #e3f5f1;
}

/*** TITLES ***/
h1, h2 {
	text-align: center;
	font-weight: 600;
}
.project-title {
	font-size: 1.6rem;
	text-align: center;
	font-weight: 600;
	color: #b7d974;
}

/*** QUOTES ***/
blockquote {
	font-size: 1.2rem;
	text-align: center;
}
.attribution {
	color: #81afb5;
	text-align: right;
	font-style: italic;
}

/*** ALIGNMENT ***/
.center { 
	display: block;
	text-align: center;
}
.resume-grid {
	display: grid;
	grid-template-columns: 3fr 2fr;
	gap: 3rem;
	width: 100%;
}

/*** STYLES ***/
.note {
	color: #81afb5;
}
.extra-small { 
	font-size: 0.6rem;
	font-weight: 500;
	color: #446374;
}
.category {
	color: #81afb5;
}
.title-section {
	color: #b7d974;
	margin-bottom: 0.5rem;
}
.title {
	font-size: 1.3rem;
	font-weight: 600;
}
.subtitle { 
	font-weight: 600;
}
.duration { 
	font-style: italic;
}
.points li:not(:last-child) {
	margin-bottom: 0.5rem;
}
.points li i {
	color: #81afb5;
}
.points li::marker {
	content: "▸ ";
	color: #b7d974;
}
.construction {
	color: #e2b570;
}
.stripes {
	display: inline-block;
	width: 8.2rem;
	height: 1rem;
	background-image: repeating-linear-gradient(
		45deg,
		#e2b570 0,
		#e2b570 0.5rem,
		transparent 0.5rem,
		transparent 1rem
	);
}

@media (max-width: 1400px) {
	:root { font-size: 16px; }
}
@media (max-width: 1200px) {
	:root { font-size: 14px; }
}
@media (max-width: 1000px) {
	:root { font-size: 12px; }
}