@keyframes BlendIn {
  from {opacity: 0;}
  to {opacity: 1;}
}


html, body {
    height: 100%;
	margin: 0;
}
body {
 background-color: Black;
 font-family: 'Monteserat', Roboto, Verdana;
	font-size: calc(18px + 0.390625vw);

 color: White;
}

.cardL {

	color: white;
	padding: 1rem;
	text-align: center;

	vertical-align: middle;
}

.cardR {
	opacity: 0;
	animation-name: BlendIn;
	animation-duration: 2s;
	animation-delay: 0.5s;
	animation-fill-mode: forwards;
	color: white;
	padding: 1rem;
	text-align: center;

	font-weight: 600;
}

.cards {
  max-width: 1600px;
  margin: 0 auto;
  display: grid;
  gap: 1rem;
  height: 95%;
  align-items: center;

  }

.logo {
	width: 80%;

}
.insta {
	opacity: 0;
	animation-name: BlendIn;
	animation-duration: 2s;
	animation-delay: 1s;
	animation-fill-mode: forwards;
	width: 25px;
	padding-top: 10px;
}

	.impressum {
	font-size: calc(10px + 0.5vw);
}

@media (min-width: 600px) {
	.cards { 
		display: grid;
		grid-template-columns: repeat(2, 1fr);
		align-items: center; 
		height: 95%;
		grid-column-gap: 6vmax;

	}
	.logo {
		width: 30vw;
		min-width: 400px;
	}	
	.cardL {
		text-align: right;

	}
	.cardR {
		text-align: left;
		border-left: 2px solid white;
	}
	.insta {
		opacity: 1;
		animation-name: None;
		width: calc(15px + 1.5vw);
		padding-top: 0.3vw;;
	}
	body {
		font-size: calc(12px + 1.5vw);
	}
	.impressum {
	font-size: calc(10px + 0.2vw);
}
}








.footer {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  background-color: Black;
  color: white;
  text-align: center;
  font-size: calc(10px + 0.390625vw);
  	padding-bottom: 10px;
}



a:link {
	color: White;
	text-decoration: none;
} 
a:visited {
	text-decoration: none;
	color: White;
} 
a:hover {
	text-decoration: underline dotted;
	color: White;
}