@import url('https://fonts.googleapis.com/css2?family=Staatliches&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300&display=swap');


/*__BASIC_________________________________________________________*/

* {
    font-family: staatliches;
}

html,
body {
    scroll-behavior: smooth;
}

body {
    padding         : 0;
    margin          : 0;
    background-color: black;
}


.normal {
    color          : white;
    font-size      : 6rem;
    display        : flex;
    justify-content: center;
    align-content  : center;
    text-align     : center;
    padding-left   : 50px;
    padding-right  : 50px;

    /*border: solid 3px rgb(255, 0, 255);*/
}


@media screen and (max-width: 768px) {
    body {
        background-color: rgb(255, 255, 255);
    }

    .normal {
        color    : rgb(0, 0, 0);
        font-size: 3rem;
    }
}


@media screen and (min-width: 1300px) {
    .normal {
        font-size: 8rem;
    }
}









/*_NAVIGATION________________________________________________________________*/

.nav {
    display         : flex;
    justify-content : center;
    background-color: rgb(255, 255, 255);
    text-align      : left;
    padding         : 10px 10px 10px 10px;
}

.nav li {
    flex-basis     : 0%;
    flex-grow      : 1;
    list-style-type: none;
    font-size      : 1.5rem;
}

.nav li a {
    color          : rgb(0, 0, 0);
    text-decoration: none;
    padding-left   : 20px;

}

.nav li a:hover {
    text-decoration-line: overline;
}


button {
    font-size       : 1.5rem;
    margin          : 0;
    padding-left    : 20px;
    border          : solid 0px white;
    background-color: rgba(0, 0, 0, 0);
    color           : rgb(255, 255, 255);
    mix-blend-mode  : difference;
    position        : fixed;
}

button:hover {
    text-decoration-line: overline;
    cursor              : pointer;
}


@media screen and (max-width: 768px) {
    .nav {
        background-color: rgb(0, 0, 0);
    }

    .nav li a {
        color    : rgb(255, 255, 255);
        font-size: 1.5rem;

    }

    button {
        background-color: rgba(0, 0, 0, 0);
        font-size       : 1.5rem;
    }
}




@media screen and (min-width: 1300px) {

    .nav li {
        font-size: 2rem;
    }


    button {
        font-size       : 2rem;
        padding-bottom  : 5px;
        background-color: rgba(255, 255, 255, 0);
    }
}







/*__ABSTÄNDE_________________________________________________________*/


.abstand_gross {
    height  : 50vh;
    /*border: dotted 3px rgb(65, 65, 65);*/
}

.abstand_klein {
    height  : 20vh;
    /*border: dotted 3px rgb(170, 96, 96);*/
}

@media screen and (max-width: 768px) {

    .abstand_gross {
        height  : 30vh;
        /*border: dotted 3px rgb(65, 65, 65);*/
    }

    .abstand_klein {
        height  : 10vh;
        /*border: dotted 3px rgb(170, 96, 96);*/
    }
}










/*__ANIMATIONEN BEGINN_________________________________________________________*/

.animation1,
.animation2,
.animation3,
.animation4,
.animation5 {

    color          : white;
    font-size      : 6rem;
    display        : flex;
    justify-content: center;
    align-content  : center;
    text-align     : center;
    padding-left   : 50px;
    padding-right  : 50px;
    margin         : 0;
}



@media screen and (max-width: 768px) {

    .animation1,
    .animation2,
    .animation3,
    .animation4,
    .animation5 {
        color    : rgb(0, 0, 0);
        font-size: 3rem;
    }
}


@media screen and (min-width: 1300px) {

    .animation1,
    .animation2,
    .animation3,
    .animation4,
    .animation5 {
        font-size: 8rem;
    }
}








/*__MOND_________________________________________________________*/

.himmel {
    display        : flex;
    justify-content: center;
    align-items    : center;
    align-content  : center;
    height         : 90vh;
    flex-grow      : 0;
    flex-shrink    : 0;
}


