@import url("theme.css");

html {
	font-size: 17px;
	scroll-behavior: smooth;
}

body {
	background-color: var(--green-light);
	max-width: 100%;
	overflow-x: hidden;
}

main {
	min-height: calc(100vh - 252px);
	margin-bottom: 100px;
}

figure {
	margin: 0;
}

img {
	display: block;
}


/*----- Header ---------------------------*/
header {
	position: fixed;
	top: 0;
	width: 100%;
	font-size: var(--medium);
	z-index: 1;
}

#headerBack {
	width: 50%;
	height: 150px;
	position: absolute;
	display: block;
	left: 50%;
	opacity: 0.7;
	transition: linear;
	background: linear-gradient(to bottom, rgba(215,225,202,1) 0%,rgba(215,225,202,1) 70%,rgba(0,0,0,0) 100%);
}

#logoIcon, #logoText {
	position: absolute;
	padding-top: 12px;
}

#logoIcon {
	left: calc(50% - 10px);
	transform: translateX(-100%);
	width: 70px;
	color: #000;
}

#logoText {
	left: calc(50% + 10px);
	height: 70px;
	align-content: center;
	font-size: 1.25rem;
	font-weight: normal;
}


/* Navigation - Burger Menu */

#menu-bar{
	z-index: 2;	
	margin: 24px 30px 0 0;
	height: 90px;
}
#menu{
	cursor: pointer;
	float: right;
}
#menu-text {
	margin: 0 1px 3px 1px;
	transition: 0.4s ease-in;
	font-size: inherit;
	font-weight: 320;
}
.bar{
	height: var(--burgerBarWeight);
	width: 100%;
	background-color: var(--brown);
	display: block;
	transition: 0.3s ease-in;
	transform-origin: center;
}
#bar1{
	margin-bottom: var(--burgerBarSpace);
}

.nav{
	padding: 0;
	margin-top: 13px;
	margin-right: min(16vw, 90px);
	transition: 0.3s ease;
    display: none;
}

.nav #nav-title{
	color: white;
	text-align: center;
	padding-bottom: 10px;
	margin-bottom: 30px;
	border-bottom: solid 1.6px #fff;
}

.nav li a::before {
  content: "";
  position: absolute;
  transform: translate(-150%, 60%);
  width: 7.5px;
  height: 10px;
  border-radius: 50%;
  background-color: transparent;
  transition: background-color 0.3s;
}

.nav li a:hover::before {
  /* background-color: rgb(255, 255, 255); Nur der Kreis färbt sich schwarz */
  border: white solid 1.6px;
}

.nav li a:hover{
	font-weight: bolder;
	/* text-decoration: underline; */
	text-decoration-thickness: 2.5px;
	text-underline-offset: 4px;
}
.nav li{
	list-style: none;
	height: 50px;
	width: 270px;
	margin: 0;
	padding: 0;
	background-color: initial;
	text-align: center;
}
.nav li a{
	color: #fff;
	text-decoration: none;
	font-weight: lighter;
}
.menu-bg, #menu-bar{
	top: 0;
	right: 0;
	position: absolute;
}
.menu-bg{
	z-index: 1;
	width: 0;
	height: 0;
	margin: 30px 30px 20px 20px;
	background: radial-gradient(circle, var(--purple) , #b073cc);
	border-radius: 50%;
	transition: 0.3s ease-in;
	opacity: 0;
}
.change-bg{
	width: 800px;
	height: 800px;
	transform: translate(30%,-45%);
	opacity: 1;
}
.change .bar {
	background-color: white;
}
.change #menu-text {
	opacity: 0;
}
.change #bar1{
	transform: translateY(calc((var(--burgerBarSpace) + var(--burgerBarWeight))/2)) rotateZ(-45deg);
}
.change #bar3{
	transform: translateY(calc(-1*(var(--burgerBarSpace) + var(--burgerBarWeight))/2)) rotate(45deg);
}
.change #bar2{
	opacity: 0;
}
.change{
	display: block;
}


/*----- Footer ---------------------------*/

footer {
 padding: 10px;
 border-top: 1.5px solid var(--brown);
 z-index: 1;
 position: relative;
 margin-left: 50%
}

footer ul {
	list-style: none;
	margin: 0;
	display: flex;
	justify-content: right;
	padding-right: 3vw;
}

footer ul li {
	display: inline;
	margin: 0 10px;
	text-transform: uppercase;
	color: var(--brown);
	background-color: initial;
}

footer a {
	text-decoration: none;
	color:var(--brown);
	font-weight: normal;
}



@media only screen and (max-width: 750px) {
	#headerBack {
		width: 100% !important;
		left: 0;
		height: 130px;
	}
	#logoIcon {
		left: 10px;
		transform: initial;
	}
	#logoText {
		left: 90px;
	}
	#titleText {
		min-height: initial;
	}
}


@media only screen and (max-width: 450px) {
	main {
		min-height: calc(100vh - 222px);
	}
	#logoIcon {
		width: 50px;
		left: 8px;
	}
	#logoText {
		left: 65px;
		height: 50px;
		font-size: 1.1rem;
	}
	#menu-bar {
		margin: 14px 20px 0 0;
		height: 50px;
	}
	#menu-text {
		font-size: 1.1rem;
	}
	#headerBack {
		height: 90px !important;
	}
		#menu-bar {
		width: 100%;
	}
	#nav {
		position: absolute;
		left: 10vw;
	}
}