body{
    background-color: #222;
    font-size: 35px;
    font-family: 'Arimo', sans-serif;
    
    font-family: 'IBM Plex Mono', monospace;
}

input{
    display: none;
}

nav{
    z-index: 1000;
    font-size: 12px;
    font-weight: 500;
    position: relative;
    text-transform: uppercase;
    font-family: 'Roboto', sans-serif;
}
nav uli{
    left: 25vw;
    top: 50vh;
    position: relative;
    -webkit-perspective: 800;
    
}
nav uli lil{
    width: 100px;
    height: 30px;
    display: flex;
    position: absolute;
    justify-content: center;
    align-items: center;
    border-radius: 0px;
}

#sprech, #lage{
    display: none;
}
#leist{
    transform: 
        translateX(calc(-12vw - 50px))
        translateY(-40vh);
    box-shadow: 
        30px -10px 10px -5px rgba(0, 0, 0, 0.24);
    transition: .4s all ease;
}
#leist:hover{
    box-shadow: 
        15px -7px 10px -5px rgba(0, 0, 0, 0.5),
        inset -3px 2px 5px 0 rgba(0, 0, 0, .3);
    transition: .4s all ease;
}
#thera{
    transform: 
        translateX(calc(12vw - 50px))
        translateY(-40vh);
    box-shadow: 
        -30px -10px 10px -5px rgba(0, 0, 0, 0.24);
    transition: .4s all ease;
}
#thera:hover{
    box-shadow: 
        -15px -7px 10px -5px rgba(0, 0, 0, 0.5),
        inset 3px 2px 5px 0 rgba(0, 0, 0, .3);
    transition: .4s all ease;
}
#leben{
    transform: 
        translateX(calc(-18vw - 50px))
        translateY(-30vh);
    box-shadow: 
        20px -10px 10px -5px rgba(0, 0, 0, 0.3);
    transition: .4s all ease;

}
#leben:hover{
    box-shadow: 
        15px -7px 10px -5px rgba(0, 0, 0, 0.5),
        inset -2px 2px 5px 0 rgba(0, 0, 0, .3);
    transition: .4s all ease;
}
#publi{
    transform: 
        translateX(calc(18vw - 50px))
        translateY(-30vh);
    box-shadow: 
        -20px -10px 10px -5px rgba(0, 0, 0, 0.3);
    transition: .4s all ease;

}
#publi:hover{
    box-shadow: 
        -15px -7px 10px -5px rgba(0, 0, 0, 0.5),
        inset 2px 2px 5px 0 rgba(0, 0, 0, .3);
    transition: .4s all ease;
}
#links{
    transform: 
        translateX(-50px)
        translateY(30vh);
    box-shadow: 
        0px 25px 10px -5px rgba(0, 0, 0, 0.2);
    transition: .4s all ease;
}
#links:hover{
    box-shadow: 
        0px 15px 10px -5px rgba(0, 0, 0, 0.4),
        inset 0px -2px 5px 0 rgba(0, 0, 0, .3);
    transition: .4s all ease;

}
nav uli lil a{
    border-right: 1px solid rgb(182, 50, 239);
    border-left: 1px solid rgb(182, 50, 239);
    text-decoration: none;
    color: white;
    width: 110%;
    height: 100%;
    text-align: center;
    padding-top: 9px;
    transition: .4s all ease;
    background-image: linear-gradient(transparent,forestgreen,transparent);
    letter-spacing: 1px;
    cursor: pointer;

}
nav uli lil:hover{
    width: 90px;
    height: 25px;
}
nav uli lil a:hover{
    letter-spacing: 0px;
    padding-top: 7px;
    background-color: ;
    border-right: 1px solid black;
    border-left: 1px solid black;
    color: lawngreen;
    font-size: 11.5px;
    transition: .4s all ease;
    padding-left: 2 px;
    background-image: linear-gradient(transparent,rgb(182, 50, 239),transparent)
}










