@charset "UTF-8";
/* CSS Document */

/* Hintergrund */

.name-background{
	background: rgb(245,159,71);
    background: linear-gradient(180deg, rgba(245,159,71,1) 0%, rgba(255,255,255,1) 60%, rgba(255,255,255,1) 100%);

	background-repeat: no-repeat;
}


/* Icons an der Seite links */

.mail {
	width: 42px; 
	height: 20px; 
	background:url("icons/Mail_black.png");
	margin-bottom: 3em;
	
}
.mail:hover {
	background:url("icons/Mail_white.png");
	cursor: url(icons/twentyone_cursor.png) 10 0, auto;
}
.mailicon {
	text-decoration: none;
	align-items: center;
    justify-content: center;
	color: black;
	opacity: 0;
}
.mailicon:hover{
	cursor: url(icons/twentyone_cursor.png) 10 0, auto;
}

.website {
	width: 42px; 
	height: 20px; 
	background:url("icons/Website_unable.png");
	margin-bottom: 3em;
	
}
.websiteicon {
	text-decoration: none;
	align-items: center;
    justify-content: center;
	color: black;
	opacity: 0;
}
.websiteicon:hover{
	cursor: url(icons/twentyone_cursor.png) 10 0, auto;
}

.instagram {
	width: 42px; 
	height: 20px; 
	background:url("icons/Insta_black.png");
}
.instagram:hover {
	background:url("icons/Insta_white.png");
	cursor: url(icons/twentyone_cursor.png) 10 0, auto;
}
.instagramicon {
	text-decoration: none;
	align-items: center;
    justify-content: center;
	color: black;
	opacity: 0;
}
.instagramicon:hover{
	cursor: url(icons/twentyone_cursor.png) 10 0, auto;
}


/* Stacked Fotos der Arbeiten */

.bild1 {
	
	position: absolute;
	transform: translateX(20%) translateY(5%);
	max-width: 100%;
	
}
.bild2 {
	position: absolute;
	transform: translateX(30%) translateY(10%);
	max-width: 100%;
}
.bild3{
	position: absolute;
	transform: translateX(15%) translateY(7%);
	max-width: 100%;
}

.bild4 {
	position: absolute;
	transform: translateX(25%) translateY(10%);
	max-width: 100%;
}
.bild5{
	position: absolute;
	transform: translateX(10%) translateY(7%);
	max-width: 100%;
}

@media only screen and (max-width: 768px){
	.bild1 {
		transform: translateX(5%) translateY(5%);
		max-width: 90%;
	}
	.bild2 {
		transform: translateX(7%) translateY(7%);
		max-width: 90%;
	}
	.bild3 {
		transform: translateX(3%) translateY(8%);
		max-width: 90%;
	}
	
	.bild4 {
	transform: translateX(4%) translateY(10%);
	max-width: 90%;
}
.bild5{
	transform: translateX(6%) translateY(7%);
	max-width: 90%;
}
}