/*

title: main.css;
author: moritz ritter
last updated: ;
description: main style for a website;

*/

body {
  font-size: 16px;
  font-family: liberation-sans, sans-serif;
  color: #333;
  padding: 0 2%;
  background: transparent;
  width: 100%;
  background-size: 200%;
  background-position: center -10rem;
}




body p {
	line-height: 1.45;
	font-size: 1.1rem;
}

@media screen and (max-width: 800px) {
	body {
		padding: 0 1%;
	}
	body p {
		font-size: 1rem;
		line-height: 1.4;
	}
}


body a {
	color: #5AA5AB;
}

body a:hover {
	color: #333;
}


.header {
	border-bottom: 1px solid #999;
	padding: 2rem 0 2rem 0;
	grid-column: span 4;
	display: grid;
  	grid-template-columns: 50% 50%;
  	grid-gap: 0;
  }

 .header .item {
 	align-self: center;
 }

 .header .item p {
	margin: 0 0 0 10%;
	position: relative;
	text-align: left;
}

 .header img {
	max-width: 100%;
}

  @media screen and (max-width: 640px) {
	.header {
		display: block;
	}

	.header .item {
		text-align: center;
	}

	.header img {
		width: 320px;
		margin: -2rem auto 0 auto;
	}

	.header .item p {
		margin-left: 0;
	}

}

.footer {
	grid-column: span 4;
	border-top: 3px solid #999;
	border-style: double;
	text-align: center;
  }

 .footer p {
 	font-family: ibm-plex-mono, monospace;
 	font-style: italic;
 	font-size: .9rem;
 }


.grid {
  display: grid;
  grid-template-columns: 25% 25% 25% 25%;
  grid-gap: 0;
  max-width: 980px;
  margin: 2rem auto;
/*  border: 1px solid #999;
  box-shadow: 18px 18px #CCC;
  background-color: #FFF;*/

}

.grid > div {
	padding: 1.5rem 1rem;
}

.contact {
	grid-column: span 4;
	border-top: 1px solid #999;
	border-bottom: none;
	text-align: center;
}

.contact:nth-child(2) {
	border-bottom: 1px solid #999;
	border-top: none;
}

.section-1 {
	grid-column: span 2;
 }

.section-textpage {
	grid-column: span 4;
 }

 .section-textpage-header {
	grid-column: span 4;
	border-bottom: 1px solid #999;
 }

.cell-1 {
	border-right: 1px solid #999;
}


.grid .section-3 {
	grid-column: span 4;
	border-top: 1px solid #999;
	padding: 1.5rem 1rem 1.5rem 1rem;
}



h1, h2, h3, h4{
	font-family: lora, serif;
	font-weight: medium;
	position: relative;
}

h1 {
	display: block;
	width: 420px;
	font-size: 2.6rem;
	font-weight: normal;
	position: relative;
	margin-left: -15%;
	margin-bottom: 1.45rem;
}

h1.title span.title-strong {
	display: inline-block;
	font-size: 1.5em;
	background: linear-gradient(90deg, rgba(48,35,174,1) 0%, rgba(83,160,253,1) 35%, rgba(180,236,81,1) 100%) no-repeat;
	background-size: 0% 4px;
	background-position: left bottom;
	animation: rainbow 1.8s ease-out forwards;
	-webkit-animation: rainbow 1s ease-out forwards;
	
}

h1.title-textpage {
	margin-left: 0;
	display: block;
	clear: both;
	width: 100%;
}

h2.header-small {
	background: linear-gradient(90deg, rgba(48,35,174,1) 0%, rgba(83,160,253,1) 35%, rgba(180,236,81,1) 100%) no-repeat;
	background-size: 100% 3px;
	background-position: left bottom;
	display: inline-block;
	line-height: 1.5;
	font-size: 1.6rem;
}

h2 a {
	text-decoration: none;
	color: #333;
}


@keyframes rainbow {
		0% {
			background-size: 0% 4px;
			background-position: left bottom;
		}

		100% {
			background-size: 100% 4px;
			background-position: left bottom;
		}

	}

@-webkit-keyframes rainbow {
		0% {
			background-size: 0% 4px;
		}

		100% {
			background-size: 100% 4px;
		}

	}




.h-bac {
	display: inline-block;
	background-color: rgba(250,166,115,0.0);
	padding: .1rem .2rem;
	margin: 0rem 0;
}

.h-bac:nth-child(1) {
	display: inline-block;
	border-bottom: 5px solid rgba(250,166,115,1.0);
	padding: .2rem .2rem;
	margin: 0rem 0;
	line-height: 1;
	font-weight: bold;
}

.h-bac-small {
	background: linear-gradient(90deg, rgba(48,35,174,1) 0%, rgba(83,160,253,1) 35%, rgba(180,236,81,1) 100%) no-repeat;
	background-size: 100% 3px;
	background-position: center bottom;
}

h2 {
	font-size: 2rem;
}

h3 {
	font-size: 1.5rem;
	line-height: 1.4;
	margin-bottom: 0.5rem;
}

h4 {
	font-size: 1.2rem;
	line-height: 1.2;
	margin-bottom: 0.5rem;
}

span.intro {
	display: block;
	color: #3CA2AA;
}

span.header-aside {
	display: block;
	position: absolute;
	font-family: ibm-plex-mono, monospace;
	font-size: .95rem;
	text-transform: uppercase;
	font-weight: normal;
	color: #777;
	width: 260px;
	rotate: -90deg;
	left: -155px;
	text-align: right;
	top: 125px;

}

span.aside {
	display: block;
	font-family: ibm-plex-mono, monospace;
	font-style: italic;
	font-size: .95rem;
	font-weight: normal;
	text-align: left;
	color: #777;
	margin: .3rem 0;
}

