.body {
    background-color: rgb(236, 232, 232);
    margin: 0;
}

.schrift {
    position: fixed;
    margin: 0;
}

.text-1 {
    font-size: 20px;
    width: 80 vw;
    position: fixed;
    left: 1vw;
    top: 1vw;
    margin: 0;
    text-shadow: 3px 3px 5px magenta;
}

.text-2 {
    font-size: 20px;
    width: 20 vw;
    position: fixed;
    right: 1vw;
    top: 1vw;
    margin: 0;
    text-shadow: 3px 3px 5px magenta;
}

.comingup {
    z-index: 2;
    width: 13vw;
    height: 20vw;
    position: fixed;
    top: 10vh;
    left:45vw;
    box-shadow: 5px 5px 5px inset 0px rgb(111, 111, 255);
    background-color: white;
}

.scrolling-text-container {
    position: fixed;
    margin: 0;
    bottom: 1vh;
    left: 2.5vw;
    right: 2.5vw;
    border-radius: 4px;
    overflow: hidden;
}
.scrolling-text-container-2 {
    position: fixed;
    margin: 0;
    top: 10vh;
    left: 0vw;
    overflow: visible;
    width: 50vw;
}
.scrolling-text-container-3 {
    position: fixed;
    margin: 0;
    top: 10vh;
    left: 50vw;
    overflow: visible;
    width: 50vw;
}


.scrolling-text-inner {
    display: flex;
    white-space: normal;
}


.scrolling-text {
    display: flex;
}

.scrolling-text-inner>div {
    animation: var(--direction) var(--marquee-speed) linear infinite;
}

.gross {
    font-family: destra;
    color: white;
    text-shadow: 2px 2px 5px black;
    font-size: 40px;
}

.klein {
    font-family: authentic sans;
    color: magenta;
    font-size: 20px;
}

.gross:hover{
    text-shadow: 2px 2px 5px magenta;
    font-size: 45px;
}

.untenlinks {
    text-align: left;
    margin-right: 27.5vw;
    width: 35vw;
}

.untenrechts {
    text-align: right;
}

.link-box {
    width: 20vw;
    position: absolute;
    top: 20vw;
    left: 20vw;
    z-index: 1;
}

.link-box:hover {
    box-shadow: 2px 2px 5px magenta;
}

.dreh {
    animation: turner 20s infinite linear;
}

.dreh-schnell {
    animation: turner 10s infinite linear;
}

.img {
    position: absolute;
}

.full {
    max-width: 100vw;
    max-height: 100vh;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    margin: 0;
}

.small {
    max-width: 30vw;
    max-height: 60vw;
}

.prtfl-img {
    width: 100vw;
    height: 100vh;
    position: absolute;
    top: 0;
    left: 0;
}

.slideshow-container {
    position: fixed;
    width: 100vw;
    height: 100vh;
    left: 0;
    display: flex;
    justify-content: center;
    align-items: center;
}

.slide {
    display: none;
}

.slideshow-container-2 {
    position: fixed;
    width: 30vw;
    height: 60vw;
    top: 40vh;
    right: 10vw;
}

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

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


@keyframes scroll-left {
    0%{
        transform: translateX(0%);
    }
    100%{
        transform: translateX(-100%);
    }
}

@keyframes scroll-right {
    0% {
        transform: translateX(-100%);
    }
    100% {
        transform: translateX(0%);
    }
}


@keyframes turner{
    from{ transform: rotateY(0deg) }
    to{transform: rotateY(360deg)}
}