/* --------------- Kevin McLean - Design Portfolio --------------- */


/* --------------- Import web fonts --------------- */


/* --------------- Set CSS variables --------------- */


:root {

	--base-large: 18px;
	--base-small: 12px;

	--base-body-font: 'Inter', Arial, Helvetica, sans-sefif;
	--base-body-font-weight: 200;

	--base-header-font: 'Inter', Arial, Helvetica, sans-sefif;
	--base-header-font-weight: 200;

	/* set maximum wrapper width */

	--wrapper-max-width:1000px;

	/* default color palette */

	--color-light:#ffffff;  /* white */
	--color-dark:#000000;  /* black */

	--color-light-url:#54BF52;  /* white */
	--color-dark-url:#54BF52;  /* black */

	--bg-color-light:#ffffff;  /* white */
	--bg-color-dark:#000000;  /* black */
}


/* --------------- CSS resets --------------- */


html,body,ul,li,img,article,section,div,nav,h1,h2,h3,h4,h5,p,a {
	margin:0;
	padding:0;
}

img {
	display: block;
}


/* --------------- Set base styles --------------- */


html {
	font-family:var(--base-body-font);
	font-size:var(--base-large);
}

body {
	background-color:var(--bg-color-light);
	color:var(--color-dark);
}

article {
	margin-bottom:1rem;
}

hr {
	border:none;
	background-color:var(--bg-color-dark);
	height:1px;
	margin-top:2rem;
	margin-bottom:2rem;
}

/* --------------- Set utility classes --------------- */


.italics {
	font-style:italic;
}

.bold {
	font-weight:400;
}

.left {
	text-align:left;
}

.right {
	text-align:right;
}

/* --------------- Set class selectors --------------- */


.lightmode {
	display:none;
}

.darkmode {
	display:none;
}

.wrapper {
	max-width:var(--wrapper-max-width);
	margin:auto;
	text-align:center;
}

.logo {
	min-width:150px;
	max-width:4vh;
	width:4vh;
}

#logo {
	display:inline-block;
	padding:1rem;
}

#main {
	padding:2rem;
	text-align:left;
}

h1 {
	font-family: 'Inter', sans-serif;
	font-weight:200;
	font-size:1.8rem;
	line-height:2.4rem;
	margin-bottom:1.2rem;
}

p {
	font-family: var(--base-body-font);
	font-weight:200;
	font-size:1.2rem;
	line-height:1.6rem;
}

p.title {
	font-weight:600;
}

p.date {
	font-size:0.8rem;
	font-weight:200;
}

p.source-url {
	font-weight:200;
	font-size:1rem;
}

p.copyright {
	font-size:0.8rem;
}

a.title:link {
	color:var(--color-dark);
	text-decoration: none;
}

a.title:visited {
	color:var(--color-dark);
}

a.title:hover {
	color:var(--color-dark);
	text-decoration: underline;
}

a.title:active {
	color:var(--color-dark);
}

a.url:link {
	color:var(--color-dark);
	text-decoration: none;
}

a.url:visited {
	color:var(--color-dark);
}

a.url:hover {
	color:var(--color-light);
	background-color:var(--color-dark);
}

a.url:active {
	color:var(--color-light);
}



/* --------------- Media queries --------------- */


@media (prefers-color-scheme: light) {

	.lightmode {
		display:inline-block;
	}

	.darkmode {
		display:none;
	}

}


@media (prefers-color-scheme: dark) {

	.lightmode {
		display:none;
	}

	.darkmode {
		display:inline-block;
	}

	body {
		background-color:var(--bg-color-dark);
		color:var(--color-light);
	}

	hr {
		background-color:var(--bg-color-light);
	}


	a.url:link {
		color:var(--color-dark-url);
		text-decoration: none;
	}

	a.url:visited {
		color:var(--color-dark-url);
	}

	a.url:hover {
		color:var(--color-dark);
		background-color:var(--color-light-url);
		text-decoration: none;
	}

	a.url:active {
		color:var(--color-dark);
		background-color:var(--color-light-url);
	}

	a.title:link {
		color:var(--color-light);
		text-decoration: none;
	}

	a.title:visited {
		color:var(--color-light);
	}

	a.title:hover {
		color:var(--color-light);
		text-decoration: underline;
	}

	a.title:active {
		color:var(--color-light);
	}

}


@media screen and (max-width: 768px) {

	html {
		font-size:var(--base-small);
	}

	h1 {
		font-size:2.4rem;
		line-height:3.2rem;
	}

	p {
		font-size:1.6rem;
		line-height:2rem;
	}

	.logo {
		height:8rem;
	}

	p.date {
		font-size:1.1rem;
	}

	p.source-url {
		font-size:1.4rem;
	}

	p.credits {
		font-size:1rem;
	}

}