*{
		margin:0;
		padding:0;
		text-decoration:none;
}

header{
		background-image:url(../bilder/hintergrund.jpg);
		background-size:100%;
		background-repeat:no-repeat;
}
body{
		background-color:#fafafa;
}

/*
		Schriftarten:
		font-family: 'Amatic SC', cursive;
		font-family: 'Roboto Slab', serif;
*/

.title1{
		padding-top:20px;
		text-align:center;
		font-family:Amatic SC;
		font-size:24px;
}

.title2{
		text-align:center;
		padding-bottom:20px;
		font-family:Amatic SC;
		font-size:22px;
}

header nav ul{
		padding:5px 24px;
		background-color:#ffe6e6;
		height:20px;
		
}

header nav ul li{
		display:inline-block;
		float:left;
		
	
}

header nav ul li a{
		font-family:Amatic SC;
		font-size:14px;
		padding:0 9.5px;
		color:#000000;
		border-radius:3px;
		transition-property:background;
		transition-duration:0.5s;
}

header ul li a:hover {
		background-color:pink;
}
	
.bild{
		padding-top:0px;
		background-image:url(../bilder/sophie4.jpg);
		background-size:100%;
		background-repeat:no-repeat;
		height:210px;
		
}

.title3{
		font-family:Amatic SC;
		font-size:20px;
		text-align:center;
		margin:25px 0 15px 0;
		position:relative;
		animation:linksrechts;
		animation-duration:1s;
		animation-fill-mode:forwards;
		transform:rotation;
}
/*
@keyframes linksrechts{
		0%	{left:-1000px;}
		100%{left:0px;}
		0%	{opacity:0}
		50%	{opacity:0.6}
		100%{opacity:1}
}
*/
@keyframes linksrechts{
		0%	{transform:rotateY(0deg);}
		100%{transform:rotateY(360deg);}
}

.text{
		font-family:Roboto Slab;
		font-weight:200;
		font-size:8px;
		line-height:20px;
		border:2px solid;
		border-radius:10px;
		border-color:#ffe6e6;
		padding:15px 20px 15px 20px;
		margin-left:30px;
		margin-right:30px;
		background-color:#ffe6e6;
}

.zahlen{
		float:right;
}

/*
	Das nächste ist die Bildergallerie :)
*/
.gallery{
		background-color:#fafafa;
		display:grid;
		grid-template-columns:repeat(auto-fit,minmax(100px, 1fr));
		grid-template-rows:110px 110px 110px;
		grid-gap:10px;
		margin-right:35px;
		margin-left:25px;
		margin-top:20px;

}

.gallery img{
		background-color:#ffffff;
		width:100%;
		height:100%;
		object-fit:contain;
		padding:px;
		border: 5px solid;
		border-color:#fafafa;
}

.gallery a img:hover{
		opacity:0.6;
}


/*
	Das ist die Probe für die Gallerie, falls alle Bilder quadratisch sind :)
*/
.gallery2{
		background-color:#fafafa;
		display:grid;
		grid-template-columns:repeat(auto-fit,minmax(100px, 1fr));
		grid-template-rows:110px 110px 110px;
		grid-gap:10px;
		margin-right:35px;
		margin-left:25px;
		margin-top:20px;
}

.gallery2 img{
		background-color:#ffffff;
		width:100%;
		height:100%;
		object-fit:contain;
		padding:px;
		border: 5px solid;
		border-color:#fafafa;
}

.gallery2 a img:hover{
		opacity:0.6;
}

.socialmedia ul{
		display:flex;
		margin-left:20px;
		margin-right:20px;
		margin-top:20px;
		height:50px;
		width:50px;
		
}

.socialmedia ul li{
		list-style:none;
		padding:0 10px;
}


footer{
		font-family:Roboto Slab;
		font-weight:200;
		text-align:center;
		font-size:11px;
		background-color:#ffe6e6;
		margin-top:100%;
		
}




