@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@100&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@500&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Archivo+Black&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');
.navbar{
    position: fixed;
    width: 100%;
    height: 0%;
    outline-color: white;
    z-index: 1200;
    font-family: monospace;
    float: right;
    font-size: 2vw;
    top: 1.5%;
    background-color: #2c3e50;
}
.navbar_bg{
    width: 100%;
    height: 10%;
    background-color: rgb(53, 71, 109);
    z-index: 1100;
    position: fixed;
    top: 0%;
}
body{
    font-family: monospace;
    font-size: 30px;
    margin: 0px;
    background-color: rgb(15, 20, 85); 
    width: 100%;
}
li:hover{
    transition: .5s;   
    color: rgb(255, 255, 255);
    text-decoration: underline;
}
@keyframes underline{
    10%{
        left:70%;
    }
    20%{
        left:60%;
    }
    30%{ 
        left:50%;
       }
    40%{ 
        left:40%;
    }
    50%{
        left:30%;
    }
    60%{
        left:20%;
    }
    70%{
        left:10%;
    }
    80%{
        left:0%;
    }
    90%{
        left:7%;
    }
    100%{
        left:0%;
    }
}
li{
    float: right;
    position: relative;
    top: 2.5%;
    z-index: 12;
    text-align: center;
    padding: .5%;
    right: 0%;
    height: 5%;
}
a{
    color:rgb(121, 114, 114);
    font-family: 'Archivo black', sans-serif;
    z-index: 12;
}
ul, li{
    list-style:none;
    z-index: 12;
}
a:link, a:visited {
    z-index: 12;
}
.fa{
   color: rgb(73, 115, 255);
   font-size: 55px;
   position: absolute;
   font-family: 'Poppins', sans-serif;
   top: -10px;
   left: 2%;
   z-index: 12;
   height: 5%;
}
.künst{
    top:25%;
    position: absolute;
    padding:3%;
    font-family: 'archivo black', sans-serif;
    font-size: 8vmin;
    left: 20%;
    border-top: 5%;
    z-index: 9;
    animation: rechts 1s infinite ;
    color: rgb(255, 255, 255);
    background-color: rgb(10, 18, 53);
    width: 30%;
    height: 11%;
    border-style: solid;
    border-width: 5px;
    border-color: black;
    background-image: url(hgbild.png);
    text-align: center;
}
.home{
    text-underline-position: below;
    text-decoration: underline;
}
.intel{
    position: absolute;
    z-index: 9;
    font-family: 'archivo black', sans-serif;
    font-size: 10vmin;
    animation: kasteni 1s infinite;
    color: rgb(255, 255, 255);
    background-color: rgb(10, 18, 53); 
    border-width: 5px;
    width: 35%;
    height: 15%;
    left: 43% ;
    top:53%;
    padding: 2%;
    border-style: solid;
    border-width: 5px;
    border-color: black;
    background-image: url(hgbild.png);
    text-align: center;
}
@keyframes rechts {
    10%{
        border-color: rgb(34, 77, 170);
    }

    90%{

    }
    100%{
        border-color: black;
    }
}
@keyframes links {
    10%{
    }
    90%{
    }
    100%{
   } 
}
@keyframes kasteni {
    10%{
        border-color: rgb(34, 77, 170);
    }
    90%{

    }
    100%{
        border-color: black;
   } 
}
@keyframes kastenk {
    10%{

    }
    90%{

    }
    100%{

   } 
}

