body {
    margin: 0;
    font-family: 'Courier New', Courier, monospace;
    color: white;
    background: #202731;
    overflow-x: hidden;
}

h1 {
    font-size: 4rem;
    font-family: "Reddit Sans", sans-serif;
    font-weight: 900;
    z-index: 1;
    margin: 0;
    padding-top: 5vh;
}

h2 {
    font-size: 3rem;
    font-family: "Reddit Sans", sans-serif;
    font-weight: 900;
    z-index: 1;
    margin: 0;
}

h3 {
    font-size: 2rem;
    font-family: "Reddit Sans", sans-serif;
    font-weight: 100;
    margin: 0;
}

p {
    font-family: 'Nunito', sans-serif;
    font-size: 1rem;
    font-size: clamp(1rem, 0.95rem + 0.25vw, 1.25rem);
    font-weight: 200;
    z-index: 1;
    padding-top: 10vw;
    padding-bottom: 10vw;
}

section {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 400px;
    padding: 2vh 5vw;
    text-align: center;
    overflow-x: hidden;
}

iframe {
    z-index: 1;
}

.logo img {
    position: relative;
    max-width: 300px;
    max-height: 150px;
    bottom: 35px;
}

.main_logo img {
    display: none;
    position: absolute;
    left: 5px;
    top: 5px;
    width: 20vw;
}

section .navbar {
    position: fixed;
    text-align: right;
    z-index: 2;
    right: 1vw;
    top: 1vw;
    transition: right 0.3s;
}

section .hidden {
    right: -300px;
}

.navbar ul {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

.navbar li {
    margin-bottom: 10px;
}

.navbar a {
    font-family: "Nunito", sans-serif;
    font-size: 25px;
    text-decoration: none;
    color: white;
    text-shadow: 3px 3px 4px grey;
    transition: color 0.3s ease;
}

.navbar a:hover {
    color: grey;
}

.game_icon {
    position: absolute;
    top: 10px;
    left: 10px;
    width: 100px;
    height: 100px;
}

.member-container {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
}

.member img {
    border-radius: 50%;
    scale: 80%;
}

.member:hover {
    transform: scale(1.1);
}

.member {
    padding: 50px;
    box-sizing: border-box;
    transition: transform 0.15s ease-in-out;
}

.member p {
    padding: 20px;
    padding-top: 50px;
    margin: 0;
}

.blue {
    background: #3c31dd;
}

.brown {
    background: #523A28;
    padding: 10vh;
    overflow-y: hidden;
}

.pink {
    background: #ff0066;
}

.dark {
    background: #0f0f10;
}

.pink h1{
    margin-bottom: 5vh;
}

.spacer {
    aspect-ratio: 960/300;
    width: 100%;
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    position: relative;
    bottom: 5px;
}

.blue-grey {
    background-image: url('./svg/blue-grey.svg');
}   

.grey-black {
    background-image: url('./svg/grey-black.svg');
} 

.black-grey {
    background-image: url('./svg/black-grey.svg');
} 

.red-orange {
    background-image: url('./svg/red-orange.svg');
} 

.pink-purple {
    background-image: url('./svg/pink-purple.svg')
}

.brown-green {
    background-image: url('./svg/brown-green.svg');
}

.flip {
    rotate: 180deg;
    position: relative;
    top: 10px;
}

.random-square {
    position: absolute;
    background-color: #494848;
    z-index: 0;
}

#backToTopBtn {
    display: none;
    position: fixed;
    bottom: 20px;
    right: 30px;
    z-index: 99;
    border: none;
    outline: none;
    background-color: transparent;
    color: white;
    cursor: pointer;
    border-radius: 10px;
    font-size: 18px;
}

/* Minecraft Button */
#DynmapBtn {
    font-size: 18px;
    background-color: #008542;
    color: #fff;
    text-shadow: 0 2px 0 rgb(0 0 0 / 25%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: relative;
    border: 0;
    z-index: 1;
    user-select: none;
    cursor: pointer;
    text-transform: uppercase;
    letter-spacing: 1px;
    white-space: unset;
    padding: 0.8rem 1.5rem;
    text-decoration: none;
    font-weight: 900;
    transition: all 0.7s cubic-bezier(0, 0.8, 0.26, 0.99);
}
#DynmapBtn:before {
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    transition: 0.7s cubic-bezier(0, 0.8, 0.26, 0.99);
    z-index: -1;
    background-color: #008542 !important;
    box-shadow: 0 -4px rgb(21 108 0 / 50%) inset,
      0 4px rgb(100 253 31 / 99%) inset, -4px 0 rgb(100 253 31 / 50%) inset,
      4px 0 rgb(21 108 0 / 50%) inset;
}
  
#DynmapBtn:after {
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 0;
    display: block;
    width: 100%;
    height: 100%;
    content: "";
    box-shadow: 0 4px 0 0 rgb(0 0 0 / 15%);
    transition: 0.7s cubic-bezier(0, 0.8, 0.26, 0.99);
}
  
#DynmapBtn:hover:before {
    box-shadow: 0 -4px rgb(0 0 0 / 50%) inset, 0 4px rgb(255 255 255 / 20%) inset,
      -4px 0 rgb(255 255 255 / 20%) inset, 4px 0 rgb(0 0 0 / 50%) inset;
}
  
