* {
	padding: 0;
	margin: 0;
	list-style: none;
	box-sizing: border-box;
}

body {
	background: #1d2724;
	scroll-behavior: smooth;
	font-size: calc(13px + 0.390625vw);
}

header img {
	border-radius: 250px;
  	box-shadow: 3px 3px 10px #000000;
  	max-width: 100%;
	padding: 30px 30px 30px 30px;
}

header {
	margin: 50px 50px 50px 50px;
	text-align: center;
}

a, a:link, a:visited, a:hover, a:active {
	text-decoration: none;
	color: #FFFFFF;
	letter-spacing: 2px;
	font-weight: 600;
	font-size: calc(13px + 0.390625vw);
	text-shadow: 3px 3px 5px #3b3b3b;
}

@font-face {
	font-family: 'Somebody Else';
	src: url('fonts/Somebody_Else.otf');
	font-style: normal;
}

.textblock {
	font-family: Arial, fantasy;
	margin: 180px auto;
	color: #ffffff;
	padding: 5%;
	border-radius: 50px;
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
	width: 70%;
	overflow: hidden;
	background: rgb(101,135,125);
	background: -moz-radial-gradient(circle, rgba(101,135,125,1) 0%, rgba(70,95,87,1) 40%, rgba(29,39,36,1) 75%);
	background: -webkit-radial-gradient(circle, rgba(101,135,125,1) 0%, rgba(70,95,87,1) 40%, rgba(29,39,36,1) 75%);
	background: radial-gradient(circle, rgba(101,135,125,1) 0%, rgba(70,95,87,1) 40%, rgba(29,39,36,1) 75%);
}

.grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	grid-gap: 10px;
	grid-template-rows: 1fr 1fr;
	justify-content: center;
	align-content: center;
	padding-bottom: 80px;
}

.textblock img {
	margin: 50px 0px 50px 0px;
	aspect-ratio: 16/9;
}

footer {
	font-family: 'Somebody Else', fantasy;
	letter-spacing: 5px;
	font-weight: 900;
	font-size: calc(20px + 0.390625vw);
	text-align: center;
	bottom: 0%;
	color: #0a7e8c;
	width: 75%;
	margin: 30px auto auto auto;
	padding: 30px 30px 30px 30px;
}

h1 {
	font-family: 'Somebody Else', Arial, fantasy;
	color: #FFFFFF;
	text-align: center;
	font-weight: bold;
	font-size: calc(45px + 0.390625vw);
	margin: 130px 50px 50px 50px;
}

h2 {
	font-family: 'Somebody Else', Arial, fantasy;
	color: #FFFFFF;
	text-align: center;
	font-weight: bold;
	font-size: calc(45px + 0.390625vw);
}

h3 {
	text-align: center;
	font-weight: bold;
	padding: 50px 0px 50px 0px;
	font-size: calc(13px + 0.390625vw);
}

h5 {
	margin: 5px;
}

.italic {
	font-style: italic;
	text-align: center;
	padding: 0px 0px 50px 0px;
	font-size: calc(13px + 0.390625vw);
}

main {
	text-align: center; /*align images*/
}

.hidden {
	margin: 80px 0px 80px 0px;
}

p {
	text-align: left;
	margin: 0px 0px 40px 0px;
}

a, a:link, a:visited, a:hover, a:active {
	text-decoration: none;
	color: #FFFFFF;
	letter-spacing: 2px;
	font-weight: 600;
	font-size: calc(13px + 0.390625vw);
	text-shadow: 3px 3px 5px #3b3b3b;
}

.top {
	position: fixed;
	bottom: 20px;
	padding: 10px 10px 10px 10px;
	background: #65877d;
	border-radius: 100px;
	font-size: calc(13px + 0.390625vw);
	box-shadow: 3px 3px 10px #000000;
	right: 20px;
	bottom: 25px;
}

iframe {
	width: 55%;
	aspect-ratio: 16/9;
	padding-top: 30px;
}

hr {
	border: 1px solid linear-gradient(135deg, rgba(3, 40, 45, 1)0%, rgba(10, 126, 140, 1)100%);
	margin-top: 50px;
	margin-bottom: 50px;
}

.aspect {
	width: 500px;
	margin: 60px auto;
	color: #ffffff;
	padding: 20px;
	padding-bottom: 50px;
	border-radius: 50px;
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
	font-size: calc(13px + 0.390625vw);
}

.aspect li {
	margin: 20px 0;
	padding: 10px;
}