header{
    background-image:
        linear-gradient(
    90deg,transparent,rgba(148, 0, 211, 0.5) 10%, rgba(148, 0, 211, 0.5) 90%,transparent),
        linear-gradient(
    90deg,transparent,black 5%, black 95%,transparent) 
        ;
    padding: 5px;
    padding-left: 20px;
    padding-right: 20px;
    
    position: absolute;
    z-index: 10;
    font-family: 'Arimo', sans-serif;
    font-size: 36px;
    text-align: center;
    left: calc(3 / 4 * 100vw - 155px);
    top: 5vh;
    color: lawngreen;
    background-color: ;
    font-family: 'IBM Plex Serif', times, georgia, 
        serif;
    
    font-weight: 800;
    
}
header span{
    font-family: 'IBM Plex Serif', times, georgia, serif;
    
    font-family: 'IBM Plex Mono', monospace;
    font-size: 24px;
    display: block;
    font-weight: 400;
}
header span:nth-child(1){
    color: lawngreen;
}
header span:nth-child(2){
    
    position: absolute;
    top:85vh;
    font-weight: 600;
    font-size: 16px;
}

#leftsite{
    width: 50vw;
    height: 100vh;
    background-color: red;
    overflow: ;
}
#textecont{
    position: relative;
    width: 50vw;
    height: 100vh;
    background-color: darkgreen;
    -webkit-perspective: 800;
}



#textc1{
    position: absolute;
    width: 40vw;
    height: 80vh;
    transform:
        translateX(-17vw)
        translateY(10vh)
        translateZ(-50vw)
        rotateY(80deg);
    overflow: hidden;
    box-shadow: 
        20px 0 0 0 darkgreen,
        30px 0 10px -10px lawngreen,
        -10px 0 0 0 darkgreen,
        -19px 0 10px -10px lawngreen
        ;
    transition: .4s all ease;
}

   
#ilebe:checked ~ main #textc1{
    z-index: 10;
    width: 38vw;
    height: 33vw;
    transform:
        translateX(56vw)
        translateY(21vh)
        translateZ(0vw)
        rotateY(0deg);
    transition: 1s all ease;
    box-shadow: 
        0 0 0 0 darkgreen,
        0 0 0 0 lawngreen,
        0 0 0 0 darkgreen,
        0 0 0 0 lawngreen
        ;
    background-color: #047204;
    border: 10px solid rgb(54, 3, 60);
}
#ilebe:checked ~ main #text1{
    animation-play-state: paused;
    overflow: scroll;
    transform: translate(0);
    height: 100%;
    color: rgb(46, 0, 52);
    text-shadow: 0 0 rgb(74, 4, 83);
    font-size: 14px;
    padding-left: 20px;
    padding-right: 20px;
    line-height: 1.5em;
}
#text1::-webkit-scrollbar { 
    display: none; 
}
#ilebe:checked ~ main #transtext1{
            display: none;
}


#textc1:hover #text1,
#textc2:hover #text2,
#textc3:hover #text3,
#textc4:hover #text4
{
    color: rgba(225, 0, 255, 1);
    text-shadow: 0 0 0 lawngreen;
    transition: .4s all ease;
}

#textc1:hover
{
    z-index: 10;
    transform:
        translateX(-10vw)
        translateY(10vh)
        translateZ(-20vw)
        rotateY(70deg);
    transition: .4s all ease;
}

#textc2:hover
{
    transform:
        translateX(-3vw)
        translateY(10vh)
        translateZ(-20vw)
        rotateY(70deg)
        ;
    transition: .6s all ease;
}
#textc3:hover
{
    transform:
        translateX(17vw)
        translateY(10vh)
        translateZ(-20vw)
        rotateY(105deg)
        scale(-1,1);
    transition: .4s all ease;
}
#textc3:hover #text3
{
    transform:
        translate(-20vh,-50%)
        scale(1,1);
    transition: .4s all ease;
}


#textc4:hover
{
    z-index: 10;
    transform:
        translateX(21vw)
        translateY(10vh)
        translateZ(-20vw)
        rotateY(110deg)
        scale(-1,1);
    transition: .4s all ease;
    text-align: right;

}
#textc4:hover #text4
{
    transform:
        translate(0,-50%)
        scale(1,1);
    transition: .4s all ease;
}
#text1{
    position: absolute;
    animation: movetext1 120s infinite linear;
    font-weight: 700;
    color: #aaa;
    text-shadow: 0 0 3px lawngreen;
    transform: translate(0,-50%);
    transition: .4s all ease;
}
@keyframes movetext1{
    0%{}
    100%{
        transform: translate(0,0);
    }
}
#transtext1{
    position: absolute;
    width: 100%;
    height: 100%;
    transform:translate(0vh);
    background-color:;
    background-image: 
        linear-gradient(-90deg,darkgreen,transparent),
        linear-gradient(darkgreen,transparent 20%, transparent 80%,darkgreen)
        ;
}

