body {
    display: flex;
    size: cover;
    flex-wrap: wrap;
    margin: 0;
    background-color: black;
    overflow: hidden;

    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

.about {
    position: relative;
    width: fit-content;
    float: left;
    height: 9.9vh;
    /*  padding-left: 1vw;    */
    font: 2vw Arial, sans-serif;
    line-height: 9.9vh;
    cursor: pointer;
    color: white;
    z-index: 100000 !important;
}

@media (max-width: 1200px) {
    .about {
        font-size: 25px;
    }
}

@media (max-width: 768px) {
    .about {
        font-size: 20px;
    }
}

#content {
    display: none;
    position: fixed;
    width: 85vw;
    height: 100vh;
    padding-left: 15vw;
    right: 0vw;
    top: 0;
    padding-top: 9.8vh;
    background-color: black;
    cursor: auto;
    z-index: -1 !important;
}

.about:hover {
    font-style: italic;
}

#index {
    position: relative;
    width: fit-content;
    float: left;
    height: 9.9vh;
    padding-left: 6vw;
    padding-right: 5vw;
    font: 2vw Arial, sans-serif;
    line-height: 9.9vh;
    cursor: pointer;
    color: white;
    z-index: 1000000 !important;
}

#reload {
    position: relative;
    width: fit-content;
    float: left;
    padding-left: 5vw;
    font: 1.5vw Arial, sans-serif;
    line-height: 10vh;
    text-align: center;
    margin-top: -0.1vh;
    color: white;
    /*    background-color: black;*/
    cursor: pointer;
    z-index: 100000 !important;
}

@media (max-width: 1200px) {
    #reload {
        font-size: 20px;
    }
}

@media (max-width: 1200px) {
    #index {
        font-size: 25px;
    }
}

@media (max-width: 768px) {
    #index {
        font-size: 20px;
    }
}

#index:hover {
    font-style: italic;
}

p {
    margin: 0;
    padding-right: 25vw;
    font: 2vw Arial, sans-serif;
    line-height: 125%;
    color: white;
}

@media (max-width: 1200px) {
    p {
        font-size: 25px;
        padding-right: 10vw;
    }
}

@media (max-width: 768px) {
    p {
        padding-top: 0vh;
        font-size: 20px;
        padding-right: 5vw;
    }
}


#breakFree {
    position: absolute;
    top: 40%;
    left: 75%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    color: white;
    font-family: Arial black;
    font-size: 3vw;
    transform: rotate(-20deg);
    z-index: -100;
}

#breakFree2 {
    position: absolute;
    top: 40%;
    left: 75%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    color: white;
    font-family: Arial black;
    font-size: 3vw;
    transform: rotate(-20deg);
    z-index: -100;
    opacity: 0;
    animation: breakFree 20s infinite;
    animation-timing-function: linear;
    animation-direction: alternate;
}

@keyframes breakFree {
    from {
        opacity: 0;
        z-index: -100;
    }

    to {
        opacity: 1;
        z-index: 1000;
    }
}

#wild {
    position: absolute;
    font-size: 1vw;
    max-width: 20vw;
    top: 0%;
    animation: animation3 4s infinite;
    animation-direction: alternate;
    transition: all 1s ease !important;


    font-family: "Lucida Console";
    /*filter: drop-shadow(1px 1px 2px);*/
    font-style: oblique;
    font-variant: normal;
    font-variant-caps: normal;
    font-weight: normal;
    word-spacing: 5vw;
    letter-spacing: 5vw;
    line-height: 148%;
    direction: ltr;
    text-align: right;
    text-align-last: start;
    color: orangered;
    writing-mode: horizontal-tb;

}

#wild:hover {
    z-index: 1000;
    cursor: pointer;
    color: orangered !important;
    transition: all 1s ease !important;
    filter: drop-shadow(1px 1px 2px);
}

#system {
    position: absolute;
    font-family: "Lucida Console";
    font-style: oblique;
    font-size: 1vw;
    color: orangered;
    margin-top: 0%;
    transition: all 1s ease;
    left: 50vw;
    z-index: 1000;
    
    animation: animation3 4s infinite;
    animation-direction: alternate;
    transition: all 1s ease !important;
}

#system:hover {
    cursor: pointer;
    color: orangered;
    filter: drop-shadow(1px 1px 2px);
}

.grid-container {
    display: grid;
    width: 100%;
    /*  grid-template-columns: repeat(16, 1fr);*/
    grid-template-columns: auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto auto;
    /*
  width:100%;
  grid-gap: 1px;
*/
    /*  padding: 10px;*/
}