.bar1, .bar2 {
	background: #353b48;
	display: block;
	height: 20px;
	border: 1px solid rgba(0, 0, 0, 0.3);
	border-radius: 10px;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12), 0 1px 2px rgba(0, 0, 0, 0.24);
	transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
}

.bar1:hover, .bar2:hover {
	box-shadow: 0 14px 28px rgba(0, 0, 0, 0.25), 0 10px 10px rgba(0, 0, 0, 0.22);
}

.bar1 span {
	height: 20px;
	float: left;
	background: linear-gradient(135deg, rgba(3, 40, 45, 1)0%, rgba(10, 126, 140, 1)100%);
}

.bar2 span {
	height: 20px;
	float: left;
	background: linear-gradient(135deg, rgba(40, 45, 3, 1)0%, rgba(126, 140, 10, 1)100%);
}

.conscientiousness {
	width: 63%;
	animation: conscientiousness 3s;
}

@keyframes conscientiousness {
	0% {
		width: 0%;
	}
	100% {
		width: 63%;
	}
}

.industriousness {
	width: 88%;
	animation: industriousness 3s;
}

@keyframes industriousness {
	0% {
		width: 0%;
	}
	100% {
		width: 88%;
	}
}

.orderliness {
	width: 25%;
	animation: orderliness 3s;
}

@keyframes orderliness {
	0% {
		width: 0%;
	}
	100% {
		width: 25%;
	}
}

.openness {
	width: 94%;
	animation: openness 3s;
}

@keyframes openness {
	0% {
		width: 0%;
	}
	100% {
		width: 94%;
	}
}

.intellect {
	width: 94%;
	animation: intellect 3s;
}

@keyframes intellect {
	0% {
		width: 0%;
	}
	100% {
		width: 94%;
	}
}

.aesthetics {
	width: 84%;
	animation: aesthetics 3s;
}

@keyframes aesthetics {
	0% {
		width: 0%;
	}
	100% {
		width: 84%;
	}
}

.extraversion {
	width: 89%;
	animation: extraversion 3s;
}

@keyframes extraversion {
	0% {
		width: 0%;
	}
	100% {
		width: 89%;
	}
}

.assertiveness {
	width: 99%;
	animation: assertiveness 3s;
}

@keyframes assertiveness {
	0% {
		width: 0%;
	}
	100% {
		width: 99%;
	}
}

.enthusiasm {
	width: 36%;
	animation: enthusiasm 3s;
}

@keyframes enthusiasm {
	0% {
		width: 0%;
	}
	100% {
		width: 36%;
	}
}

.agreeableness {
	width: 20%;
	animation: agreeableness 3s;
}

@keyframes agreeableness {
	0% {
		width: 0%;
	}
	100% {
		width: 20%;
	}
}

.compassion {
	width: 48%;
	animation: compassion 3s;
}

@keyframes compassion {
	0% {
		width: 0%;
	}
	100% {
		width: 48%;
	}
}

.politeness {
	width: 7%;
	animation: politeness 3s;
}

@keyframes politeness {
	0% {
		width: 0%;
	}
	100% {
		width: 7%;
	}
}

.neuroticism {
	width: 64%;
	animation: neuroticism 3s;
}

@keyframes neuroticism {
	0% {
		width: 0%;
	}
	100% {
		width: 64%;
	}
}

.volatility {
	width: 86%;
	animation: volatility 3s;
}

@keyframes volatility {
	0% {
		width: 0%;
	}
	100% {
		width: 86%;
	}
}

.withdrawal {
	width: 31%;
	animation: withdrawal 3s;
}

@keyframes withdrawal {
	0% {
		width: 0%;
	}
	100% {
		width: 31%;
	}
}

@media (max-width: 1440px) {
	.grid {
    		grid-template-columns: 1fr;
  	}
	.bar1, .bar2 {
		width: 80vw;
	}
	.aspect {
		display: grid;
		justify-content: center;
		align-content: center;
	}
	.textblock {
		width: 90%;
		margin: 0 auto;
		margin: 180px auto;
	}
	.textblock img {
		width: 90%;
		aspect-ratio: 16/9;
	}
	.h2 {
		font-size: 150px;
	}
}

@media (max-width: 768px) {
	.hidden {
		display: none;
	}
	iframe {
		width: 80%;
		aspect-ratio: 16/9;
	}	
}

@page {
	size: A4;
	margin: 0;
}

@media print {
  html, body {
	width: 210mm;
	height: 297mm;
}}