@media screen and (max-width: 800px) {

	h1 {
		font-size: 2.4rem;
		width: 320px;
		margin-bottom: .5rem;
		text-align: left;
		line-height: 1;

	}

	.title_hello {
		display: block;
		width: 180px;
	}


	h2 {
		font-size: 1.5rem;
	}

	h3 {
		font-size: 1.2rem;
	}

	h4 {
		font-size: 1rem;
	}
}
@media screen and (max-width: 640px) {

	h1 {
		font-size: 1.7rem;

	}

	h1.title {
		margin-bottom: .8rem;
		top: -6rem;
		padding: 1.5rem 1rem 1rem 0;
		text-align: left;
		line-height: 1.1;
		margin: 0 0 1rem 0;
		background: #fff;
		width: 240px;

	}

	h1 span {
		line-height: 1.3;
	}

	.header p {
		top: -6rem;
		margin-bottom: -6rem;
	}
}

a.button {
	display: inline-block;
	border: 1px solid #999;
	padding: .9rem 2rem;
	background-color: #fff;
	color: #5AA5AB;
	font-family: ibm-plex-mono, monospace;
	text-decoration: none;
	font-style: italic;
	margin: 0 1rem 0 0;
	box-shadow: 4px 4px #5AA5AB;

}

a.btn-small {
	padding: .6rem 1rem;
}

a.button:hover {
	color: #333;
}

.item-zigzag {
	margin: 8rem 0 8rem 0;
	text-align: right; 
	position: relative;
}

.item-zigzag:nth-child(even) {
	left: 110%;
	text-align: left;
}

.item-zigzag:nth-child(2) {
	margin-top: 0rem;
}

.item-zigzag img {
	max-width: 150px;
	position: absolute;
	right: -11.75rem;
	z-index: 0;
}

.item-zigzag:nth-child(even) img {
	left: -12.5rem;
	z-index: 0;
}

@media screen and (max-width: 800px) {
	.item-zigzag:nth-child(even) {
		left: 115%;
	}
}


@media screen and (max-width: 680px) {

	a.button {
		display: block;
		max-width: 240px;
		margin: 0 auto 1rem auto;
		font-size: .8rem;
		padding: .7rem .9rem;
	}

	.cell-1 {
		border-right: none;
	}

	.item-zigzag, .item-zigzag:nth-child(even) {
		margin: 1.5rem 0;
		text-align: left;
		position: relative;
		left: 0;
		width: 100%;
	}

	.item-zigzag img, .item-zigzag:nth-child(even) img {
		max-width: 100px;
		position: relative;
		left: 0;
		margin: 1rem 1rem 1rem 0;
		float: left;
		z-index: 100;
	}

	.section-1 {
		grid-column: span 4;	
	}
}

@media screen and (max-width: 520px) {

	h3 {
		display: block;
		clear: both;
	}

}


.section-2-intro {
	grid-column: span 1;
	border-top: 1px solid #999;
}

.section-2-content {
	grid-column: 2/5;
	border-top: 1px solid #999;
	font-size: 0.9rem;

}

.section-2-content p {
	font-size: 0.9rem;
	line-height: 1.4;
}


@media screen and (max-width: 700px) {

	.section-2-intro {
		grid-column: span 4;
		border-top: 1px solid #999;
	}

	.section-2-content {
		grid-column: span 4;
		border-top: none;
		margin-top: -3rem;
		font-size: 0.9rem;

	}
}


nav {
	font-family: lora, serif;
	font-size: 1.2rem;
}

.nav-tabs {
	border-color: #999;
}

.nav-tabs .nav-item.show .nav-link:hover {
	border-color: transparent;
}

.nav-tabs .nav-item.show .nav-link, .nav-tabs .nav-link.active {
	border-color: #999;
	border-bottom: none;
	border-radius: 0;
	font-weight: bold;
}

 .nav-tabs .nav-link.active:hover {
	border-color: #999;
}

.nav-link:nth-child(1), .nav-link.active:nth-child(1) {
	color: #333;
}

.nav-link:nth-child(2), .nav-link.active:nth-child(2) {
	color: #333;
}

.nav-link:nth-child(3), .nav-link.active:nth-child(3) {
	color: #333;
}


.nav-tabs .nav-link:hover {
	color: #333;
	border-color: transparent;
}


.tab-content {
	padding: 1.5rem 0;
	margin: 0;
	position: relative;
}

.tab-content ul {
	list-style: none;
	margin: 1rem 0;
	padding: 0;
}

.tab-content ul li {
	display: inline-block;
	width: 48%;
	padding: 0 1.25rem 1.25rem 0;
}

.tab-content ul li p, .tab-content ul li a  {
	font-size: 1rem;
}

.tab-content span {
	font-family: ibm-plex-mono, monospace;
	font-style: italic; 
	font-size: .9rem;
}

.tab-pane img {
	float: right;
	position: absolute;
	max-width: 170px;
	right: 0px;
	bottom: 0px;

}

@media screen and (max-width: 700px) {

	nav {
		font-size: 1rem;
		
	}

	.tab-content ul li {
		display: inline-block;
		width: 100%;
		padding: 0 1rem 1rem 1rem;
	}

	.tab-content ul li p {
		font-size: .9rem;
	}

	.tab-content span {
		font-size: .8rem;
	}

}


@media screen and (max-width: 600px) {

	.nav-tabs {
		border-color: transparent;
	}

	.nav-tabs .nav-link {
		border: 1px solid #ccc;
		padding: .5rem;
		margin: .25rem;
		border-radius: 0;
		
	}

	.nav-tabs .nav-link:hover {
		border: 1px solid #999;
		
	}

	.nav-tabs .nav-link.active {
		border: 1px solid #999;
		border-radius: 0;
		
	}


}