.bild{
    top: 0%;
    position: absolute;
    z-index: 7;
    width: 100%;
}
.kastenk{
    position: absolute;
    z-index: 8;
    width: 36.5%;
    height: 23.5%;
    background-color:  rgb(10, 18, 53) ;
    left: 20%;
    top:25%;
}
.kasteni{
    position: absolute;
    z-index: 8;
    width: 39.5%;
    height: 23.5%;
    background-color: rgb(10, 18, 53); 
    left: 43% ;
    top:53%;
}
.texti{
    position: absolute;
    color: rgb(255, 255, 255);
    top: 0%;
    font-family: monospace;
    font-size: 2.5vmin;
    padding: 4%;
    z-index: 8;
    text-align: center;
}
.textk{
    position: absolute;
    color:rgb(255, 255, 255);
    font-family: monospace;
    font-size:  3vmin;
    padding: 5%;
    z-index: 8;
    text-align: center;
}
.intel:hover{
    color: rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0);
    background-image: none;
    animation-duration: 0ms;
}
.künst:hover{
    color: rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0);
    background-image: none;
    animation-duration: 0ms;
}
.whintergrund{
    width: 100%;
    height: 1300px;
    z-index: 5;
    top:1000px;
    color: black;
    background-color: rgb(20, 26, 110);
    position: absolute;
}
.bild3{
    z-index: 7;
    position: absolute;
    width: 100%;
    top:  950px;
}
.kastentext{
    z-index: 8;
    width: 60%;
    position: absolute;
    top:1250px;
    padding: 5%;
}
h3{
    padding: 0%;
    color: black;
    font-size: 50px;
    bottom: 0%;
}
.bild6{
    z-index: 8;
    top: 158%;
    position: absolute;
    right: 35%;
    width: 30%;
    height: 89%;
}
.bild5{
    z-index: 8;
    top: 158%;
    position: absolute;
    left: 2.5%;
    width: 30%;
    height: 89%;
}
.bild7{
    z-index: 8;
    top: 158%;
    position: absolute;
    width: 30%;
    right: 2.5%;
    height: 89%;
}
.wo{
    background-color: rgba(255, 255, 255, 0.5);
    position: absolute;
    top: 158%;
    z-index: 9;
    right: 67.5%;
    height:  77%;
    color: rgb(0, 0, 0);
    padding: 3%;
    font-size: 3.5vmin;
    font-family: 'Source Sans Pro', sans-serif;
    left: 2.5%;
    text-align: center;
}
.wie{
    background-color: rgba(255, 255, 255, 0.5);
    position: absolute;
    top: 158%;
    z-index: 9;
    right: 35%;
    height: 77%;
    color: rgb(0, 0, 0);
    padding: 3%;
    font-size: 3.5vmin;
    font-family: 'Source Sans Pro', sans-serif;
    left: 35%;
    text-align: center;
}
.was{
    background-color: rgba(255, 255, 255, 0.5);
    position: absolute;
    top: 158%;
    z-index: 9;
    right: 2.5%;
    height: 77%;
    color: rgb(0, 0, 0);
    padding: 3%;
    font-size: 3.5vmin;
    font-family: 'Source Sans Pro', sans-serif;
    left: 67.5%;
    text-align: center;
}
h3{
    color: darkblue;
    font-size: 50px;
}
.allgemeintxt{
    border-style: solid;
    border-width: 5px;
    border-color: black;
    background-color: rgb(19, 19, 148);
    padding: 1%;
    font-family: 'Source Sans Pro', sans-serif;
    position: absolute;
    top: 120%;
    z-index: 8; 
    color: white;
    left: 10%;
    font-size: 4vw;
}
.künstlich{
    border-style: solid;
    border-width: 5px;
    border-color: black;
    background-color: rgb(19, 19, 148);
    padding: 1%; 
    font-family: 'Source Sans Pro', sans-serif;
    position: absolute;
    top:135%;
    z-index: 10; 
    color: white;
    left: 45%;
    font-size: 4vw;
}
.ende{
    top:3500px;
    color: rgba(255, 0, 0, 0);
    position: absolute;
    width: 100%;
    border-width: 3px;
    border-style: solid;
    border-top: solid rgb(255, 255, 255);
    border-left: rgba(0, 0, 0, 0);
    border-right: rgba(0, 0, 0, 0);
    border-bottom: rgba(0, 0, 0, 0);
    background-color: rgba(255, 255, 255, 0.151);
    height: 16%;
    font-family: monospace;
}
#button1{
    position: absolute;
    z-index: 31;
    background-color: black;
    border-color: black;
    color: white;
    width: 20%;
    left: 40%;
    right: 40%;
    font-size: 40px;
    top: 300px;
    filter: none;
}
button:hover{
    font-size: 50px;
    color: blue;
    border-color: rgba(255, 255, 255, 0);
    border-style: solid;
    border-radius: 10px;
    transition: .5s;
}
.bild{
    position: absolute;
    width: 100%;
    z-index: 1;
    right: 0%;
    left: 0%;
}
#hinweis{
    position: absolute;
    z-index: 80;
    color: white;
    visibility: visible;
    top: 65%;
    background-color:black ;
    text-align: left;
    width: 28%;
    padding: 1%;
    animation: hinweis 2s ease-in;
    animation-timing-function: linear;
    left: .5%;
    font-size: 2.5vmin;
}
#button{
    background-color: rgba(255, 255, 255, 0);
    width: 30%;
    height: 3%;
    font-size: 2.5vmin;
    color: white;
}

