@charset "UTF-8";
/* Styling for Philip Heppeler Portfolio */

/* Colors:
	#595959 = rgba(89, 89, 89)
	#00C4CA = rgba(0, 196, 202)
	#373737 = rgba(55, 55, 55)

	NEW
	RED - #FF6258 - rgba(255, 98, 88, 1)
	DARK RED - #BF4B43 - rgba(191, 75, 67, 1)
	GRAY - #DEDDD9 - rgba(222, 221, 217, 1)
*/

/* Body styling */
body {margin: 0;}

h1 {
	font-family: ff-enzo-web, sans-serif;
	font-size: 4em;
	font-weight: 700;
	margin: 10px 5px 10px 5px;
	padding: 0;
	color: #333;
}
	
h2 {
	font-family: ff-enzo-web, sans-serif;
	font-size: 2.5em;
	font-weight: 700;
	margin: 10px 5px 25px 5px;
	padding: 0;
	color: #333;
}
	
h3 {
	font-family: ff-enzo-web, sans-serif;
	font-size: 2em;
	font-weight: 700;
	margin: 5px 5px 15px 5px;
	padding: 0;
	color: #333;
}

h4 {
	font-family: ff-enzo-web, sans-serif;
	font-size: 1.5em;
	font-weight: 700;
	margin: 10px 5px 15px 5px;
	padding: 0;
	color: #333;
}

h5 {
	font-family: ff-enzo-web, sans-serif;
	font-size: 1.5em;
	font-weight: 400;
	margin: 10px 5px 10px 5px;
	padding: 0;
	color: #333;
}

h6 {
	font-family: ff-enzo-web, sans-serif;
	font-size: 1.25em;
	font-weight: 400;
	margin: 10px 5px 10px 5px;
	padding: 0;
	color: #333;
}
	
p {
	font-family: dejarip, sans-serif;
	font-size: 1.2em;
	font-weight: 400;
	line-height: 1.6em;
	margin: 10px 5px 35px 5px;
	padding: 0;
	color: #333;
}

						   
/* Content styling */
.content {
	max-width: 1920px;
	margin: 0 auto;
	padding: 0;
	box-sizing: border-box;
}

.white {
	color: white;
}

.center {
	text-align: center;
}

.row {
	margin: 0 auto;
	padding: 50px;
	box-sizing: border-box;
}

.row-width {
	max-width: 1024px;
}

