/*  Ein Kommentar in CSS */

*
{
/* margin definiert den Aussenabstand einer Box */	
	margin:0px;	
/* padding definiert den Innenabstand einer Box */
	padding:0px;

	_font-family: system-ui, -apple-system, BlinkMacSystemFont, Roboto, sans-serif;

	font-family: "Roboto", sans-serif,system-ui;

/* 
	position:relative definiert die Startposition einer Box. 
	relative zur Position an der das Element liegt, wird es senkrecht nach oben gehoben und kann jetzt mit top/right/left/bottom positioniert werden.
*/	
	position:relative;
/*  
	box-sizing:border-box definiert das padding und border NICHT zu Breite und Höhe dazu addiert werden  
*/	
	box-sizing:border-box;
}

html,body
{
	height:100%;
	overflow: hidden;
}

h1
{
	font-size: 7em;
	font-weight: 700;
	color: #FFF9E6;
	 font-family: "Roboto", sans-serif;
	 
	
}
h2
{
	font-size: 2em;
	font-weight: normal;
	 font-family: "Advent Pro", sans-serif;
}
h3
{
	font-size: 1.5em;
	font-weight: normal;
	 font-family: "Advent Pro", sans-serif;
}
body 
{
	_background:white;
	background-image: url(../images/background_landing_katalinsieversjpg);
	background-repeat:no-repeat;
	background-size:cover;
	background-position:center;
	color:#FFF9E6;
	margin:0px;	

}

.container
{
	width:75%;
	max-width:1900px;
	height: auto;
	_background: red;
	margin-top: 2%;
	margin-left: auto;
	margin-right: auto;
   margin-bottom:5%;


	
}
.header
{
	_background:blue;
	height:auto;
	width: fit-content;
	text-align: right;
	justify-content: space-around;
	margin-left: auto;
	margin-right: auto;



}

.searchbar	
{
	background:rgba(0, 0, 0, 0.458);
	height:75px;
	width: 75%;
	display: flex;	
	border-radius: 25px;
	padding: 10px 25px;
	align-items: center;
	justify-content: space-between;
	margin-left: auto;
	margin-right: auto;
	margin-top: 10%;
	margin-bottom: 10%;

}
.typewriter
{
		
	font-size: 1.5em;
	font-weight: normal;
	width: 33%;
	overflow: hidden;
	display: inline-block;
	white-space: nowrap;
	border-right: solid #FFF9E6 3px;
	 font-family: "Advent Pro", sans-serif;
	animation: typing 4s steps(34) forwards,
			   cursor 1s steps(34) infinite normal;
}

/*Typewriter animation*/
@keyframes cursor
{
 50% { border-color: transparent; }

}


@keyframes typing 
{
  from { width: 0; }
  to { width: 100%; }
}
 .spacer
{
	height: 20px;
	width: 33%;
}
#search
{
	width: 33%;
	display: flex;
	justify-content: flex-end;
	align-items: center;
}
.column
{
	_background:pink;
	height:auto;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	padding: 20px;
	display: flex;
	flex-wrap: wrap;
}
.article
{
	display: none;
	background:rgba(0, 0, 0, 0.478);
	height:auto;
	width: 100%;
	margin:10px;
	padding: 20px;
	border-radius: 25px;
}
.card
{
	background:rgba(0, 0, 0, 0.458);
	height:auto;
	width: 30%;
	margin:10px;
	padding: 20px;
	border-radius: 25px;
}
.footer
{
	background: black;
	padding: 20px;
	display: flex;
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
}
a
{
	color:black;
	text-decoration:none;
}

img
{
	display: block;
}

/* MEDIA QUERY */
@media screen and (max-width:800px) {
	html,body
	{
		overflow-y: auto;
	}

	h1 
	{
		font-size: 3em;
	}
.searchbar
	{
	display: none;
	}

	.card
	{
		width: 100%;
	}
		
	img	
	{
		max-width: 100%;
		height: auto;
	}

}