/* General stuff */

:root {
	/* Colors */
	--color-primary:#808080;
	--color-back:   #222323;
	--color-text:   #f0f6f0;
	--color-link:   var(--color-primary);
	--color-link-v: var(--color-primary);
	--color-ttv-on: #9a4f50;
	/* Text sizes */
	--text-def: 1.5em;
	--text-h1:  3em;
	--text-h2:  2.25em;
	/* Responsiveness */
	/** Default **/
	--body-width-d: 75%;
	/** Mobile screens**/
	--body-width-m: 100%;
	/** Large **/
	--body-width-l: 50%;
}

* {
	box-sizing:border-box;
	line-height:1.5em;
	font-family: HelveticaLight Helvetica;
	image-rendering:pixelated;
}

body {
	max-width: var(--body-width-d);
	margin: 0 auto;
	padding: 4rem 2rem;
	font-size: var(--text-def);
	color: var(--color-text);
	background-color: var(--color-back);
}

/* *Responsiveness* */

@media screen and (width <= 1280px) {
	body {
		max-width: var(--body-width-m);
	}
}

@media screen and (width >= 2752px) {
	body {
		max-width: var(--body-width-l);
	}
}

/* Headers */

h1 {
	font-size: var(--text-h1);
	margin-block: 1rem;
}

h2 {
	font-size: var(--text-h2);
	margin-block: 1rem;
}

/* Links */
a {
	color:var(--color-text);
	text-decoration: underline;
	font-weight: bold;
}

a:link {

}

a:visited {
	color:var(--color-text)
}

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

a:active {
	color:var(--color-text)
}

a.active-page {
	text-decoration: none;
}

a.div {
	font-size: var(--text-def)
}

/* Classes */

.directories {
	display: flex;
	justify-content: space-around;
}

.twitch-live {
	background-color: red;
	color: black;
}

.unprofessional-directories {
	display: flex;
	justify-content: space-around;
}

footer {
	margin-top:18px;
	text-align:center
}

img {
	filter:grayscale(100%);
}

img:hover {
	filter:grayscale(0%);
}

button {
	padding:0px;
	background-color: var(--color-back);
	border:none;
	text-align:center;
	color:var(--color-primary);
	text-decoration:underline
}

nav {
	display:inline;
	margin-inline: 10px;
	font-size:18px;
	margin:0 auto;
	text-align:center;
}

ul.projects {
	padding:0px;
	list-style:none
}

.project-card {
	display:flex;
	align-items:center
}

.project-card img.project-image {
	image-rendering:auto;
	display:inline;
	width:150px;
	align-self:center;
	aspect-ratio:1/1 auto;
	float:left
}

.project-text {
	display:inline;
	padding:min(2rem, 5vw) min(2rem, 5vw) min(2.5rem, 5vw);
	flex:1 0 50%
}