/* ----- CSS Reset ----- */

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-weight: inherit;
  font-style: inherit;
  font-size: 100%;
  font-family: inherit;
  vertical-align: baseline;
}
/* ----- Fonts ----- */




/* ----- Allgemein ----- */

body  {
font-family: quatro, serif;
font-weight: 100;
font-style: normal;
background-color:#000;
margin: 0 auto;
color:#FFF;
}

strong {
  font-family: quatro, serif;
  font-weight: 900;
  font-style: normal;
  color:#FFF;
}

strong.back {
  font-family: quatro, serif;
  font-weight: 700;
  font-style: normal;/*
  background-color:#FFF;*/
  color:#FFF;
}

h1{
  color: #fff;
  text-transform: uppercase;
  font-family: quatro-slab, serif;
  font-style: italic;
  font-weight: 900;
}

#start p {
  color: #fff;
  font-family: quatro, serif; 
  font-style: italic;
  font-weight:900;
  font-size: 20px;
}

body {
    animation: change-background 12s linear infinite;
}

/* Keyframes */
@keyframes change-background {
  0% {
    background-color: #111;
  }
  25% {
    background-color: #1e3225;
  }
  37% {
    background-color: #321e1e;
  }
  50% {
    background-color: #444;
  }
  62% {
    background-color: #1e2932;
  }
  75% {
    background-color: #301e32;
  }
  87% {
    background-color: #1e3232;
  }
  100% {
    background-color: #000;
  }


}

a { color:#FFF; text-decoration: none; padding:8px; }
a:hover { text-decoration: underline; color:#FFF; }
a.no:hover { text-decoration: none; color:#FFF; }

.underline--magical {
  background-image: linear-gradient(120deg, #f62cbf 0%, #d40046 100%);
  background-repeat: no-repeat;
  background-size: 100% 0.4em;
  background-position: 0 88%;
  transition: background-size 0.25s ease-in;

}
.underline--magical:hover {
  background-size: 100% 88%;
}

#start {
  padding: 20px 20px;
}

.container{
  padding: auto 0px;
}
   
#text{
margin: 50px 0 100px;
}

#typewriter{
    margin: 0;
    text-transform:uppercase;
    color: #fff;
    line-height: 1.2em;
    height:170px;
}

#typewriter::after{
    border-right: 1px solid #fff;
      animation: blink .75s step-end infinite;
      color:#FFF;

@-webkit-keyframes blink{
  0%{opacity: 0;}
  50%{opacity: 1;}
  100%{opacity: 0;}
}

@-moz-keyframes blink{
  0%{opacity: 0;}
  50%{opacity: 1;}
  100%{opacity: 0;}
}

@keyframes blink{
  0%{opacity: 0;}
  50%{opacity: 1;}
  100%{opacity: 0;}
}



@keyframes typing {
    from { 
        width: 0% 
    }
    to { 
        width: 100% 
    }
}

@keyframes blink {
    from, to { 
        border-color: transparent; 
    }
    50% { 
        border-color: #fff; 
    }
}

.css-typing p {
  border-right: .15em solid #fff;
  font-size: 130px;
    font-family: quatro-slab, serif;
  white-space: nowrap;
  overflow: hidden;
  color: #fff;
  line-height: 1.2em;
}
.css-typing p:nth-child(1) {
  width: 4.5em;
  -webkit-animation: type 2s steps(40, end);
  animation: type 2s steps(40, end);
    -webkit-animation-delay: 1s;
  animation-delay: 1s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(2) {
  width: 6em;
  opacity: 0;
  -webkit-animation: type2 2s steps(40, end);
  animation: type2 2s steps(40, end); 
  -webkit-animation-delay: 3s;
  animation-delay: 3s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

.css-typing p:nth-child(3) {
  width: 10em;
  opacity: 0;
  -webkit-animation: type3 2s steps(40, end), blink .5s step-end infinite alternate;
  animation: type3 2s steps(40, end), blink .5s step-end infinite alternate;
  -webkit-animation-delay: 5s;
  animation-delay: 5s;
  -webkit-animation-fill-mode: forwards;
  animation-fill-mode: forwards;
}

@keyframes type {
 0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid #fff;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@-webkit-keyframes type {
 0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid #fff;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid #fff;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@-webkit-keyframes type2 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid #fff;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@keyframes type3 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid #fff;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@-webkit-keyframes type3 {
  0% {
    width: 0;
  }
  1% {
    opacity: 1;
  }
  99.9% {
    border-right: .15em solid #fff;
  }
  100% {
    opacity: 1;
    border: none;
  }
}

@keyframes blink {
  50% {
    border-color: transparent;
  }
}
@-webkit-keyframes blink {
  50% {
    border-color: transparent;
  }
}


@media only screen and (min-width: 320px){

  #typewriter { font-size: 30px; }
  strong.back { font-size: 16px; }
  
  
}

@media only screen and (min-width: 425px)  {

  #typewriter { font-size: 40px; height: 210px; }
  strong.back { font-size: 24px; }
}

@media only screen and (min-width: 768px)  {

  #typewriter { font-size: 70px; height: 330px; }

}

@media only screen and (min-width: 1020px)  {

  #start p { font-size: 30px; }
  #text { margin-top: 100px; }
  #typewriter { font-size: 100px; height: 450px; }

}

@media only screen and (min-width: 1440px)  {

#start p { font-size: 40px; }
  body { font-size:24px; }
  #typewriter { font-size: 120px; height: 550px; }

}