.st0{fill: hsl(359, 80%, 45%);}
.st1{fill: hsl(45, 100%, 42%);}
.st2{fill: hsl(45, 100%, 82%);}
.st3{fill: hsl(48, 100%, 50%);}
.st4{fill: hsl(8, 67%, 53%);}
.st5{fill: hsl(9, 85%, 49%);}
.st6{fill: hsl(5, 95%, 30%);}
.st7{clip-path:url(#SVGID_00000055707387828189263040000013772100602723322508_);fill: hsl(48, 100%, 50%);}
.st8{fill: hsl(14, 83%, 57%);}
.st9{fill: hsl(20, 86%, 75%);}
.st10{fill: hsl(7, 100%, 20%);}
.st11{fill: hsl(11, 67%, 58%);}
.st12{fill: hsl(40, 72%, 76%);}
.st13{fill: hsl(42, 71%, 62%);}
.st14{clip-path:url(#SVGID_00000077300545855898217420000006145647009462730936_);fill: hsl(48, 100%, 50%);}
.eyes{fill: hsl(48, 100%, 50%);}

.left.st6{background: hsl(5, 95%, 30%);}
.right.st10{background: hsl(7, 100%, 20%);}
.eyes{
    position: relative;
}

.pupille{
    position: absolute;
}

body{
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100vh;
    width: 100vw;
    margin: 0;
    padding: 0;
    position: relative;
}

#logoContainer{
    width: 20vw;
    height: auto;
    position: relative;
    z-index: 1;
}

#logo{
    max-width: 100%;
    width: 100%;
}

.left{
    position: absolute;
    top: 0;
    left: 0;
    width: 50vw;
    height: 100vh;
    z-index: 0;
}

.right{
    position: absolute;
    top: 0;
    left: 50vw;
    width: 50vw;
    height: 100vh;
    z-index: 0;
}

#schriftzug{
    position: absolute;
    top: 80%;
    height: auto;
    width: 55vw;
}

.schriftzugFarbe{
    fill: #FFF;
}
@media only screen and (max-width: 1024px) {
    #logoContainer{
        width: 45vw;
    }

    #schriftzug{
        top: 90%;
        width: 55vw;
    }
}

@media only screen and (max-width: 680px) {
    #logoContainer{
        width: 65vw;
    }

    #schriftzug{
        top: 90%;
        width: 75vw;
    }
}