body {
    height: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden; 
    transition: all linear;
    animation-timing-function: linear;
}
#container {
    transition: opacity 1s ease-out;
}
#welcome-container { /* Identify/tot */
    display: none;    /* Identify/tot */
}                       /* Identify/tot */
.fade-out {
    opacity: 0;
}

/* Unterer Shadow */
@keyframes flicker {
    0%, 100% {
      opacity: 0;
    }
    50% {
      opacity: 1;
    }
  }
  
.shadow {
    background: radial-gradient(
        closest-side,
        rgba(255, 0, 0, 0.3) 10%,   
        rgba(255, 0, 0, 0.15) 60%, 
        rgba(255, 0, 0, 0) 100%    
    );
    width: 100%;
    height: 100vh; 
    position: absolute;
    bottom: -45vh; 
    left: 0;
    animation: flicker 3.5s infinite; 
    opacity: 0; 
}

/* Mittlerer Text / Titel */
#servername {
    position: absolute;
    left: 50%;
    top: 43.5%;
    color: rgb(255, 0, 0);
    text-shadow: 0 0 5px rgba(255, 0, 0, 0.8),  0 0 10px rgba(255, 0, 0, 0.6), 0 0 20px rgba(255, 0, 0, 0.4), 0 0 30px rgba(255, 0, 0, 0.3); 
    transform: translate(-50%, -87.5%);
    font-family: "HalvarBreit", sans-serif;
    font-style: normal;
    font-weight: 400;
    font-size: 10ch;
    line-height: 45px;
    letter-spacing: -0.05em;
}

#servername2 {
    position: absolute;
    left: 50%;
    top: 50.5%;
    transform: translate(-50%, -87.5%);
    font-family: "DancingScript", sans-serif; /* Schreibschrift:DancingScript, Halloween:CFHalloween, Christmas:CFTuques, Normal:HalvarBreit, Halloween2:melted */
    font-style: normal;
    font-weight: 200; /*400*/
    font-size: 75px; /*90px*/
    line-height: 45px;
    letter-spacing: 0.02em;
    color: rgb(255, 255, 255); /* "Scripts" soll weiß sein */
    text-shadow: 0 0 5px rgba(0, 0, 0, 0.568),  0 0 10px rgba(0, 0, 0, 0.418), 0 0 20px rgba(0, 0, 0, 0.39), 0 0 30px rgba(24, 24, 24, 0.3);
} 

/* Drücke Enter um fortzufahren */
#box {
        position: absolute;
        width: 338px;
        height: 56px;
        background: rgba(217, 217, 217, 0.01);
        box-shadow: inset 0px 0px 12px 0px rgba(255, 255, 255, 0.5);
        left: 50%;
        top: 80%;
        transform: translate(-50%, 153%);
        border-radius: 6px;
        display: flex;
        justify-content: center;
        align-items: center;
        animation: moveUpDown 2s infinite;
    }

#deuf {
        text-align: center;
        font-family: "HalvarBreit";
        font-size: 15px;
        color: #FFFFFF;
        animation: moveUpDown 2s infinite;
    }

@keyframes moveUpDown {
    0%, 100% {
        top: 85%;
    }
    50% {
        top: 80%;
    }
}

.bold {
    font-weight: bold;
    color: rgb(226, 3, 3);
}

.gray {
    color: rgb(255, 255, 255); /* gray */
}

.iconify {
    vertical-align: middle;
    margin-top: 0px; 
    margin-left: -3px; 
    font-size: 1.2em; 
}