.mond_aussen {
    height           : 100vh;
    width            : 100vh;
    display          : flex;
    justify-content  : center;
    flex-direction   : column;
    /*border         : solid 3px rgb(83, 255, 241);*/
}


.mond {
    background-color           : rgb(255, 255, 255);
    border-radius              : 50%;
    height                     : 100vh;
    width                      : 100vh;
    display                    : flex;
    justify-content            : center;
    flex-direction             : column;
    /*border                   : solid 3px rgb(83, 255, 241);*/
    animation-name             : mond;
    animation-duration         : 10s;
    animation-timing-function  : ease-in-out;
    animation-iteration-count  : 1;
}


@keyframes mond {
    0% {
        height: 5vh;
        width : 5vh;
    }

    40% {
        height: 5vh;
        width : 5vh;
    }

    100% {
        height: 100vh;
        width : 100vh;
    }
}


@media screen and (max-width: 768px) {
    .mond_aussen {
        height: 50vh;
        width : 50vh;
    }

    .mond {
        background-color: rgb(0, 0, 0);
        height          : 50vh;
        width           : 50vh;
        flex-grow       : 0;
        flex-shrink     : 0;
        padding         : 20px;
        animation       : mond_klein 10s ease-in-out 1;
    }
}

@keyframes mond_klein {
    0% {
        height: 1vh;
        width : 1vh;
    }

    40% {
        height: 1vh;
        width : 1vh;
    }

    100% {
        height: 50vh;
        width : 50vh;
    }
}

@media screen and (min-width: 1300px) {

    .himmel {
        height: 100vh;
    }

    .mond_aussen {
        height: 100vh;
        width : 100Vh;
    }

    .mond {
        background-color: rgb(255, 255, 255);
        height          : 100vh;
        width           : 100vh;
        flex-grow       : 0;
        flex-shrink     : 0;
        padding         : 20px;
        animation       : mond_gross 10s ease-in-out 1;

    }

}

@keyframes mond_gross {
    0% {
        height: 4vh;
        width : 4vh;
    }

    50% {
        height: 4vh;
        width : 4vh;
    }

    100% {
        height: 100vh;
        width : 100vh;
    }
}



.oben,
.unten {
    display       : flex;
    flex-direction: row;
    height        : 50vh;
    align-items   : flex-end;
    padding-bottom: 15px;
    flex-grow     : 0;
    flex-shrink   : 0;
}

.oben {
    align-items  : flex-end;
    /*border     : solid 1px rgb(255, 0, 200);*/

}

.unten {
    align-items  : flex-start;
    /*border     : solid 1px rgb(234, 255, 47);*/
}

.right,
.left {
    flex-basis : 50%;
    flex-grow  : 0;
    flex-shrink: 0;
    display    : flex;

}

.right {
    transform    : translate(-22px, 40px);
    /*border     : dotted 3px rgb(47, 85, 255);*/
    align-items  : flex-end;

}


.left {
    transform    : translateX(20px);
    /*order      : dotted 3px rgb(255, 0, 0);*/
    align-items  : flex-end;

}

@media screen and (max-width: 768px) {


    .oben {
        height        : 25vh;
        padding-bottom: 20px;
    }

    .unten {
        height : 25vh;
        padding: 0;
    }

    .right {
        transform: translate(-10px, 40px);
    }

    .left {
        transform: translateX(10px);
    }
}

@media screen and (min-width: 1300px) {


    .oben {
        height        : 100vh;
        padding-bottom: 60px;
    }

    .unten {
        height : 100vh;
        padding: 0;
    }

    .right {
        transform: translate(-10px, 40px);
    }

    .left {
        transform: translateX(10px);
    }
}



.mond-klein_left {
    color       : black;
    font-size   : 2rem;
    padding-left: 0px;
    margin      : 0;
    text-align  : right;
}

