@charset "utf-8";

@font-face {
	font-family: "Euclid Circular B Medium";
	src: url('../fonts/EuclidCircularB-Medium-WebS.woff2') format("woff2");
	/* src: url('fonts/fira/eot/FiraSans-Regular.eot') format('embedded-opentype'),
		 url('fonts/fira/woff2/FiraSans-Regular.woff2') format('woff2'),
		 url('fonts/fira/woff/FiraSans-Regular.woff') format('woff'),
		 url('fonts/fira/woff2/FiraSans-Regular.ttf') format('truetype'); */
  }

@keyframes hue_rotate {
	from {
	  filter: hue-rotate(0deg);
	}
	50%{
		filter: hue-rotate(-170deg);
	}
	to {
	  filter: hue-rotate(0deg);
	}
  }

/* Types */
* {
	padding: 0px;
	margin: 0px;
	position: relative;

	font-family: "Euclid Circular B Medium";
	font-size: 30px;
	/* font-weight: 400;
	font-style: normal; */
}

*,
h1,
h2,
h3,
h4,
em,
strong {
	font-weight: 400;
}

html {
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizelegibility;
	scroll-behavior: smooth;
}


body {
	position: absolute;
	left: 0px;
	width: 100vw;
	max-width:100%;  /* added, according to: https://stackoverflow.com/questions/23367345/100vw-causing-horizontal-overflow-but-only-if-more-than-one */
	height: 100vh;
		color:black;

}

h1 {
	font-size: 5em;
	line-height: 1em;
	margin-bottom: 20px;
}

a{
	text-decoration: none;
}

nav {
	z-index: 2;
	top: 50%;
	/* background-color: rgba(210, 210, 210, 0.821); */
	position: fixed;
	width: 50px;
	height: 100px;
	left: 100%;
	transform: translate(-120%, -50%);
	/* border-radius: 50px; */
}

nav div {
	color: grey;
	width: 50px;
	height: 50px;
	text-align: center;
	left: 50%;
	/* top: 50%; */
	transform: translate(-50%);
	/* line-height: 0.1em; */
	border: solid 1px grey;
	margin-bottom: 10px;
	border-radius: 50px;
	cursor: pointer;
}

nav div * {
	top: 50%;
	transform: translateY(-50%);
}

nav a {
	color: black;
	text-decoration: none;
	/* margin: 0 10px; */
}

.hidden{
	visibility: hidden;
}

.fullscreen{
	width: 100%;
	height: 100%;

}

.width_eighty{
	width: 80%;
	left: 10%;
	/* height: 10%; */
	/* background-color: orange; */
}

.work_box{
	width: 48%;
	aspect-ratio: 2/1;
	background-color: green;
	margin: 1%;
	/* margin: 5%; */
	float:left;
}

.work_box *{
	text-align: center;
}
.work_box h2{
	font-size: 2em;
	margin: 6% 0 1%;
	/* transform: translateY(-50%); */
}
.work_box p{
	/* width: 80%; */

}

.eth {
	/* font-family: neue-haas-grotesk-display, sans-serif; */
	/* font-weight: 900; */
	font-style: italic;
}

.zurich {
	/* font-family: neue-haas-grotesk-display, sans-serif; */
	/* font-weight: 400; */
	font-style: italic;
}

.subpage_thumbnail {
	width: 31.3%;
	height: 400px;
	margin: 1%;
	background-color: aquamarine;
}



#hero_content {
	position: absolute;
	text-align: center;
	top: 50%;
	transform: translateY(-50%);
	/* left: 50%; */
	width: 100%;
	z-index: 1;
}
#hero_background{
	width: 100%;
	height: 100%;
	top: 0px;
	left: 0px;
	filter: hue-rotate(10);
	position: absolute;
	background-image: url("../img/homepage/Gradient_4k.jpg");
	background-position: center;
	background-size: 120%;
	background-repeat: no-repeat;
	z-index: 0;
	animation: hue_rotate 10s infinite linear;


}

#hero_me_image {
	width: 7em;
	border-radius: 100px;
	/* box-shadow: rgba(9, 30, 66, 0.25) 2px 2px 8px -2px, rgba(9, 30, 66, 0.08) 0px 0px 0px 1px; */
}

#hero_content p {
	margin-bottom: 10px;
}


#hero_content_buttons {
	width: fit-content;
	left: 50%;
	transform: translateX(-50%);
	display: flex;
}

#hero_content_buttons button {
	margin: 0 10px;
	width: 3em;
	font-size: 1.6em;
	background-color: Transparent;
	background-repeat: no-repeat;
	border: solid 1.5px black;
	border-radius: 100px;
}

#hero_content_buttons button:hover {
	cursor: pointer;
	background-color: #111;
}

/* Subpages */

#topbar_wrapper {
	position: fixed;
	width: 100vw;
	height: 5vh;
	display: flex;
	background-color: rgba(255, 255, 255, 0.821);
	backdrop-filter: blur(10px);
	box-shadow: 0px 1px 4px rgba(51, 51, 51, 0.2);
	z-index: 100;
}

#subpage_topbar_name {
	text-align: center;
	position: absolute;
	/* height: 100%; */
	left: 50%;
	top: 50%;
	transform: translate(-50%, -50%);
	font-size: 1.5em;
}

/* #subpage_topbar_name *{
transform: translateY(-50%);
} */

#subpage_projects_wrapper {
	display: flex;
	flex-wrap: wrap;
	background-color: orange;
	top: 10%;
	width: 70%;
	left: 15%;
	/* height: 150%; */
}