:root {
	
  /* Color palette */
	
  /* crimson sky */
  --main: #CF6766;  
  --dark_main: #CA6665;
  
  /* indigo */
  --secondary: #30415D;
  
  /* ultramarine */
  --text: #031424;
  
  /* light blue */
  --highlight: #8EAEBD;
  
  /* background gray */
  --background: #E8E8E8;
  
  --header_height: 7vh;
  
  --iconbox_size: 4vh;
  --iconbox_inner_size: 3.05vh;
  
  --border_size: 0.4vh;
  
  --font_size: 3vh;

  --fancy_button_padding: 3vh;
  --fancy_button_expansion: 5.5vh;
  --fancy_button_line_distance: 1vh;
  
}

/* General stuff */
body {
	display: flex;
	font-family: 'Roboto Mono', monospace; 
	font-weight: normal;
	font-size: var(--font_size);
	background-color: var(--background);
}

/* Header Content */
header {
	justify-content: right;
    display: inline;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: var(--header_height);
    line-height: var(--header_height);
	background-color: var(--main);
	z-index: 100;
}

header * {
	
	display: block;
	width: 100vw;
}

#Menus ul {
	
	width: 100vw;
	text-align: center;
	padding-left: 0px;
}

.menu-toggle{

	position:fixed;
	top: 0;
	left: 85vw;
	width: var(--header_height);
	height: var(--header_height);

}

.home-button{

	position: relative;
	top: 0;
	left: calc(25vw + var(--font_size));
	width: auto;
	padding: 0px;
	text-align: center;
	width: var(--header_height);
	height: var(--header_height);
	text-decoration: none;
	color: var(--text);

}

.menu-toggle img{

	width: var(--header_height);
	height: var(--header_height);

}

#MenuItems {

	position: relative;
	display: none;
	text-decoration: none;
	color: var(--text);
	justify-content: left;
	padding-bottom: calc(var(--header_height) * 0.4);

}

nav {
	background-color: var(--main);
}

/* Header menu buttons */
#Menus li a {
	
	text-align: center center;
	text-decoration: none;
	background-color: var(--main);
	border-bottom: var(--border_size) solid var(--main); 
	transition: border-bottom 300ms, background-color 300ms; 
	color: var(--text);

}

#Menus li a:hover {
	background-color: var(--main);
	border-bottom: var(--border_size) solid var(--text);
	transition: border-bottom 300ms, background-color 300ms; 

}

#Menus li a.active {
	background-color: var(--main);
	border-bottom: var(--border_size) solid var(--text);
	transition: border-bottom 300ms, background-color 300ms; 
	
}


/* External icons */
#Contact {
	
	position:relative;
	
	display: flex;
	flex-direction: row;
	justify-content: space-evenly; 
	width: 100vw;
	
	align-items: center; 
	text-align: center;
	background-color: var(--main);
}

.icon-box {
	
	display: flex;
	justify-content: center; 
	align-items: center; 
	text-align: center;
	
	height: var(--iconbox_size);
	width:	var(--iconbox_size);			
	
	background-color:var(--main);
	border: var(--border_size) solid var(--text);
	position: relative;
	
	top: calc(var(--header_height) - (var(--iconbox_size) * 1.4));
	
	transition: border 200ms, background-color 200ms;
	
	overflow:hidden;
}

.icon-box:hover {
		
	background-color:var(--text);
	border: var(--border_size) solid var(--text);
	position: relative;
	
}

.icon-img {
	
	position:absolute;
	
	right: 12%;
	bottom: 12%;
	
	width: var(--iconbox_inner_size);
	height: var(--iconbox_inner_size);
	
	
}

.icon-box:hover .icon-img-hover {
		
	opacity: 0;
}


/* Other Stuff */

/* Fancy Button */
.fancy-button {
	
	position: relative;
	
	background-color: transparent;
	border-radius: 2px;
	border: 3px solid var(--secondary);
	padding: var(--fancy_button_padding);
	
	
	font-size: 22px;
	text-decoration: none;
	color: #30415D;
	z-index: 1;
	
	transition: all 300ms ease-in-out;
}

.fancy-button:hover {
	
	padding: var(--fancy_button_expansion);
	transition: all 300ms ease-in-out;
}


.button-container {
	position: relative;
	
	padding-top: 1vh;
	padding-bottom: 1vh;

	padding-right: var(--fancy_button_line_distance);
	padding-left: var(--fancy_button_line_distance);
	
	overflow:hidden;
	width: auto;
	height: calc(auto + 30%);

	border-left: 3px solid var(--background);
	border-right: 3px solid var(--background);

	transition: all 100ms ease-in-out;

}