@keyframes hinweis{
    10%{
        left:-70%;
    }
    20%{
        left:-60%;
    }
    30%{ 
        left:-50%;
       }
    40%{ 
        left:-40%;
    }
    50%{
        left:-30%;
    }
    60%{
        left:-20%;
    }
    70%{
        left:-10%;
    }
    80%{
        left:0%;
    }
    90%{
        left:7%;
    }
    100%{
        left:0.5%;
    }
}    
.info{
    z-index: 50;
    position: absolute;
    color: black;
    font-size: 2vmin;
    left: 60%;
    font-family: monospace;
    height: 20%;
    top: 5%;

}
.fach{
    z-index: 500;
    position: absolute;
    color: black;
    font-size: 2vmin;
    left: 0%;
    right: 50%;
    font-family: monospace;
    left: 3%;
    height: 20%;
    top: 5%;
}
.Überschrift1{
    z-index: 3000;
    position: absolute;
    top: -400%;
    color: blue;
    font-size: 4.5vmin;
}
.linenav{
    border-bottom: linear-gradient(to right, #2c3e50, #bdc3c7);
    border-style: solid;
    border-left: rgba(0, 0, 0, 0);
    border-top: rgba(0, 0, 0, 0);
    border-right: rgba(0, 0, 0, 0);
    position: fixed;
    z-index:50000000;
    border-radius: 5px;
    border-width: 5px;
    top: 9.5%;
    width: 100%;
}
.underline{
    text-decoration: underline;
}
.geschichte{
    z-index: 5;
    position: absolute;
    top: 255%;
    left: 5%;
    font-size: 3vmin;
    color: white;
    font-family:'Source Sans Pro', sans-serif;
    right: 5%; 
    text-align: center; 
}
h4{
    color: turquoise;
    font-size: 5vmin;
}
h5{
    font-size: 3vmin;
}
.link{
    border-style: solid;
    border-left: hidden;
    border-right: hidden;
    border-top: hidden;
}
.link:hover{
    color: blue;
}
.wotxt{
    position: absolute;
    z-index: 9;
    height: 90%;
    color: rgb(0, 0, 0);
    padding: 3%;
    font-size: 2vw;
    font-family: 'Source Sans Pro', sans-serif;
    left: 0%;
    text-align: center;  
    width: 90%;
}
.wietxt{
    position: absolute;
    z-index: 9;
    height: 90%;
    color: rgb(0, 0, 0);
    padding: 3%;
    font-size: 1.8vw;
    font-family: 'Source Sans Pro', sans-serif;
    left: 0%;
    text-align: center;  
    width: 90%;
}
.wastxt{
    position: absolute;
    z-index: 9;
    height: 90%;
    color: rgb(0, 0, 0);
    padding: 3%;
    font-size: 2.2vw;
    font-family: 'Source Sans Pro', sans-serif;
    left: 0%;
    text-align: center;  
    width: 90%;
}