.mond-klein_left_abstand {
    color       : rgba(0, 0, 0, 0);
    font-size   : 2rem;
    padding-left: 30px;
    margin      : 0;
    text-align  : right;
}

.mond-klein_right {
    color        : black;
    font-size    : 2rem;
    padding-right: 50px;
    margin       : 0;
}

.mond-gross_left {
    color      : black;
    font-size  : 15rem;
    padding    : 0;
    margin     : 0;
    line-height: 73%;
    text-align : right;
}

.mond-gross_right {
    color      : black;
    font-size  : 15rem;
    padding    : 0;
    margin     : 0;
    line-height: 73%;
}


@media screen and (max-width: 768px) {


    .mond-gross_left,
    .mond-gross_right {
        color    : rgb(255, 255, 255);
        font-size: 7rem;
    }

    .mond-klein_left {
        color       : rgb(255, 255, 255);
        font-size   : 1rem;
        padding-left: 10px;
    }

    .mond-klein_left_abstand {
        color    : rgba(0, 0, 0, 0);
        font-size: 1rem;

    }

    .mond-klein_right {
        color      : rgb(255, 255, 255);
        font-size  : 1rem;
        white-space: nowrap;
    }

    .right {
        transform: translate(-10px, 20px);
    }
}


@media screen and (min-width: 1300px) {

    .mond-gross_left,
    .mond-gross_right {
        color    : rgb(0, 0, 0);
        font-size: 20rem;
    }

    .mond-klein_left {
        color       : rgb(0, 0, 0);
        font-size   : 3rem;
        padding-left: 10px;
    }

    .mond-klein_left_abstand {
        color    : rgba(255, 255, 255, 0);
        font-size: 1rem;

    }

    .mond-klein_right {
        color      : rgb(0, 0, 0);
        font-size  : 3rem;
        white-space: nowrap;
    }

    .right {
        transform: translate(-48px, 50px);
    }
}








/*__LAAAANG_________________________________________________________*/

.lang1 {
    color          : white;
    font-size      : 6rem;
    display        : flex;
    justify-content: center;
    align-content  : center;
    text-align     : center;
    white-space    : nowrap;

    padding-left   : 50px;
    padding-right  : 50px;
    animation      : lang 10s ease-in-out infinite;
    animation-delay: 1s;

}

.lang2 {
    color          : white;
    font-size      : 6rem;
    display        : flex;
    justify-content: center;
    align-content  : center;
    text-align     : center;
    white-space    : nowrap;

    padding-left   : 50px;
    padding-right  : 50px;
    animation      : lang 10s ease-in-out infinite;
    animation-delay: 2s;
}

.lang3 {
    color          : white;
    font-size      : 6rem;
    display        : flex;
    justify-content: center;
    align-content  : center;
    text-align     : center;
    white-space    : nowrap;

    padding-left   : 50px;
    padding-right  : 50px;
    animation      : lang 10s ease-in-out infinite;
    animation-delay: 3s;
}

@keyframes lang {
    0% {

        letter-spacing: 0;
    }

    15% {

        letter-spacing: 0;
    }

    50% {
        transform       : skewY(10deg);
        transform-origin: center;
        letter-spacing  : 0.5em;
        opacity         : 20%;
    }

    85% {

        letter-spacing: 0;
    }

    100% {
        letter-spacing: 0;
    }

}

@media screen and (max-width: 768px) {

    .lang1,
    .lang2,
    .lang3 {
        color    : rgb(0, 0, 0);
        font-size: 3rem;
    }

}


@media screen and (min-width: 1300px) {

    .lang1,
    .lang2,
    .lang3 {
        font-size: 8rem;
    }

}








/*__GROSS_________________________________________________________*/

.white_background {
    height          : 60vh;
    font-size       : 6rem;
    display         : flex;
    align-items     : center;
    flex-direction  : column;
    background-color: white;
    color           : rgb(0, 0, 0);
    /*border        : solid 3px rgb(255, 0, 255);*/
}

