@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro&display=swap');

body{
    background-color: rgb(15, 20, 85); }
.bg1{
    width: 100%;
    height: 100%;
    z-index: -2;
    position: absolute;
    visibility: hidden;
}
.kastenÜber{
    z-index: 5;
    position: absolute;
    top: 25%;
    left: 5%;
    border-style: solid;
    border-radius: 5px;
    border-width: 5px;
    border-color: black;
    background-color: white;
    width: 50%;
    height: 30%;
    box-shadow: 10px 10px 15px  rgb(119, 119, 119);
}
.künstlichÜ{
    z-index: 5;
    position: absolute;
    color: black;
    font-size: 9.5vmin;
    top: 40px;
    top: 10%;
    left: 5%;
    font-family: 'Source Sans Pro', sans-serif;
}
.strasse{
    z-index: 5;
    position: absolute;
    color: black;
    font-size: 9.5vmin;
    top: 25%;
    left: 32%;
    font-family: 'Source Sans Pro', sans-serif;
    text-align: center;
}
.fa{
    color: rgb(73, 115, 255);
}
.underline{
    text-decoration: underline;
}
.line1{
    position: absolute;
    z-index: 5;
    width: 10%;
    height:5px;
    left: 45.5%;
    top: 25%;
    animation: bewegung 3s infinite;
    animation-timing-function: linear;
}
.line2{
    position: absolute;
    z-index: 5;
    width: 10%;
    height: 5px;
    top: 55.59%;
    left: 5%;
    animation: bewegung1 3s infinite;
    animation-timing-function: linear;
}
@keyframes bewegung{
    10%{
        left:37%;
    }
    20%{
        left: 29%;
    }
    30%{ 
        left: 21%;
       }
    40%{ 
        left: 13%;
    }
    50%{
        left: 5%;
    }
    60%{
        left: 13%;
    }
    70%{
        left:21%;
    }
    80%{
        left: 29%;
    }
    90%{
        left: 37%;
    }
    100%{
        left:45.5%;
    }
}
@keyframes bewegung1{
    10%{
        left:13%;
    }
    20%{
        left:21%;
    }
    30%{ 
        left:29%;
       }
    40%{ 
        left:37%;
    }
    50%{
        left:45.5%;
    }
    60%{
        left:37%;
    }
    70%{
        left:29%;
    }
    80%{
        left:21%;
    }
    90%{
        left:13%;
    }
    100%{
        left:5%;
    }
}
.einleitung{
    z-index: 5;
    position: absolute;
    color: white;
    top: 60%;
    left: 5%;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 4vmin;
    right: 55%;
}
.tesla{
    z-index: 4;
    left: 60%;
    width: 40%;
    height: 100%;
    position: absolute;
}
.funktionen{
    z-index: 5;
    position: absolute;
    top: 110%;
    left: 2%;
    right: 2%;
    font-size: 3vmin;
    color: white;
    font-family: 'Source Sans Pro', sans-serif;
    text-align: center;
}
.auswirkung{
    z-index: 5;
    position: absolute;
    top: 215%;
    left: 2%;
    right: 2%;
    font-size: 3vmin;
    color:white;
    font-family: 'Source Sans Pro', sans-serif;
    text-align: center;
}
h4{
    color: turquoise;
    font-size: 5vmin;
}
.überschrift2{
    position: absolute;
    top: -80%;
}
.tabelle1{
    z-index: 5;
    position: absolute;
    top: 410%;
    width: 100%;
    left: 5%;
    right: 5%;
    width: 90%;
    color: white;
    font-size: 3vmin;
    font-family: 'Source Sans Pro', sans-serif;
}
.ende{
    top: 4650px;
}
.car1{
    position: absolute;
    top: 170%;
    border-style: solid;
    border-width: 5px;
    width: 40%;
    right: 30%;
}
.autonom{
    z-index: 5;
    position: absolute;
    top: 255%;
    left: 2%;
    right: 2%;
    font-size: 3vmin;
    color:white;
    font-family: 'Source Sans Pro', sans-serif;
    text-align: center;
}
.roadster{
    position: absolute;
    top: 330%;
    border-style: solid;
    border-width: 5px;
    width: 60%;
    right: 20%;
}
.roadster_txt{
    left: 19.7%;
    position: absolute;
    top: 395%;
    font-family: 'Source Sans Pro', sans-serif;
    font-size: 2.7vmin;
    color: white;
}
.umwelt{
    z-index: 4;
    width: 18%;
    height: 25%;
    top: 230%;
    left: 40%;
    position: absolute;
}