@font-face {
   font-family: muller-bold;
   src: url("muller-bold.otf");
}

html, body {
  width: 100%;
  height: 100%;
}

body {
  position: relative;
  margin: 0;
  background-color: black;
  color: white;
}

h1 {
  font-family: muller-bold;
  font-size: 10rem;
  line-height: 90px;
}

h2 {
  color: #52d88f;
  font-family: muller-bold;
  font-size: 1.2rem;
  line-height: 1.7rem;
}

.invisible {
  display: none;
}

.container {
  width: 90%;
  margin: 0;
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}

.row::after {
  content: "";
  clear: both;
  display: block;
}

[class*='col-'] {
  float: left;
  min-height: 1px;
}

.col-1 {
  width: 50%;
}

table, th, td {
  border: 0;
}

#reality {
  float: right;
}

#pictures {
	background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
	background-image: url('pic/back1.jpg');
  background-size: cover;
  background-repeat: no-repeat;
  animation: change 10s infinite;
}

#imprint {
    position: absolute;
    left: 50%;
    justify-content: center;
    font-family: muller-bold;
    font-size: 1.2rem;
    color: #52d88f;
    bottom: 0;
}

@keyframes change {
  0%
  {
    background-image: url('pic/back1.jpg');
  }
  20%
  {
    background-image: url('pic/back2.jpg');
  }
  40%
  {
    background-image: url('pic/back3.jpg');
  }
  60%
  {
    background-image: url('pic/back4.jpg');
  }
  80%
  {
    background-image: url('pic/back5.jpg');
  }
  100%
  {
    background-image: url('pic/back1.jpg');
  }
}


@media (max-width: 1400px) {
  h1 {font-size: 7.5rem; line-height: 80px;}
}

@media (max-width: 1200px) {
  h1 {font-size: 6.5rem; line-height: 70px;}
  h2 {font-size: 1.0rem; line-height: 1.6rem;}

}

@media (max-width: 1024px) {
  h1 {font-size: 5.5rem; line-height: 60px;}
  h2 {font-size: 1.0rem; line-height: 1.6rem;}

}

@media (max-width: 768px) {
  .col-1 {width: 100%;}
  #reality {float: left;}
  h1 {font-size: 5rem; margin-top: 0; margin-bottom: 30px;}
  h2 {font-size: 0.8rem; line-height: 1.4rem;}
  .container {width: 98%;}
  #imprint { transform: translate(-50%, 0%);}
