/* custom fonts */
@font-face {
	font-family: 'Balloon';
	src: url('../fonts/balloon/balloon.TTF') format('truetype');
}

@font-face {
	font-family: 'BrianneTod';
	src: url('../fonts/briannetod/BrianneTod.ttf') format('truetype');
}

@font-face {
	font-family: 'Daniel';
	src: url('../fonts/daniel/daniel.ttf') format('truetype');
}

@font-face {
	font-family: 'Gunny Rewritten';
	src: url('../fonts/gunny_rewritten/gnyrwn971.ttf') format('truetype');
}

@font-face {
	font-family: 'Whatever It Takes';
	src: url('../fonts/whatever_it_takes/whatever_it_takes.ttf') format('truetype');
}@font-face {
	font-family: 'Whatever It Takes';
	src: url('../fonts/whatever_it_takes/whatever_it_takes_bold.ttf') format('truetype');
	font-weight: bold;
}

@font-face {
	font-family: 'Over the Rainbow';
	src: url('../fonts/Over_the_Rainbow/OvertheRainbow.ttf') format('truetype');
}

@font-face {
	font-family: 'SF Compact Display';
	src: url('../fonts/sf_compact_display/SFCompactDisplay-Regular.otf') format('opentype');
	font-weight: normal;
}

@font-face {
	font-family: 'SF Mono';
	src: url('../fonts/san_fransisco_mono/SFMono-Regular.otf') format('opentype');
	font-weight: normal;
}@font-face {
	font-family: 'SF Mono';
	src: url('../fonts/san_fransisco_mono/SFMono-Light.otf') format('opentype');
	font-weight: 100;
}

/* general overall layout */
html, body {
	margin: 0;
	padding: 0;
	min-width: 100vw;
}

body {
	background: linear-gradient(rgba(0, 0, 0, 0.25), rgba(0, 0, 0, 0.25)), #ffffff url("../images/generic.jpg") top center fixed;
}

#front-title {
	font-family: 'Over the Rainbow', sans-serif;
	font-size: 54px;
	text-align: center;
}

.section-title {
	font-family: "Over the Rainbow", sans-serif;
	font-weight: bold;
	font-size: 36px;
}

p, section#timeline ul.ul-modlist li, ol li, ul li {
	font-family: "SF Compact Display", sans-serif;
	font-size: 18px;
}

h2 {
	font-family: "SF Compact Display", sans-serif;
}

button {
	background-color: white;
	display: inline-block;
	padding: 15px 32px;
	border: none;
	color: black;
	text-align: center;
	font-size: 18px;
	margin: .5em .5em 2em .5em;
	border-radius: 8px;
}

button:hover {
	background-color: rgba(256, 256, 256, 0.1);
	color: white;
	-webkit-transition: all .1s ease;
	-moz-transition: all .1s ease;
	-o-transition: all .1s ease;
	-ms-transition: all .1s ease;
	transition: all .1s ease;
}

/* project container*/

section.project_container {
	background-color: rgba(0, 0, 0, 0.8);
	display: grid;
	grid-template-columns: 1fr 2fr;
	width: 80%;
	margin: 20px auto;
	border-radius: 20px;
}

h2.project_title {
	font-family: "Gunny Rewritten", sans-serif;
	font-size: 36px;
	text-align: center;
}

div.project_img {
	float: left;
	padding: 20px 0 20px 20px;
}

div.project_img > img {
	object-fit: cover;
	width: 100%;
}

div.project_desc {
	color: white;
	padding: 20px 30px;
}

.project_links {
	text-align: right;
	font-size: 36px;
}

.project_links .fa-lg {
	color: white;
	text-decoration: none;
}

.project_links .fa-lg:hover {
	-webkit-filter: brightness(70%);
	-webkit-transition: all .2s ease;
	-moz-transition: all .2s ease;
	-o-transition: all .2s ease;
	-ms-transition: all .2s ease;
	transition: all .2s ease;
}

span.project_used_item {
	border: 2px solid white;
	margin: 3px;
	font-family: "SF Mono", monospace;
	font-weight: 100;
	padding: 2px 7px;
	border-radius: 3px;
	font-size: 14px;
}

/* responsive */

@media only screen and (min-width: 1200px) {
	div.project_img {
		min-width: 600px;
	}

	br.mobile-only {
		display: none;
	}
}
@media only screen and (max-width: 1199px) {
	section.project_container {
		width: 95%;
	}

	div.project_img, div.project_desc {
		width: calc(95vw - 30px);
		padding: 15px;
	}

	div.project_img {
		text-align: center;
	}

	div.project_img > img {
		display: inline-block;
		min-width: 250px;
		width: 95%;
	}
}