.white_up {
    display    : flex;
    padding-top: 50px;
    align-items: center;
    text-align : center;
    white-space: nowrap;
    /*border   : solid 3px rgb(255, 0, 255);
    position   : absolute;*/
}

.white_down {
    display    : flex;
    padding-top: 140px;
    align-items: center;
    text-align : center;
    /*border   : solid 3px rgb(255, 0, 255);*/
}

.white_gross {
    color                    : rgb(0, 0, 0);
    padding-top              : 180px;
    display                  : flex;
    justify-content          : center;
    align-items              : center;
    text-align               : center;
    position                 : absolute;
    /*border                 : solid 3px rgb(255, 0, 255);*/
}

.white_gross:hover {
    padding-top        : 150px;
    font-size          : 500%;
    transition-duration: 4s;
}


@media screen and (max-width: 768px) {
    .white_background {
        height          : 40vh;
        background-color: rgb(0, 0, 0);
        color           : rgb(255, 255, 255);
        font-size       : 3rem;
        /*border        : solid 3px rgb(255, 0, 255);*/
    }

    .white_up {
        padding-top: 50px;
    }

    .white_down {
        padding-top: 100px;
    }

    .white_gross {
        padding-top: 130px;
        color      : rgb(255, 255, 255);
    }

    .white_gross:hover {
        padding-top        : 90px;
        font-size          : 700%;
        transition-duration: 3s;
    }
}

@media screen and (min-width: 1300px) {
    .white_background {
        height   : 75vh;
        font-size: 8rem;
    }

    .white_up {
        padding-top: 50px;
    }

    .white_down {
        padding-top: 160px;
    }

    .white_gross {
        padding-top: 210px;
    }

    .white_gross:hover {
        padding-top        : 90px;
        font-size          : 600%;
        transition-duration: 5s;
    }
}










/*__ROTATE_________________________________________________________*/

.trigger,
.eins,
.zwei,
.drei,
.vier,
.funf,
.sechs,
.sieben,
.acht,
.neun,
.zehn,
.elf,
.zwolf,
.dreizehn,
.vierzehn,
.funfzehn,
.sechzehn {
    display                      : flex;
    flex-direction               : row;
    transition-property          : all;
    transition-duration          : 3s;
    transition-timing-function   : cubic-bezier(0.25, 0.45, 0.45, 0.95);
    -o-transition-timing-function: infinite;

}

.trigger:hover .eins {
    transform       : rotate(360deg);
    transform-origin: right bottom;
    transition-delay: 0s;
}

.trigger:hover .zwei {
    transform       : rotate(360deg);
    transform-origin: right bottom;
    transition-delay: 0.2s;
}

.trigger:hover .drei {
    transform       : rotate(360deg);
    transform-origin: right bottom;
    transition-delay: 0.4s;
}

.trigger:hover .vier {
    transform       : rotate(360deg);
    transform-origin: right bottom;
    transition-delay: 0.6s;
}

.trigger:hover .funf {
    transform       : rotate(360deg);
    transform-origin: right bottom;
    transition-delay: 0.8s;
}

.trigger:hover .sechs {
    transform       : rotate(360deg);
    transform-origin: right bottom;
    transition-delay: 1s;
}

.trigger:hover .sieben {
    transform       : rotate(360deg);
    transform-origin: right bottom;
    transition-delay: 1.2s;
}

.trigger:hover .acht {
    transform       : rotate(360deg);
    transform-origin: right bottom;
    transition-delay: 1.4s;
}

.trigger:hover .neun {
    transform       : rotate(360deg);
    transform-origin: right bottom;
    transition-delay: 1.6s;
}

.trigger:hover .zehn {
    transform       : rotate(360deg);
    transform-origin: right bottom;
    transition-delay: 1.8s;
}

