/* fonts und typo */
@import url(fonts.css);
@import url(typo.css);


/*quick reset*/
*{margin:0;padding:0;}

/*universal box size with inheritance */
html {
    box-sizing: border-box;
  }
  *, *:before, *:after {
    box-sizing: inherit;
  }




.container{
    height:100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding:2vw;
	position:relative;
}


@keyframes fadeIn {
  from {
    opacity: 0;
  }

  to {
    opacity: 1;
  }
}


.fadeIn {
  animation-name: fadeIn;
  	animation-duration:2s;
	animation-fill-mode:both;

}

.bitter{animation-delay:0.5s;}
.minus{animation-delay:1.5s;}
.online{animation-delay:1s;}
.de{animation-delay:2s;}

.contact{
	position: absolute;
	bottom:2rem;
	right:1rem;
	color:#888;
	animation-delay:3s;
}

.contact a:link,
.contact a:visited,
.contact a:hover,
.contact a:active
 {
  color: inherit;
  text-decoration:none;
}

.contact a{
	padding:1rem;
}

.info{color:white;
position:absolute;
position: absolute;
	top:2rem;
	right:1rem;
width:50%;
font-size:1rem;
text-align:right;
}

@media screen and (min-width:800px){
	.info{
		font-size:1.8vw;
		width:30vw;
	}
}