@import url(https://fonts.googleapis.com/css?family=Istok+Web);

* {
    box-sizing: border-box;
    
}

html, body {
    height: 100%;
    width: auto; 
    font-size: 100%; 
    font-family: 'Istok Web', helvetica, sans-serif;
}

a
{
	color: #ff6a00;
	text-decoration: none;
}



body {
    margin: 0;
    padding: 0;
    
    background-image: url("bildStor.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center center;
    background-attachment: fixed;
    background-color: white;
 }

#textBox {
   z-index: 1;
    position: absolute;
    top: 5%;
    left: 5%;
    color: #63968F;
    opacity: 0;
    width: 42%;
    animation: textAnimation 1s linear 0.25s 1 normal forwards;
    line-height: 170%;
}

.linkImage
{
width: 2em;
padding: 0.1em;
}

@media only screen and (max-width: 450px) {
   body { 
           background-image: url(bildSmall.jpg); 
           font-size: 75%;
            }

#textBox {
width: 65%;
}

.linkImage
{
width: 15%;
padding: 0.1em;
}


}
 @media only screen and (max-width: 800px) {
   body { 

          font-size:95%;
    }

}


h1 { 
   font-size: 1.8em;
   padding: 0;
   margin: 0;
}

h2 {
    font-size: 1.3em;
    padding: 0;
    margin: 0;
 
}

p { 
   font-size: 1.2em;
}

width: 100%;
height: 100%;
opacity: 0.0;

-webkit-animation: opacity 1s linear 0.25s 1 normal forwards; 
-moz-animation: opacity 1s linear 0.25s 1 normal forwards;
-o-animation: opacity 1s linear 0.25s 1 normal forwards;
animation: opacity 1s linear 0.25s 1 normal forwards;
}



@-moz-keyframes opacity {
  0%   { opacity: 0; }
  100% { opacity: 0.5; }
}


@-webkit-keyframes opacity {
  0%   { opacity: 0; }
  100% { opacity: 0.5; }
}

@-o-keyframes opacity {
  0%   { opacity: 0; }
  100% { opacity: 0.5; }
}
@keyframes opacity {
  0%   { opacity: 0; }
  100% { opacity: 0.5; }
}

@keyframes textAnimation {
  0%   { opacity: 0; }
  100% { opacity: 1; }
}