/* Schön, dass du in mein CSS schaust - der erste der sich bei mir mit Codewort Schniedelwutz meldet bekommt ein Bier  */


/* MOBILE  */

body {
	font-family: 'Montserrat Alternates', sans-serif;
}



.container {
	display: flex;
	flex-wrap: wrap;
}

.half {
	top: 0;
	left: 0;
	width:  100%;
	height: 40em;
	background-color: #fff;
}

.inside {
	position: relative;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
}

.kuss {
	background-image: url("img/kuss.jpg");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
}


.date {
	position: absolute;
	font-weight: 300;
	font-size: 6em;
	right:  10%;
	bottom:  20%;
	mix-blend-mode: color-burn;
	color:  #000;
}

.dateblend {
	position: absolute;
	font-weight: 300;
	font-size: 6em;
	right:  10%;
	bottom:  20%;
	mix-blend-mode: exclusion;
	color:  #fff;
}


.back {
	color: #000;
}

.text {
	position: relative;
	font-weight: 300;
	font-size: 1em;
	left:  10%;
	margin-right: 10%;
	top:  4em;
	color:  #110f21;
}


.blurred {
	filter:  blur(4px);
    text-shadow: 0 0 8px #000;
}

.logo {
	position: fixed;
	left: 5%;
	bottom: 5%;
	width: 50px;
	height: 50px;
	background-image: url("img/LeaMichael.png");
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	opacity: 0.4;
}

a {
	font-weight: 300;
	color:  #110f21;
	transition: all 0.4s;
}

a:hover, b {
	font-weight: 500;
	color:  #110f21;
}


.logo a {
	position: absolute;
	top: 2em;
    left: 1.4em;
    font-size: 0.8em;
    opacity: 0;
    transition: all 0.4s;
}

.logo:hover a, .logo a:hover {
	left: 4.4em;
	opacity: 1;
}


/* DESKTOP */

@media only screen and (min-device-width: 40em) {

	.half {
		width: 35%;
		margin-top:  5em;
	}

	.left {
		margin-left: 15%;
	}

	.right {
		margin-right: 15%;
	}

	.text {
		top:  16em;
	}
	.logo {
		opacity: 1;
	}
	
}


/* BIG SCREEN */

@media only screen and (min-device-width: 80em) {

	.half {
		width: 25%;
	}

	.left {
		margin-left: 25%;
	}

	.right {
		margin-right: 25%;
	}
	
}