.code-header {
	background: linear-gradient(165deg, #FF6258, #BF4B43);
	box-sizing: border-box;
}

.row-red {
	background: linear-gradient(165deg, #FF6258, #BF4B43);
	box-sizing: border-box;
}




/*Button Styles */
.primary-button, .secondary-button, .primary-button-light, .secondary-button-light {
	font-family: dejarip, sans-serif;
	font-size: 1.2em;
	font-weight: 400;
	text-align: center;
	margin: 35px 5px 15px 5px;
	padding: 10px 35px;
	border-radius: 25px;
	min-width: 100px;
	display: inline-block;
	box-sizing: border-box;
}

.tertiary-button, .tertiary-button-light {
	font-family: dejarip, sans-serif;
	font-size: 1.2em;
	font-weight: 400;
	text-align: center;
	margin: 10px;
	padding: 0 3px;
	display: inline-block;
	box-sizing: border-box;
}

.primary-button {
	background: linear-gradient(175deg, #FF6258, #BF4B43);
	color: white;
}

.primary-button:hover {
	background: linear-gradient(175deg, #BF4B43, #FF6258);
}

.primary-button:active {
	background: linear-gradient(175deg, #BF4B43, #BF4B43);
	transition-duration: 0;
}

.secondary-button {
	background-color: blue;
	color: white;
}

.secondary-button:hover {
	background-color: green;
}

.secondary-button:active {
	background-color: red;
	transition-duration: 0;
}

.tertiary-button {
	color: #333;
	border-bottom: 2px solid #333;
}

.tertiary-button:hover {
	color: #FF6258;
	border-bottom: 2px solid #BF4B43;
}

.tertiary-button:active {
	color: red;
	border-bottom: 2px solid red;
	transition-duration: 0;
}

.primary-button-light {
	background: linear-gradient(165deg, white, #DEDDD9);
	color: #333;
}

.primary-button-light:hover {
	background: linear-gradient(165deg, #DEDDD9, white);
}

.primary-button-light:active {
	background: linear-gradient(165deg, #DEDDD9, #DEDDD9);
	transition-duration: 0;
}

.secondary-button-light {
	background-color: gray;
	color: white;
}

.secondary-button-light:hover {
	background-color: green;
}

.secondary-button-light:active {
	background-color: red;
	transition-duration: 0;
}

.tertiary-button-light {
	color: white;
	border-bottom: 2px solid white;
}

.tertiary-button-light:hover {
	color: #eee;
	border-bottom: 2px solid #EEE;
}

.tertiary-button-light:active {
	color: red;
	border-bottom: 2px solid red;
	transition-duration: 0;
}



/*Inline Link Styling */
.link {
	text-decoration: none;
	color: #333;
	border-bottom: 2px solid #333;
	transition-duration: 300ms;
}

.link-light {
	text-decoration: none;
	color: white;
	border-bottom: 2px solid white;
	transition-duration: 300ms;
}

.link:hover, .link-light:hover {
	border-bottom: 2px solid rgba(255, 255, 255, 0);
}

.link:active {
	color: red;
	transition-duration: 0;
}



/* Index Syles */
.logo-index {
	height: 40vh;
	padding: 50px;
	background: linear-gradient(165deg, #FF6258, #BF4B43);
	box-sizing: border-box;
}

.logo-index img {
	display: block;
	box-sizing: border-box;
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 50px;
	max-width: 1024px;
}

.nav-index {
	width: 50%;
	height: 60vh;
	box-sizing: border-box;
	text-align: center;
	vertical-align: middle;
	float: left;
	text-decoration: none;
	background: linear-gradient(165deg, white, #DEDDD9);
}

.nav-index:hover {
	background: linear-gradient(165deg, #DEDDD9, white);
}

.nav-index h1 {
	position: relative;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	padding: 50px;
}



/* Portfolio Styles */
.language-label, .language-label-dark {
	font-family: dejarip, sans-serif;
	font-size: 1em;
	font-weight: 700;
	margin: 5px 5px 10px 5px;
	padding: 10px 20px;
	display: inline-block;
	transition-duration: 300ms;
}

.language-label {
	background-color: #DEDDD9;
	color: #333;
}

.language-label-dark {
	background-color: #333;
	color: white;
}

.language-label:hover, .language-label-dark:hover {
	transition-duration: 300ms;
	transform: scale(1.1, 1.1);
}



.project-image, .project-video {
	width: 500px;
	margin: 5px 15px 5px 5px;
	transition-duration: 300ms;
	box-sizing: border-box;
}

.project-video {
	min-height: 275px;
}

.project-sidebar {
	display: inline-block;
	vertical-align: top;
	box-sizing: border-box;
}



.inline-break {
	display: block;
	width: 175px;
	height: 4px;
	background: linear-gradient(165deg, #FF6258, #BF4B43);
	border-radius: 2px;
	margin: 10px 5px 20px 5px;
	padding: 0;
}



/* Contact Styling */
label {
	font-family: dejarip, sans-serif;
	font-size: 1.3em;
	font-weight: 700;
	margin: 5px;
	color: #333;
	display: block;
	box-sizing: border-box;
}

input[type=text], input[type=email], select, textarea {
	font-family: dejarip, sans-serif;
	font-size: 1.3em;
	font-weight: 700;
	margin: 5px 5px 30px 5px;
	padding: 10px 15px;
	width: 100%;
	max-width: 500px;
	-webkit-border-radius: 0;
	border-radius: 0;
	border: none;
	background-color: #333;
	color: white;
	transition-duration: 300ms;
	display: block;
	box-sizing: border-box;
}

select {
	-moz-appearance: none;
	-webkit-appearance: none;
	appearance: none;
	background-image: url('/images/png/dropdown-arrow.png');
	background-position: right;
	background-repeat: no-repeat;
	background-size: contain;
}

textarea {
	height: 8.6em;
	resize: none;
	margin-bottom: 5px;
}

input[type=submit] {
	border: none;
}


input[type=text]:hover, input[type=email]:hover, select:hover, textarea:hover {
	border-right: 20px solid #FF6258;
}

input[type=text]:focus, input[type=email]:focus, select:focus, textarea:focus {
	border-right: 20px solid #FF6258;
}



/* 404 Page Styling */
.image-404 {
	width: 100%;
	max-width: 400px;
	vertical-align: middle;
	margin: 0 25px 15px 0;
}

.sidebar-404 {
	display: inline-block;
	vertical-align: middle;
}



/* 1st Responsize Adjustments */
@media screen and (max-width: 1280px) {
	.project-image, .project-video {
		width: 400px;
	}

	.project-video {
		min-height: 225px;
	}
}



/* 2nd Responsize Adjustments */
@media screen and (max-width: 1024px) {
	h1 {
		font-size: 3em;
	}

	.project-image, .project-video {
		width: 300px;
	}

	.project-video {
		min-height: 175px;
	}

	.image-404 {
		max-width: 275px;
	}
}



/* 3rd Responsive Adjustments */
@media screen and (max-width: 800px) {
	.row {
		padding: 50px 20px;
	}

	.logo-index {
		height: 24vh;
		padding: 25px;
	}

	.nav-index {
		height: 38vh;
		width: 100%;
	}

	.project-image, .project-video {
		width: 100%;
		margin-left: 0;
		margin-right: 0;
		max-width: 500px;
	}

	.project-video {
		min-height: 225px;
	}

	input[type=text], input[type=email], select, textarea {
		margin-left: 0;
		margin-right: 0;
	}
}



/* Dark Mode Settings */
@media (prefers-color-scheme: dark) {
	h1, h2, h3, h4, h5, h6, p {
		color: white;
	}

	.row {
		background-color: #333;
	}

	.tertiary-button, .link {
		color: white;
		border-color: white;
	}

	.nav-index {
		background: linear-gradient(165deg, #404040, #333);
	}

	.nav-index:hover {
		background: linear-gradient(165deg, #333, #404040);
	}

	label {
		color: white;
	}
	
	input[type=text], input[type=email], select, textarea {
		background-color: #DEDDD9;
		color: #333;
	}
}