.trigger:hover .elf {
    transform       : rotate(360deg);
    transform-origin: right bottom;
    transition-delay: 2s;
}

.trigger:hover .zwolf {
    transform       : rotate(360deg);
    transform-origin: right bottom;
    transition-delay: 2.2s;
}

.trigger:hover .dreizehn {
    transform       : rotate(360deg);
    transform-origin: right bottom;
    transition-delay: 2.4s;
}

.trigger:hover .vierzehn {
    transform       : rotate(360deg);
    transform-origin: right bottom;
    transition-delay: 2.6s;
}

.trigger:hover .funfzehn {
    transform       : rotate(360deg);
    transform-origin: right bottom;
    transition-delay: 2.8s;
}

.trigger:hover .sechzehn {
    transform       : rotate(360deg);
    transform-origin: right bottom;
    transition-delay: 3s;
}


/*__KLEIN_________________________________________________________*/

.klein {
    color          : white;
    font-size      : 2rem;
    display        : flex;
    justify-content: center;
    align-content  : center;
    text-align     : center;
    padding-left   : 50px;
    padding-right  : 50px;

}

@media screen and (max-width: 768px) {
    .klein {
        color    : rgb(0, 0, 0);
        font-size: 1.5rem;
    }

}


@media screen and (min-width: 1300px) {
    .klein {
        font-size: 3rem;
    }

}




/*__U_JITZ_________________________________________________________*/


.u_jitz {
    color          : white;
    font-size      : 6rem;
    display        : flex;
    justify-content: center;
    align-content  : center;
    text-align     : center;
    white-space    : nowrap;

    padding-left : 50px;
    padding-right: 50px;
    animation    : u_jitz 10s ease-in-out infinite;
}


@media screen and (max-width: 768px) {
    .u_jitz {
        color    : rgb(0, 0, 0);
        font-size: 3rem;
    }

}

@media screen and (min-width: 1300px) {
    .u_jitz {
        color    : rgb(255, 255, 255);
        font-size: 8rem;
    }
}



@keyframes u_jitz {
    0% {
        letter-spacing: 2em;

    }

    30% {
        letter-spacing: 0em;

    }

    50% {
        letter-spacing: 0em;

    }

    70% {
        letter-spacing: 0em;

    }

    100% {
        letter-spacing: 2em;
    }

}










/*__NACHT_________________________________________________________*/

.nacht_container {
    display        : flex;
    flex-direction : row;
    letter-spacing : 0;
    width          : 100%;
    justify-content: center;
    align-content  : center;
    text-align     : center;
}

.nacht_a {
    color         : white;
    opacity       : 100%;
    font-size     : 6rem;
    display       : flex;
    flex-direction: row;
    /*border      : solid 3px rgb(255, 0, 255);*/
}

.nacht_a:hover {
    color  : white;
    opacity: 20%;
}

.nacht {
    color         : white;
    opacity       : 20%;
    font-size     : 6rem;
    display       : flex;
    flex-direction: row;
    /*border      : solid 3px rgb(255, 0, 255);*/
}

.nacht:hover {
    color  : white;
    opacity: 100%;
}


@media screen and (max-width: 768px) {
    .nacht {
        color    : black;
        opacity  : 20%;
        font-size: 3rem;
    }

    .nacht:hover {
        color  : rgb(0, 0, 0);
        opacity: 100%;
    }

    .nacht_a {
        color    : black;
        opacity  : 100%;
        font-size: 3rem;
    }

    .nacht_a:hover {
        color  : rgb(0, 0, 0);
        opacity: 20%;
    }

}


@media screen and (min-width: 1300px) {

    .nacht,
    .nacht_a {
        font-size: 8rem;
    }
}










/*__ROT_________________________________________________________*/