#textc2{
    position: absolute;
    width: 40vw;
    height: 80vh;
    transform:
        translateX(-7vw)
        translateY(10vh)
        translateZ(-20vw)
        rotateY(85deg)
        ;
    overflow: hidden;
    box-shadow: 
        20px 0 0 0 darkgreen,
        30px 0 10px -10px lawngreen,
        -10px 0 0 0 darkgreen,
        -19px 0 10px -10px lawngreen
        ;
    transition: .6s all ease;
}

#ileist:checked ~ main #textc2{
    z-index: 100;
    width: 38vw;
    height: 33vw;
    transform:
        translateX(56vw)
        translateY(21vh)
        translateZ(0vw)
        rotateY(180deg)
        ;
    transition: 1.2s all ease;
    box-shadow: 
        0 0 0 0 darkgreen,
        0 0 0 0 lawngreen,
        0 0 0 0 darkgreen,
        0 0 0 0 lawngreen
        ;
    background-color: #047204;
    border: 10px solid rgb(54, 3, 60);
}
#ileist:checked ~ main #text2{
    animation-play-state: paused;
    overflow: scroll;
    transform: 
        translate(0)
        scale(-1.1,1);
    height: 100%;
    color: rgb(46, 0, 52);
    text-shadow: 0 0 rgb(74, 4, 83);
    font-size: 14px;
    padding-left: 20px;
    padding-right: 20px;
    line-height: 1.5em;
}
#text2::-webkit-scrollbar { 
    display: none; 
}
#ileist:checked ~ main #transtext2{
            display: none;
}



#text2{
    padding-left: 0;
    padding-right: 0;
    animation: movetext2 60s infinite linear;
    position: absolute;
    font-weight: 700;
    color: #aaa;
    text-shadow: 0 0 3px lawngreen;
    transform:
        translate(0,-50%)
        scale(1,1);
    transition: .4s all ease;
}
@keyframes movetext2{
    0%{}
    100%{
        transform: translate(0,0)
        scale(1,1);
    }
}
#transtext2{
    position: absolute;
    width: 100%;
    height: 100%;
    transform:translate(0vh);
    background-image: 
        linear-gradient(-90deg,darkgreen,transparent),
        linear-gradient(darkgreen,transparent 20%, transparent 80%,darkgreen)
        ;
}





#textc3{
    position: absolute;
    width: 40vw;
    height: 80vh;
    transform:
        translateX(18vw)
        translateY(10vh)
        translateZ(-20vw)
        rotateY(95deg)
        scale(-1,1);
    background-color: ;
    overflow: hidden;
    box-shadow: 
        10px 0 0 0 darkgreen,
        18px 0 10px -10px lawngreen,
        -20px 0 0 0 darkgreen,
        -29px 0 10px -10px lawngreen
        ;
    transition: .4s all ease;
}


#ithera:checked ~ main #textc3{
    z-index: 10;
    width: 38vw;
    height: 33vw;
    transform:
        translateX(56vw)
        translateY(21vh)
        translateZ(0vw)
        rotateY(180deg)
        scale(-1,1);
    transition: 1s all ease;
    box-shadow: 
        0 0 0 0 darkgreen,
        0 0 0 0 lawngreen,
        0 0 0 0 darkgreen,
        0 0 0 0 lawngreen
        ;
    background-color: #047204;
    border: 10px solid rgb(54, 3, 60);
}
#ithera:checked ~ main #text3{
    animation-play-state: paused;
    overflow: scroll;
    transform: translate(0);
    height: 100%;
    color: rgb(46, 0, 52);
    text-shadow: 0 0 rgb(74, 4, 83);
    font-size: 14px;
    padding-left: 20px;
    padding-right: 20px;
    line-height: 1.5em;
}
#text3::-webkit-scrollbar { 
    display: none; 
}
#ithera:checked ~ main #transtext3{
            display: none;
}