.grid-container > div {
    color: white;
    font-family: arial;
    background-color: black;
    border: 1px solid white;
    text-align: left;
    /*spannendeLayouts */
    transform: scale(0.7);
    z-index: -1v !important;
}

/*
.item2 {
    font-size: 2.857vw;
    color: black!important;
    background-color: white!important;
    letter-spacing: -0.25vw;
    line-height: 90%;
    hyphens: auto;

}
*/

.item2 {
    font-size: 2.857vw;
    color: black !important;
    background-color: white !important;
    word-spacing: -0.1vw;
    letter-spacing: -0.1vw;
    line-height: 110%;
/*
    animation: animation4 4s infinite!important;
    animation-direction: alternate!important;
    transition: all 1s ease !important;
*/
/*    hyphens: auto;*/

}

.grid-container .item2 #a {
    transition: all 1s ease;
    transition-property: letter-spacing, color;
    z-index: 100000;
}


.grid-container .item2 #a:hover {
    cursor: pointer;
    color: orangered;
    letter-spacing: 0.2vw;
}

.item3 {
    text-align: center !important;
    line-height: 100%;
    z-index: 1 !important;
}

.item3:hover {
    cursor: pointer;
}

.item3:hover + #insight1 {
    display: block !important;
    z-index: 10000 !important;
}

#insight1 {
    position: absolute !important;
    top: 25% !important;
    left: 26% !important;
    margin-right: -50% !important;
    text-align: left;
    display: none;
    color: orangered !important;
    background-color: transparent !important;
    border: none !important;
    font-family: arial black !important;
    letter-spacing: -0.3vw;
     !important;
    line-height: 90% !important;
    font-size: 6vw !important;
    transform: scaleY(2);
    animation: animation2 6s infinite;
    animation-iteration-count: 1;
    transition: all 1s ease !important;
    z-index: 10000 !important;
}

.item4 {
    text-align: center !important;
    line-height: 100%;
    z-index: 1 !important;
}

.item4:hover {
    cursor: pointer;
}

.item4:hover + #insight2 {
    display: block !important;
    z-index: 10000 !important;
}

#insight2 {
    position: absolute !important;
    top: 25% !important;
    left: 26% !important;
    margin-right: -50% !important;
    text-align: left;
    display: none;
    color: orangered !important;
    background-color: transparent !important;
    border: none !important;
    font-family: arial black !important;
    letter-spacing: -0.3vw;
     !important;
    line-height: 90% !important;
    font-size: 6vw !important;
    transform: scaleY(2);
    animation: animation2 6s infinite;
    animation-iteration-count: 1;
    transition: all 1s ease !important;
    z-index: 10000 !important;
}

.item5 {
    text-align: center !important;
    line-height: 100%;
    z-index: 1 !important;

}

.item5:hover {
    cursor: pointer;
}

.item5:hover + #insight3 {
    display: block !important;
    z-index: 10000 !important;
}

#insight3 {
    position: absolute !important;
    top: 25% !important;
    left: 26% !important;
    margin-right: -50% !important;
    text-align: left;
    display: none;
    color: orangered !important;
    background-color: transparent !important;
    border: none !important;
    font-family: arial black !important;
    letter-spacing: -0.3vw;
     !important;
    line-height: 90% !important;
    font-size: 6vw !important;
    transform: scaleY(2);
    animation: animation2 6s infinite;
    animation-iteration-count: 1;
    transition: all 1s ease !important;
    z-index: 10000 !important;
}

.grid-container .item18 {
    color: white;
}

.item6 {
    z-index: 1 !important;
}

.item7 {
    z-index: 1 !important;
}

.item8 {
    z-index: 1 !important;
}



.item18:hover {
    transition: all 1s ease;
    cursor: pointer;
    font-size: 2vw;
    color: black;
    border: 1px solid orangered;
    transform: scale(1) !important;
    opacity: 1 !important;
    background-color: orangered;
}

marquee#b {
    position: absolute;
    opacity: 0;
    overflow: hidden;
}

marquee#b:hover {
    opacity: 1 !important;
    overflow-x: hidden !important;
}

#rotate {
    animation: animation1 6s infinite;
}

@keyframes animation1 {
    from {
        transform: rotateZ(0deg);
    }

    to {
        transform: rotateZ(360deg);
    }
}

@keyframes animation2 {
    from {
        transform: scaleY(1);
    }

    to {
        transform: scaleY(2);
    }
}

@keyframes animation3 {

    50%,
    100% {
        color: white;
    }
}

/*
@keyframes animation4 {

    50%,
    100% {
        color: white!important;
        background-color: black!important;
    }
}*/