#DynmapBtn:hover:after {
    box-shadow: 0 4px 0 0 rgb(0 0 0 / 15%);
}
  
#DynmapBtn:active {
    transform: translateY(4px);
}
  
#DynmapBtn:active:after {
    box-shadow: 0 0px 0 0 rgb(0 0 0 / 15%);
}
/* Minecraft Button Ende */

.blink_txt {
    animation: blinkAnimation 3s infinite;
}

.blink_txt:hover {
    animation: none;
}

@keyframes blinkAnimation {
    0% { opacity: 1; }
    50% { opacity: 0; }
    100% { opacity: 1; }
}

.wobble {
    animation: text-shadow 1.5s ease-in-out infinite;
}

.wobble:hover {
    animation: none;
}

@keyframes text-shadow {
    0% {  
        transform: translateY(0);
        text-shadow: 
            0 0 0 #0c2ffb, 
            0 0 0 #2cfcfd, 
            0 0 0 #fb203b, 
            0 0 0 #fefc4b;
    }

    20% {  
        transform: translateY(-1em);
        text-shadow: 
            0 0.125em 0 #0c2ffb, 
            0 0.25em 0 #2cfcfd, 
            0 -0.125em 0 #fb203b, 
            0 -0.25em 0 #fefc4b;
    }

    40% {  
        transform: translateY(0.5em);
        text-shadow: 
            0 -0.0625em 0 #0c2ffb, 
            0 -0.125em 0 #2cfcfd, 
            0 0.0625em 0 #fb203b, 
            0 0.125em 0 #fefc4b;
    }
    
   60% {
        transform: translateY(-0.25em);
        text-shadow: 
            0 0.03125em 0 #0c2ffb, 
            0 0.0625em 0 #2cfcfd, 
            0 -0.03125em 0 #fb203b, 
            0 -0.0625em 0 #fefc4b;
    }

    80% {  
        transform: translateY(0);
        text-shadow: 
            0 0 0 #0c2ffb, 
            0 0 0 #2cfcfd, 
            0 0 0 #fb203b, 
            0 0 0 #fefc4b;
    }
}

.word {
    perspective: 1000px; 
  }
  
  .word span {
    cursor: pointer;
    display: inline-block;
    font-size: 4rem;
    user-select: none;
    line-height: .8;
  }
  
  .word span:nth-child(1).active {
    animation: balance 1.5s ease-out;
    transform-origin: bottom left;
  }
  
  @keyframes balance {
    0%, 100% {
      transform: rotate(0deg);
    }
    
    30%, 60% {
      transform: rotate(-45deg);
    }
  }
  
  .word span:nth-child(2).active {
    animation: shrinkjump 1.5s ease-in-out;
    transform-origin: bottom center;
  }
  
  @keyframes shrinkjump {
    10%, 35% {
      transform: scale(2, .2) translate(0, 0);
    }
    
    45%, 50% {
      transform: scale(1) translate(0, -150px);
    }
    
    80% {
      transform: scale(1) translate(0, 0);
    }
  }
  
  .word span:nth-child(3).active {
    animation: falling 2s ease-out;
    transform-origin: bottom center;
  }
  
  @keyframes falling {
    12% {
      transform: rotateX(240deg);
    }
    
    24% {
      transform: rotateX(150deg);
    }
    
    36% {
      transform: rotateX(200deg);
    }
    
    48% {
      transform: rotateX(175deg);
    }
    
    60%, 85% {
      transform: rotateX(180deg);
    }
    
    100% {
      transform: rotateX(0deg);
    }
  }
  
  .word span:nth-child(4).active {
    animation: rotate 1s ease-out;
  }
  
  @keyframes rotate {
    20%, 80% {
      transform: rotateY(180deg);
    }
    
    100% {
      transform: rotateY(360deg);
    }
  }
  
  .word span:nth-child(5).active {
    animation: toplong 1.5s linear;
  }
  
  @keyframes toplong {
    10%, 40% {
      transform: translateY(-48vh) scaleY(1);
    }
    
    90% {
      transform: translateY(-48vh) scaleY(4);
    }
  }

  .word span:nth-child(6).active {
    animation: balance 1.5s ease-out;
    transform-origin: bottom left;
  }
  
  @keyframes balance {
    0%, 100% {
      transform: rotate(0deg);
    }
    
    30%, 60% {
      transform: rotate(45deg);
    }
  }

  @keyframes bounce {
    0%, 100% {
      transform: translateY(0) rotate(45deg);
    }
    50% {
      transform: translateY(-20px) rotate(45deg);
    }
  }
  
.call-to-action {
    position: relative;
    top: -100px;
    right: -300px;
    padding: 5px 10px;
    animation: bounce 2s infinite;
    transform-origin: center;
    color: #fffb00;
}

.arrow {
    width: 0;
    height: 0;
    border-left: 10px solid transparent;
    border-right: 10px solid transparent;
    border-bottom: 10px solid #ffffff;
    position: relative;
    right: 10px;
    left: 15px;
    bottom: -20px;
    rotate: 135deg;
}