@font-face {
	font-family: Champagne;
	src: url(resources/cac_champagne.woff) format('woff'),
		url(resources/cac_champagne.ttf) format('truetype');
}

@font-face {
	font-family: SourceSerif4;
	src: url(resources/SourceSerif4-VariableFont_opsz\,wght.ttf) format('truetype');
}

@font-face {
	font-family: RibeyeMarrow;
	src: url(resources/Ribeye_Marrow/RibeyeMarrow-Regular.ttf) format('truetype');
}

/*For the basic layout of the pages*/
html {
	height: 100%
}

body {
	background-color: #ade6e6;
	font-family: Arial, Helvetica, sans-serif;
	margin-left: auto;
	margin-right: auto;
	width: 80%;
}

header,
footer {
	display: block;
	width: 100%;
	clear: both;
}

audio,
video {
	filter: drop-shadow(5px 5px 10px rgb(255, 218, 218));
	display: block;
	margin: 15px auto;
	width: 25%;
}

h2 {
	font-family: SourceSerif4, 'Times New Roman', Times, serif;
}

p {
	margin: 0.8em;
}

/*For the images */
body>header>img {
	max-height: 200px;
	height: 10%;
	object-fit: fill;
	width: 100%;
}

#headshot {

	float: left;
	margin: 26px;
	padding: 2px;
	max-width: 30%;
}


#headshot img {
	border: white 3px ridge;

	max-width: 100%;
	border-radius: 20px;

}

#tree {
	float: left;
	margin: 26px;
	padding: 2px;
	max-width: 30%;
}

#tree img {
	border: white 3px ridge;
	max-width: 100%;
	border-radius: 20px;
}

figure.diagram {
	width: 300px;
	display: inline-block;
}

.diagram img {
	width: 100%;
	padding: 2px;
	margin-left: auto;
	margin-right: auto;
	border: 2px solid black;
	border-radius: 50px;
}

figure.candid {
	width: 20%;
	float: left;
	box-shadow: rgb(101, 101, 101) 10px 10px 25px;

}

figure.candid img {
	width: 100%;
}

#alien {
	filter: brightness(120%);
}

#stell_jussi {
	filter: contrast(130%);
}

#nusska {
	filter: saturate(120%);
}


/*Contact Me table*/
table.availability {
	background: linear-gradient(220deg, #fae7eb, #e0d4e7, #c8ffe1);
	border: 15px ridge #c4b7bb;
	width: 100%;
}

table.availability th,
table.availability td {
	border: 1px solid black;
}

table {
	border-collapse: collapse;
}

table.availability caption {
	caption-side: top;
	text-align: left;
	font-size: 2em;
	font-family: SourceSerif4, Georgia, Times, 'Times New Roman', serif;
}



/*Specific sections, ID, and classes */
#mainTitle {
	font-family: Champagne, cursive;
	font-size: 4.4em;
	color: rgb(45, 114, 84);
	text-shadow: 2px 4px rgb(255, 218, 218);
}

section#favlinks {
	background: linear-gradient(20deg, #fae7eb, #e0d4e7);
	float: right;
	width: 20%;
}

section#intro {

	background: linear-gradient(40deg, #cbf6ff, #e5daff, #c8ffe1);
	object-fit: cover;
	width: 80%;
	float: left;
}

#forFun h1 {
	font-family: RibeyeMarrow;
}

aside video {
	float: left;
}