/*
Importing Fonts
*/

:root {
	--dark: #121122;
	--light: #eeddff;
	--secondary-light: #e6d4f7;
	--final-title-width: 40vw;
	--final-title-size: 5vw;
}

@font-face {
	font-family: "Generica";
	src: url("/fonts/generica.woff2");
	font-weight: normal;
	font-style: normal;
}

@font-face {
	font-family: "Generica";
	src: url("/fonts/generica-bold.woff2");
	font-weight: bold;
	font-style: normal;
}

body {
	background-color: var(--dark);
	color: var(--light);
	display: flex;
	font-family: "Gill Sans", "Gill Sans MT", Calibri, "Trebuchet MS", sans-serif;
	margin: 0;
	flex-direction: column;
	overflow: unset;
}

#title-animation-container {
	position: absolute;
	z-index: 50;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	background-color: var(--dark);
	animation: title-container-bg-opacity 0.5s linear 6s 1 both;
	pointer-events: none;
}

#noscript-banner {
	display: none;
}

#title {
	display: flex;
	flex-direction: row;
	margin: auto;
	font-family: "Generica", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
	font-weight: normal;
	font-style: normal;
	font-size: 10vw;
	/*Animation timing functions in order: Ease-out circular, Ease-in-out quartic, Ease-in-out cubic*/
	animation:
		title-primary-width 3s cubic-bezier(0.075, 0.82, 0.165, 1) 1s 1 both,
		title-movement 2s cubic-bezier(0.77, 0, 0.175, 1) 3.2s 1 both,
		title-font-shrinkage 3s cubic-bezier(0.645, 0.045, 0.355, 1) 4s 1 forwards;
	overflow-x: hidden;
}

body.skipTitleAnimation #title {
	width: var(--final-title-width);
	font-size: var(--final-title-size);
	animation: unset;
}

body:not(.skipTitleAnimation) {
	overflow: hidden;
	animation: body-overflow 0.1s linear 6s 1 both;
}

.title-char {
	margin: auto;
	display: flex;
}

.secondary-title-char {
	opacity: 1;
	margin: auto;
	animation-name: title-secondary-char;
	animation-delay: 1s;
	animation-timing-function: ease-out;
	animation-iteration-count: 1;
	animation-fill-mode: both;
}

body:not(.skipTitleAnimation) .secondary-title-char#char4 {
	animation-duration: 1s;
}
body:not(.skipTitleAnimation) .secondary-title-char#char5 {
	animation-duration: 1.25s;
}
body:not(.skipTitleAnimation) .secondary-title-char#char6 {
	animation-duration: 1.5s;
}
body:not(.skipTitleAnimation) .secondary-title-char#char7 {
	animation-duration: 1.75s;
}
body:not(.skipTitleAnimation) .secondary-title-char#char8 {
	animation-duration: 2s;
}
body:not(.skipTitleAnimation) .secondary-title-char#char9 {
	animation-duration: 2.25s;
}
body:not(.skipTitleAnimation) .secondary-title-char#char11 {
	animation-duration: 2.5s;
}
body:not(.skipTitleAnimation) .secondary-title-char#char12 {
	animation-duration: 2.75s;
}
body:not(.skipTitleAnimation) .secondary-title-char#char13 {
	animation-duration: 3s;
}
body:not(.skipTitleAnimation) .secondary-title-char#char14 {
	animation-duration: 3.25s;
}
body:not(.skipTitleAnimation) .secondary-title-char#char15 {
	animation-duration: 3.5s;
}
body:not(.skipTitleAnimation) .secondary-title-char#char16 {
	animation-duration: 3.75s;
}

@keyframes title-primary-width {
	0% {
		width: 40vw;
	}
	100% {
		width: 95vw;
	}
}

@keyframes title-movement {
	0% {
		transform: translateY(40vh);
	}
	100% {
		transform: translateY(0vh);
	}
}

@keyframes title-secondary-char {
	0% {
		max-width: 0;
		opacity: 0;
		margin: 0;
		transform: translateX(100vw);
	}
	15% {
		visibility: hidden;
		max-width: 0;
		opacity: 0;
		margin: 0;
	}
	74% {
		margin: 0;
	}
	75% {
		margin: auto;
	}
	100% {
		max-width: 10vw;
		opacity: 1;
		margin: auto;
		transform: translateX(0vw);
	}
}

