:root {
	--white: #ddd;
	--gray: #282828;
	--light-gray: #383838;
	--lighter-grey: #484848;
	--lime: #affd33;
	--green: #5e924f;
	--header-color: var(--white);
	--header-background: linear-gradient(#123456, #2468ac);
	--body-color: var(--white);
	--cutin-color: var(--lighter-grey);
	--body-background: var(--gray);
	--button-border: var(--white);
}

body {
	position: relative;
	color: var(--body-color);
	background-color: var(--body-background);
	font-family: "Helvetica Neue", "Helvetica";
	margin: 0;
}
@keyframes aesthetic {
	0% {letter-spacing: 0.1em;}
	50% {letter-spacing: 0.6em;}
	100% {letter-spacing: 0.1em;}
}
a{color: var(--green); text-decoration: inherit;}
a:hover{color: var(--lime); text-decoration: inherit;}
a:active{color: var(--lime); text-decoration: inherit;}
header {
	margin: 0 0 4em 0;
	position: relative;
	left: 0;
	height: 14em;
	width: 100%;
	background: var(--header-background);
	/*border-bottom: 1.5em solid var(--header-color);*/

}
header h1 {
	margin: 0;
	padding-bottom: 0;
	position: absolute;
	bottom: 0;
	height: 0.8em;
	width: 100%;
	-webkit-transform: translateY(-0.15em);

	color: var(--header-color);
	text-transform: uppercase;
	font-size: 10em;
	font-weight: bold;
	text-align: center;
}
header h2 {
	margin: 0;
	padding: 0;
	position: absolute;
	bottom: -1.2em;
	width: 100%;

	color: var(--gray);
	background-color: var(--header-color);
	font-size: 1.2em;
	font-weight: 400;
	letter-spacing: 0.2em;
	text-transform: lowercase;
	text-align: center;
	animation: aesthetic 10s ease infinite;
}
nav {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	margin-bottom: 3em;
}
nav div {
	margin: 0.8em 0.8em;
	height: 12em;
	width: 14em;
	display: flex;
	flex-direction: column;
	align-items: stretch;
	align-content: stretch;
}
nav .button {
	margin: 0;
	position: relative;
	text-align: center;
	border: 0.15em solid var(--button-border);
	border-radius: 16px;
	background-color: var(--light-gray);
	box-shadow: 0px 0px 15px 5px rgba(44,44,44,0.70) inset;
	transition: box-shadow 0.3s;
}
nav .big {
	margin: inherit 3em;
	height: 20em;
	width: 25em;
}
nav .small {
	width: 3em;
	margin-bottom: 0.6em;
	flex-direction: column;
	justify-content: center;	
}
nav p {
	margin: auto;
	height: 80%;
}
nav .small .last{
	margin-bottom: 0;
}
nav img {
	position: absolute;
	max-height: 95%;
	max-width: 75%;
	margin: auto;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}
nav figcaption {
	position: relative;
	text-align: center;
	margin-top: 0.5em;
}
main {
	margin: 0 2em;
}
/* h1, h2, h3, h4, h5, h6 {
	margin-top: 0;
	margin-bottom: 0.8em;
} */
article {
	margin: 2em 8em;
	padding: 0.2em 2em 0.2em 2em;
	border-radius: 0.5em;
	background-color: var(--light-gray);
}
aside {
	position: fixed;
	left: 75%;
	bottom: 5em;
	border-radius: 0.5em;
	padding: 0.8em 2em;
	max-width: 15em;
	background-color: var(--cutin-color);
}
aside p {
	margin: 0.5em 0 0 0;
}
.tooltip {
	position: relative;
}
/* Tooltip text */
.tooltip .tooltiptext {
	visibility: hidden;
	width: 120px;
	background-color: var(--cutin-color);
	color: var(--body-color);
	text-align: center;
	padding: 5px 0;
	border-radius: 6px;
	border: 0.15em solid var(--body-color);

	position: absolute;
	z-index: 1;
	bottom: 103%;
	left: 50%;
	margin-left: -60px;
	
	opacity: 0;
	transition: opacity 0.3s;
}
.tooltip .tooltiptext::after { /* arrow */
	content: "";
	position: absolute;
	top: 100%;
	left: 50%;
	margin-left: -5px;
	border-width: 5px;
	border-style: solid;
	border-color: var(--white) transparent transparent transparent;
}
.tooltip:hover .tooltiptext {
	visibility: visible;
	opacity: 1;
}
.dropdown-content {
	display: none;
}
.dropdown-content a {
	border-top: 0.1em solid var(--button-border);
	border-bottom: 0.1em solid var(--button-border);
	border-radius: 0;
	background-color: var(--cutin-color);
	height: 1.5em;
	justify-content: center;
	transition: height 0.3s;
}
.dropdown:hover .dropdown-content {
	display: flex;
	flex-direction: column;
	justify-content: space-evenly;
}
.dropdown:hover #hide {
	display: none;
}

nav .button:hover {
	box-shadow: 0px 0px 20px 10px rgba(170, 170, 170, 0.50) inset;
	transition: box-shadow 0.6s;
}
nav .button:active {
	box-shadow: 0px 0px 20px 10px rgba(170, 170, 170, 0.90) inset;
	transition: box-shadow 0.3s;
}