@media screen and (min-width: 700px) {
	
.title1{
		padding-top:50px;
		text-align:center;
		font-family:Amatic SC;
		font-size:40px;
}

.title2{
		text-align:center;
		padding-bottom:50px;
		font-family:Amatic SC;
		font-size:36px;
}

header nav ul{
		padding:10px 25px 14px;
		background-color:#ffe6e6;
		height:28px;
		
}

header nav ul li a{
		font-family:Amatic SC;
		font-size:25px;
		padding:0 29px;
		color:#000000;
}

.bild{
		padding-top:0px;
		background-image:url(../bilder/sophie4.jpg);
		background-size:100%;
		background-repeat:no-repeat;
		height:425px;
}

.title3{
		font-family:Amatic SC;
		font-size:34px;
		text-align:center;
		margin:35px 0 35px 0;
}
		
.text{
		font-family:Roboto Slab;
		font-weight:200;
		line-height:30px;
		font-size:16px;
		padding:30px 20px 30px 20px;
}

/*
	Das nächste ist die Bildergallerie für das Tablet :)
*/

.gallery{
		background-color:#fafafa;
		display:grid;
		grid-template-columns:repeat(auto-fit,minmax(200px, 1fr));
		grid-template-rows:150px 150px 150px;
		grid-gap:20px;
		margin-right:35px;
		margin-left:25px;
		margin-top:20px;
		margin-bottom:0px;

}

.gallery img{
		background-color:#ffffff;
		width:100%;
		height:100%;
		object-fit:contain;
		padding:px;
		border: 5px solid;
		border-color:#fafafa;
}

.gallery a img:hover{
		opacity:0.6;
}

.socialmedia ul{
		display:flex;
		margin-left:15px;
		margin-right:20px;
		margin-top:40px;
		height:50px;
		width:50px;
		
}

.socialmedia ul li{
		list-style:none;
		padding:0 20px;
}

footer{
		font-family:Roboto Slab;
		font-weight:200;
		text-align:center;
		font-size:16px;
		background-color:#ffe6e6;
		margin-top:100%;
		
}




@media screen and (min-width: 1200px) {
	
	
header{
		background-image:url(../bilder/hintergrund2.jpg);
		background-size:100%;
		background-repeat:no-repeat;
}
		
.title1{
		padding-top:80px;
		text-align:center;
		font-family:Amatic SC;
		font-size:50px;
}

.title2{
		text-align:center;
		padding-bottom:100px;
		font-family:Amatic SC;
		font-size:36px;
}

header nav ul{
		padding:10px 25px 14px;
		background-color:#ffe6e6;
		height:28px;
		
}

header nav ul li a{
		font-family:Amatic SC;
		font-size:25px;
		padding:0 72px;
		color:#000000;
}

.bild{
		margin-top:50px;
		margin-left:300px;
		margin-right:300px;
		background-image:url(../bilder/sophie4.jpg);
		background-size:100%;
		background-repeat:no-repeat;
		height:550px;
}


.title3{
		font-family:Amatic SC;
		font-size:34px;
		text-align:center;
		margin:35px 0 30px 0;
}
		
.text{
		font-family:Roboto Slab;
		font-weight:200;
		line-height:30px;
		font-size:16px;
		padding:40px 50px 40px 50px;
		margin-left:100px;
		margin-right:100px;
}

/*
	Das nächste ist die Bildergallerie für einen Laptopbildschirm :)
*/

.gallery{
		background-color:#fafafa;
		display:grid;
		grid-template-columns:repeat(auto-fit,minmax(300px, 1fr));
		grid-template-rows:300px 300px 300px;
		grid-gap:30px;
		margin-right:35px;
		margin-left:25px;
		margin-top:50px;
		margin-bottom:0px;
		padding:40px 50px 40px 50px;

}

.gallery img{
		background-color:#ffffff;
		width:100%;
		height:100%;
		object-fit:contain;
		padding:px;
		border: 5px solid;
		border-color:#fafafa;
}

.gallery a img:hover{
		opacity:0.6;
}

.socialmedia ul{
		display:flex;
		margin-left:80px;
		margin-right:20px;
		margin-top:40px;
		height:50px;
		width:50px;
		
}

.socialmedia ul li{
		list-style:none;
		padding:0 20px;
}

footer{
		font-family:Roboto Slab;
		font-weight:200;
		text-align:center;
		font-size:16px;
		background-color:#ffe6e6;
		margin-top:100%;
		
}

@media screen and (min-width: 1400px) {
	
	
header{
		background-image:url(../bilder/hintergrund2.jpg);
		background-size:100%;
		background-repeat:no-repeat;
}
		
.title1{
		padding-top:80px;
		text-align:center;
		font-family:Amatic SC;
		font-size:50px;
}

.title2{
		text-align:center;
		padding-bottom:100px;
		font-family:Amatic SC;
		font-size:36px;
}

header nav ul{
		padding:10px 25px 14px;
		background-color:#ffe6e6;
		height:28px;
		
}

header nav ul li a{
		font-family:Amatic SC;
		font-size:25px;
		padding:0 85px;
		color:#000000;
}

.bild{
		margin-top:50px;
		margin-left:300px;
		margin-right:300px;
		background-image:url(../bilder/sophie4.jpg);
		background-size:100%;
		background-repeat:no-repeat;
		height:550px;
}


.title3{
		font-family:Amatic SC;
		font-size:34px;
		text-align:center;
		margin:50px 0 45px 0;
}
		
.text{
		font-family:Roboto Slab;
		font-weight:200;
		line-height:30px;
		font-size:16px;
		padding:40px 50px 40px 50px;
		margin-left:100px;
		margin-right:100px;
}

/*
	Das nächste ist die Bildergallerie für einen Laptopbildschirm :)
*/

.gallery{
		background-color:#fafafa;
		display:grid;
		grid-template-columns:repeat(auto-fit,minmax(300px, 1fr));
		grid-template-rows:300px 300px 300px;
		grid-gap:60px;
		margin-right:35px;
		margin-left:25px;
		margin-top:50px;
		margin-bottom:0px;
		padding:40px 50px 40px 50px;

}

.gallery img{
		background-color:#ffffff;
		width:100%;
		height:100%;
		object-fit:contain;
		padding:px;
		border: 5px solid;
		border-color:#fafafa;
}

.gallery a img:hover{
		opacity:0.6;
}

.socialmedia ul{
		display:flex;
		margin-left:80px;
		margin-right:20px;
		margin-top:50px;
		height:50px;
		width:50px;
		
}

.socialmedia ul li{
		list-style:none;
		padding:0 20px;
}

footer{
		font-family:Roboto Slab;
		font-weight:200;
		text-align:center;
		font-size:16px;
		background-color:#ffe6e6;
		margin-top:100%;
		
}


@media screen and (min-width: 1500px) {
	
	
header{
		background-image:url(../bilder/hintergrund2.jpg);
		background-size:100%;
		background-repeat:no-repeat;
}
		
.title1{
		padding-top:80px;
		text-align:center;
		font-family:Amatic SC;
		font-size:55px;
}

.title2{
		text-align:center;
		padding-bottom:100px;
		font-family:Amatic SC;
		font-size:40px;
}

header nav ul{
		padding:10px 25px 14px;
		background-color:#ffe6e6;
		height:28px;
		
}

header nav ul li a{
		font-family:Amatic SC;
		font-size:25px;
		padding:0 92px;
		color:#000000;
}

.bild{
		margin-top:50px;
		margin-left:300px;
		margin-right:300px;
		background-image:url(../bilder/sophie4.jpg);
		background-size:100%;
		background-repeat:no-repeat;
		height:550px;
}


.title3{
		font-family:Amatic SC;
		font-size:34px;
		text-align:center;
		margin:50px 0 45px 0;
}
		
.text{
		font-family:Roboto Slab;
		font-weight:200;
		line-height:30px;
		font-size:16px;
		padding:40px 50px 40px 50px;
		margin-left:100px;
		margin-right:100px;
}

/*
	Das nächste ist die Bildergallerie für einen Laptopbildschirm :)
*/

.gallery{
		background-color:#fafafa;
		display:grid;
		grid-template-columns:repeat(auto-fit,minmax(300px, 1fr));
		grid-template-rows:300px 300px 300px;
		grid-gap:60px;
		margin-right:35px;
		margin-left:25px;
		margin-top:50px;
		margin-bottom:0px;
		padding:40px 50px 40px 50px;

}

.gallery img{
		background-color:#ffffff;
		width:100%;
		height:100%;
		object-fit:contain;
		padding:px;
		border: 5px solid;
		border-color:#fafafa;
}

.gallery a img:hover{
		opacity:0.6;
}

.socialmedia ul{
		display:flex;
		margin-left:80px;
		margin-right:20px;
		margin-top:50px;
		height:50px;
		width:50px;
		
}

.socialmedia ul li{
		list-style:none;
		padding:0 20px;
}

footer{
		font-family:Roboto Slab;
		font-weight:200;
		text-align:center;
		font-size:16px;
		background-color:#ffe6e6;
		margin-top:100%;
		
}