#text3{
    position: absolute;
    animation: movetext3 120s infinite linear;
    font-weight: 700;
    color: #aaa;
    text-shadow: 0 0 3px lawngreen;
/*    white-space: nowrap;*/
    background-color: ;
    transform: translate(0vh,-50%);
    transition: .4s all ease;
}
@keyframes movetext3{
    0%{}
    100%{
        transform: translate(0);
    }
}
#transtext3{
    position: absolute;
    width: 100%;
    height: 100%;
    transform:translate(0vh);
    background-color:;
    background-image: 
        linear-gradient(90deg,darkgreen,transparent),
        linear-gradient(darkgreen,transparent 20%, transparent 80%,darkgreen)
        ;
}


#textc4{
    position: absolute;
    width: 40vw;
    height: 80vh;
    transform:
        translateX(30vw)
        translateY(10vh)
        translateZ(-60vw)
        rotateY(100deg)
        scale(-1,1);
    background-color: ;
    overflow: hidden;
    box-shadow: 
        10px 0 0 0 darkgreen,
        18px 0 10px -10px lawngreen,
        -20px 0 0 0 darkgreen,
        -30px 0 10px -10px lawngreen
        ;
}
#text4{
    text-align: right;
    position: absolute;
    animation: movetext4 30s infinite linear;
    font-weight: 700;
    color: #aaa;
    text-shadow: 0 0 3px lawngreen;
/*    white-space: nowrap;*/
    background-color: ;
    transform:translate(0,-50%);
    transition: .4s all ease;
}
@keyframes movetext4{
    0%{}
    100%{
        transform: translate(0,0%);
    }
}
#transtext4{
    position: absolute;
    width: 100%;
    height: 100%;
    transform:translate(0vh);
    background-color:;
    background-image: 
        linear-gradient(90deg,darkgreen,transparent),
        linear-gradient(darkgreen,transparent 20%, transparent 80%,darkgreen)
        ;
}



#rightsite{
    width: 50vw;
    height: 100vh;
    position: absolute;
    right:0;
    top:0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-image: url(../src/a2.jpg);
    background-size: cover;
    background-position: center;
    overflow: hidden;
    z-index: 0;
}
#rightsitefilter{
/*    width: 230px;*/
    width: 50vw;
    height: 100vh;
    position: absolute;
    background-color: rgba(245, 0, 255, 0.1);
}
#picaugcont{
    width: 31vw;
    height: 31vw;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    position: relative;
    
    
}
#picaugkreis1{
    position: absolute;
    width: 30vw;
    height: 30vw;
    background-color: transparent;
    border-radius: 50%;
    border-top: 5px solid rgba(124, 252, 0, 0.8);
    animation: rotauge1 10s infinite linear;   
}
@keyframes rotauge1{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}
#picaugkreis2{
    position: absolute;
    width: 28vw;
    height: 28vw;
    border-radius: 50%;
    border-left: 4px solid rgba(124, 252, 0, 0.5);
/*
    box-shadow: 
        -1px -1px 0 .5px rgba(124, 252, 0, 0.5);
*/
    animation: rotauge2 15s infinite linear;   
}
@keyframes rotauge2{
    0%{transform: rotate(360deg);}
    100%{transform: rotate(0deg);}
}
#picaugkreis3{
    position: absolute;
    width: 26vw;
    height: 26vw;
    border-radius: 50%;
    border-left: 3px solid rgba(124, 252, 0, 0.8);
    animation: rotauge3 10s infinite linear;   
}
@keyframes rotauge3{
    0%{transform: rotate(0deg);}
    100%{transform: rotate(360deg);}
}

#picaugcont:hover div{
    border-color: rgba(225, 0, 255, 0.8);
}

#since19{
    position: absolute;
    width:200px;
    height:17px;
    text-align: center;
    color: white;
    background-color: green;
    font-size: 12px;
    top:27px;
    right:-78px;
    transform: rotate(60deg);
    border: 2px solid rgb(86, 0, 123);
}





    
#ilebe:checked ~ main #rightsite,
#ileist:checked ~ main #rightsite,
#ithera:checked ~ main #rightsite{
    z-index: -1;
}







kl{}