.red {
    height            : 80vh;
    display           : flex;
    justify-content   : center;
    align-items       : center;
    text-align        : center;
    flex-direction    : column;
    background-color  : rgb(255, 255, 255);
    color             : rgb(255, 0, 34);
    padding-left      : 50px;
    padding-right     : 50px;
    /*border          : solid 3px rgb(255, 0, 255);*/

}


.animation6,
.animation7,
.animation8 {
    font-size: 6rem;
    margin   : 0;
}



@media screen and (max-width: 768px) {

    .animation6,
    .animation7,
    .animation8 {
        font-size       : 3rem;
        background-color: rgb(255, 0, 34);
        color           : rgb(0, 0, 0);
        margin          : 0;
    }

    .red {
        height          : 50vh;
        background-color: rgb(255, 0, 34);
        color           : rgb(255, 255, 255);

    }
}

@media screen and (min-width: 1300px) {

    .animation6,
    .animation7,
    .animation8 {
        font-size: 8rem;
    }
}













/*__FIRE & HEART_________________________________________________________*/

.fire {
    color          : rgb(255, 255, 255);
    font-size      : 6rem;
    display        : flex;
    justify-content: center;
    align-content  : center;
    text-align     : center;
    padding-left   : 50px;
    padding-right  : 50px;
    padding-top    : 100px;
}

.fire:hover {
    text-shadow        : 0 -1px 4px #FFF, 0 -2px 10px #ff0, 0 -10px 20px #ff8000, 0 -18px 40px #F00;
    transition-duration: 1s;
}


.herz {
    height               : 70vh;
    background-image     : url(../media/Herz_rot.svg);
    background-position  : center;
    background-repeat    : no-repeat;
    background-size      : auto;
    background-attachment: fixed;
}

@media screen and (max-width: 768px) {
    .fire {
        height   : 50vh;
        font-size: 3rem;
        color    : rgb(255, 255, 255);

    }

    .herz {
        height               : 50vh;
        background-image     : url(../media/Herz_schwarz.svg);
        background-position  : center;
        background-repeat    : no-repeat;
        background-size      : auto;
        background-attachment: fixed;
    }
}

@media screen and (min-width: 1300px) {
    .fire {
        height   : 90vh;
        font-size: 8rem;
        color    : rgb(255, 255, 255);

    }

    .herz {
        height               : 90vh;
        background-image     : url(../media/Herz_rot.svg);
        background-position  : center;
        background-repeat    : no-repeat;
        background-size      : auto;
        background-attachment: fixed;
    }
}






/*__WEISS_________________________________________________________*/

.weiss {
    height            : 80vh;
    font-size         : 6rem;
    display           : flex;
    justify-content   : center;
    align-items       : center;
    text-align        : center;
    background-color  : rgb(255, 255, 255);
    color             : rgb(0, 0, 0);
    padding-left      : 50px;
    padding-right     : 50px;
    /*border-radius   : 0% 0% 50% 50%;*/
    /*border          : solid 3px rgb(255, 0, 255);*/

}

@media screen and (max-width: 768px) {
    .weiss {
        height          : 50vh;
        font-size       : 3rem;
        background-color: rgb(0, 0, 0);
        color           : rgb(255, 255, 255);

    }

}

@media screen and (min-width: 1308px) {
    .weiss {
        height   : 100vh;
        font-size: 8rem;

    }

}










/*__UP_________________________________________________________*/

html {
    scroll-behavior: smooth;
}


.up_container {
    display        : flex;
    justify-content: center;
    align-content  : center;
    text-align     : center;

}


.up {
    display         : flex;
    justify-content : center;
    align-content   : center;
    text-align      : center;
    width           : 60px;
    height          : 60px;
    border-radius   : 50%;
    background-color: rgb(255, 255, 255);
    opacity         : 30%;

}

.up:hover {
    opacity: 100%;
}


@media screen and (max-width: 768px) {
    .up {
        background-color: rgb(255, 0, 34);
        opacity         : 30%;
    }
}