@keyframes title-font-shrinkage {
	0% {
		font-size: 10vw;
		width: 95vw;
	}
	100% {
		font-size: var(--final-title-size);
		width: var(--final-title-width);
	}
}

@keyframes title-container-bg-opacity {
	0% {
		background-color: color-mix(in srgb, var(--dark), transparent 0%);
	}
	100% {
		background-color: color-mix(in srgb, var(--dark), transparent 100%);
	}
}

@keyframes body-overflow {
	0% {
		overflow: hidden;
	}
	100% {
		overflow: unset;
	}
}

body.skipTitleAnimation #title-animation-container,
body.skipTitleAnimation #title,
body.skipTitleAnimation .secondary-title-char {
	animation-duration: 0s;
	animation-delay: 0s;
}

#header-buffer {
	width: 100%;
	border-bottom: 2px solid var(--light);
	height: var(--final-title-size);
}

#content {
	max-width: 800px;
	display: flex;
	flex-direction: column;
	margin: auto;
}

.section {
	color: var(--light);
	padding: 20px;
}

.section.top {
	margin-top: 50px;
	border-top-left-radius: 30px;
	border-top-right-radius: 30px;
}

.section.bottom {
	padding-bottom: 20px;
	border-bottom-left-radius: 30px;
	border-bottom-right-radius: 30px;
}

.section h1 {
	margin: 0;
	text-align: center;
	color: #ffffff;
}

.section h3 {
	margin: 0;
	text-align: center;
}

.section .subtitle {
	font-style: italic;
	text-align: center;
	margin: 0;
}

.icon-gallery {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: row;
	/*justify-content: space-between;*/
	justify-content: space-evenly;
}

.icon-gallery li {
	width: 40px;
	height: 40px;
	display: flex;
	position: relative;
}

.icon-gallery a {
	display: inline-block;
	margin: auto;
}

.icon-gallery path,
.project-outlink path {
	fill: #ffffff;
}
.icon-gallery svg {
	height: 30px;
	transition: height 0.1s linear;
}

.icon-gallery a:hover svg {
	height: 33px;
}

.icon-gallery a ~ span {
	opacity: 0%;
	color: var(--light);
	background-color: var(--dark);
	text-align: center;
	border-radius: 5px;
	padding: 2px 7px;
	position: absolute;
	top: 4px;
	left: 110%;
	transition: opacity 0.1s linear;
	pointer-events: none;
	z-index: 1;
	box-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.icon-gallery a:hover ~ span {
	opacity: 100%;
}

.section.color1.top {
	background-color: #8866ee;
}
.section.color1.bottom {
	background-color: #6644cc;
}

.section.color2.top {
	background-color: #44aadd;
}
.section.color2.bottom {
	background-color: #2299bb;
}

.section.color3.top {
	background-color: #3eb14a;
}
.section.color3.bottom {
	background-color: #33a03e;
}

.section.color4.top {
	background-color: #ed1221;
}
.section.color4.bottom {
	background-color: #b10011;
}
.section.color4 {
	color: #ffebeb;
}

.section.color-footer.top {
	background-color: #ff66aa;
}

.projects-container {
	color: #ffffff;
	display: flex;
	flex-direction: column;
	position: relative;
}

.project-container {
	display: flex;
	flex-direction: row;
	padding: 20px;
	justify-content: space-between;
}

.project-left {
	display: flex;
	flex-direction: column;
}

.project-title {
	display: flex;
	flex-direction: row;
}

.project-title h2 {
	margin-right: 10px;
	margin-top: auto;
	margin-bottom: auto;
}

.project-outlink-container {
	margin-top: auto;
	margin-bottom: auto;
	width: 50px;
	height: 50px;
	display: flex;
}

.project-outlink {
	margin: auto;
}

.project-outlink svg {
	width: 40px;
	transition: width 0.1s linear;
}

.project-outlink:hover svg {
	width: 45px;
}

@media only screen and (max-width: 1000px) {
	:root {
		--final-title-width: 80vw;
		--final-title-size: 8vw;
	}
}

@media only screen and (max-width: 825px) {
	.icon-gallery a ~ span {
		display: none;
	}
}

@media only screen and (max-width: 500px) {
	.project-container .icon-gallery {
		display: none;
	}

	.project-title h2 {
		margin-right: 0;
	}
}

@media only screen and (max-width: 400px) {
	:root {
		--final-title-width: 80vw;
		--final-title-size: 7vw;
	}

	.icon-gallery li {
		width: unset;
	}
}