html {
	height: 100%;
}

@font-face {
  font-family: 'optima';
  src: url('fonts/OPT____S.TTF') format('truetype');
}

@font-face {
  font-family: 'futura';
  src: url('fonts/FUTURA-MED.OTF') format('opentype');
}

@font-face {
  font-family: 'futura-light';
  src: url('fonts/FUTURA-LIG.OTF') format('opentype');
}


body {
  background: black;
  display: flex;
  flex-direction: column;
  color: white;
  margin: 0;
  padding: 0;
  font-family: futura-light, sans-serif;
  min-height: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}



/*desktop*/
@media screen and (min-width: 1200px) {

.titlepic{
  animation: fadeIn 3s;
  display: block;
  text-align: center;
  height: 30vh;
  width: auto;
  margin: 20vh auto 5vh;
}

@keyframes fadeIn{
  from{
    opacity: 0;
    height: 0;
  }
  to{
    opacity: 1;
    height: 30vh;
  }
}

.introtext{
  color: white;
  text-align: center;
  font-size: 20pt;
  letter-spacing: 2px;
  line-height: 1.6;
  animation: fadeIn 5s;
}

.introtext a{
  color: white;
  text-decoration: none;
}
}


/*mobil*/
@media screen and (max-width: 1199px) {

.titlepic{
  animation: fadeIn 3s;
  display: block;
  text-align: center;
  height: 20vh;
  width: auto;
  margin: 10vh auto 5vh;
}

@keyframes fadeIn{
  from{
    opacity: 0;
    height: 0;
  }
  to{
    opacity: 1;
    height: 20vh;
  }
}

.introtext{
    color: white;
    text-align: center;
    font-size: 13pt;
    letter-spacing: 2px;
    line-height: 1.6;
    animation: fadeIn 5s;
}

.introtext a{
  color: white;
  text-decoration: none;
}







}