.button-container.button-container:hover{
	
	border-color: var(--secondary);
	transition: all 100ms ease-in-out;
	
}


/* Sections */
section {
	
    height: 100vh;
	width: 100vw;
    border-bottom: 4px solid var(--secondary);
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
	
	flex-direction: column;
}


#Intro {

    display: flex;
	
	flex-direction: column;
	justify-content: center;
	align-items: center; 
	text-align: center;
	height: auto;	
	width: 100vw;
	margin-top: calc(var(--header_height) * 1.5);
	padding-bottom: 10vh;
}

h1 {	
	font-size: calc(var(--font_size) * 1.3);
}

* {
	margin: 0px;
}

.intro-video {

	border: solid var(--border_size) var(--secondary);
	height: 30vh; 
	width:	70vw;

}

.intro-image {

	margin-top: auto;
	height: 20vh;
	width: auto;

}

.quick-info {

	display: flex;
	flex-wrap: wrap	;
	flex-direction: row;
	justify-content: space-around;

	width: 100vw;

	padding: 1vw;

	border-top: solid var(--border_size) var(--secondary);
	padding-top: 3vh;

	border-bottom: solid var(--border_size) var(--secondary);
	padding-bottom: 2vh;

	margin: auto;	
	margin-top: 5vh;
	margin-bottom: 2vh;

}

.info-node {

	display: flex;
	flex-direction: column;
	flex-wrap: wrap;

	width:40%;
	justify-content: start;
    align-items: center;
    text-align: center;

	font-size: 2.5vh;
	margin-bottom: 2vh;
}

.info-node p:first-child {

	color: var(--main);
	padding-bottom: 1vh;
	font-size: var(--font_size);
}

.short-description {
	margin: auto;
	width: 90vw;
	font-size: calc(var(--font_size) /1.2);

	padding-top: 6vh;
	padding-bottom: 8vh;
	text-align: left;
}


b {

	color: var(--dark_main);

}

h2 {

	margin-bottom: 5vh;
}

.TLDR-text {

	width: 70vw;
	text-align: left;
	font-size: calc(var(--font_size) * 0.8);

}

#MoreInfo {

	height: auto;

	margin: auto;
	margin-top: 10vh;

	padding-bottom: 10vh;
}

summary {

	height: auto;
	
	display: flex;
	flex-direction: row;
	justify-content: space-between;

	border: solid var(--border_size) var(--secondary);
	background-color: var(--main);

	list-style-type: none;
	text-align: left;
	
	padding: 1vh;
	padding-left: 5vh;
	padding-right: 5vh;
}

details div {

	border: solid var(--border_size) var(--secondary);
	border-top: none;

	text-align: left;

	padding: 3%;
}

summary:hover {
	box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2), 0 6px 20px 0 rgba(0, 0, 0, 0.19);
	filter: contrast(110%);
}


.open-indicator {
	position: relative;
	right: 0;
	text-align: right;
	transition: 0.2s;
	font-size: calc(var(--font_size) * 1.1);
	font-weight: bold;
}
  
details[open] .open-indicator {
	transform: rotate(45deg);
	transition: 0.2s;
}

details {
	margin-bottom: 1vh;
	width: 90vw;
}

details .sides {
	padding: 0px; width: auto;
	height: auto;
}

details .left-side {
	border: none;
	text-align: left;
	height: auto;
	width: 90%;
}

details .right-side {
	justify-content: start;
	align-items: center;
	border: none;
	text-align: center;
	height: auto;
	width: 90%;
}

details h3{
	text-align: left;
	padding: 0px;
	padding-bottom: 1.5vh;
	color: var(--dark_main);
}

.accordion-image {

	max-width: 100%;
	width: auto;
	height: auto;
	object-fit: contain;
	cursor: zoom-in;
	border: solid var(--border_size) var(--secondary);
	margin-bottom: 0.5vh;

}

.blown-up-accordion-image {

	/* position: fixed; */
	transform: scale(1.5);
	/* object-fit: fill; */
	cursor: zoom-out;

}

.small-text {
	font-size: calc(var(--font_size) /2);
	padding: 0.5vh;
}

.inline-credits {
	color: var(--main);
	cursor: pointer;
	text-decoration: none;
	transition: all 0.5s;
}

.inline-credits:hover {
	color: var(--text);
	background-color: var(--main);
	transition: all 0.5s;
}

details .left-side {

	justify-content: start;
}

#TLDR {

	height: auto;

	margin: auto;
	margin-top: 10vh;

	padding-bottom: 10vh;
}