/* Global stuff */
@font-face {
	font-family: "Perfect DOS VGA 437";
    font-style: normal;
    font-weight: normal;
    src: local("Perfect DOS VGA 437"), url("Perfect DOS VGA 437.woff") format('woff');
}

html {
	font-family: "Perfect DOS VGA 437";
	background-color: #176464;
	overflow-x: hidden;
	
	text-align: center;
}

p {
	font-size: 16px;
}

h1 {
	font-size: 64px;
}

h2 {
	font-size: 40px;
}

h3 {	
	font-size: 28px;
}

/* Header stuff. */
header {
	display: block;
	
	min-width: 640px;
	
	margin-top: -50px;
	
	color: #5C4756;
	background-color: #FF9930;
}

@keyframes Startup {
	0% {
		width: 640px;
		left: 0px;
		
		padding-left: 10px;
		padding-right: 5px;
	}
	
	100% {
		width: 0px;
		left: 320px;
		
		padding-left: 0px;
		padding-right: 0px;
	}
}

.HeaderSolid {
	max-width: 640px;
	width: 640px;
	/* Don't know what, but this solves a funny bug. */
	height: 64px;
	
	padding-left: 10px;
	padding-right: 5px;
	
	margin: auto;
	
	background-color: #FBDB88;
	position: relative;
	top: 30px;
	
	animation-name: Startup;
	animation-play-state: running;
	/* Change the steps for however many characters your text has. */
	animation-timing-function: steps(18, jump-end);
	animation-fill-mode: forwards;
	animation-duration: 2s;
	animation-delay: 1s;
}

/* Header links. */
.HeaderLinkSection {
	padding-bottom: 10px;
	
	margin-top: -40px;
	margin-bottom: 10px;
}

.HeaderLink {
	width: 32px;
	height: 32px;
	
	transition-property: width, height;
	transition-duration: 0.25s;
}

.HeaderLink:hover {
	width: 64px;
	height: 64px;
}

/* Project stuff. */
.ProjectSection {
	align-items: center;
	justify-content: center;
	display: flex;
	flex-flow: wrap;
	
	color: #FF9930;
}

@keyframes FinishStartup {
	0% {
		width: 100%;
		background-color: rgb(0 0 0 / 1);
	}
	
	20% {
		width: 100%;
		background-color: #176464FF;
	}
	
	99.9999% {
		width: 100%;
		background-color: #17646400;
	}
	
	100% {
		width: 0%;
		background-color: #17646400;
	}
}

.SectionSolid {
	width: 100%;
	min-height: 200vh;
	top: 180px;
	
	background-color: black;
	position: absolute;
	
	animation-name: FinishStartup;
	animation-play-state: running;
	animation-fill-mode: forwards;
	animation-duration: 1.5s;
	animation-delay: 3s;
}

.ProjectLink {
	text-decoration: none;
	
	max-width: 620px;
	
	padding-left: 1px;
	padding-right: 1px;
	
	border: 10px;
	border-style: solid;
	border-radius: 30px;
	border-color: blue;
	
	margin: 8px;
	margin-bottom: 10px;
	
	background-color: #5C4756;
	box-shadow: none;
	
	transition: box-shadow, background-color;
	transition-duration: 0.5s;
	
	color: #FF9930;
}

.ProjectLink:link {
	color: #FF9930;
}

.ProjectLink:visited {
	color: #FBDB88;
}

.ProjectLink:hover {
	box-shadow: 0px 5px 5px 10px #FBDB88;
	background-color: #090C08;
}

.ProjectLink:active {
	color: red;
}

/* Work experience stuff. */
table {
	width: 100%;
}

td, th {
	border-style: solid;
	padding: 8px;
	background-color: #5C4756;
}

/* Cat */
.Cat {
	position: fixed;
	top: 80%;
	left: 80%;
	width: 25%;
	height: 25%;
}