* {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    html,
    body {
      width: 100%;
      height: 100%;
      overflow: hidden;
      font-family: Arial, Helvetica, sans-serif;
    }

    @font-face {
        font-family: "Minecraft";
        src: url("/assets/fonts/MinecraftRegular-Bmg3.woff2");
    }

    body {
      background:
        linear-gradient(
          rgba(0, 0, 0, 0.35),
          rgba(0, 0, 0, 0.65)
        ),
        url("/img/etopia-lobby.png")
        center center / cover no-repeat;

      color: #fff;
    }

    .landing {
      width: 100%;
      height: 100svh;

      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      position: relative;
      padding: 30px;
    }

    /* =========================
       CENTER CONTENT
    ========================= */

    .center {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;

      text-align: center;

      margin-top: -30px;
    }

    .logo {
      width: min(420px, 75vw);
      height: auto;

      display: block;

      object-fit: contain;

      margin-bottom: 30px;

      filter: drop-shadow(
        0 15px 35px rgba(0, 0, 0, 0.5)
      );
    }

    /* =========================
       COPY IP BUTTON
    ========================= */

    .ip-button {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;

      min-width: 210px;
      height: 55px;

      padding: 0 25px;

      border: 1px solid rgba(255, 255, 255, 0.2);
      border-radius: 12px;

      background: rgba(255, 255, 255, 0.12);

      color: white;

      backdrop-filter: blur(12px);
      -webkit-backdrop-filter: blur(12px);

      font-size: 16px;
      font-weight: 700;

      cursor: pointer;

      transition: all 0.2s ease;
    }

    .ip-button:hover {
      background: rgba(255, 255, 255, 0.2);

      transform: translateY(-2px);

      box-shadow:
        0 10px 30px rgba(0, 0, 0, 0.3);
    }

    .ip-button:active {
      transform: translateY(0);
    }

    .copy-icon {
      width: 18px;
      height: 18px;

      fill: none;
      stroke: currentColor;
      stroke-width: 2;
    }

    /* =========================
       SMALL TEXT
    ========================= */

    .server-info {
      margin-top: 13px;

      font-size: 12px;

      color: rgba(255, 255, 255, 0.65);

      letter-spacing: 0.2px;
    }

    /* =========================
       DISCORD BUTTON
    ========================= */

    .discord {
      position: absolute;

      bottom: 35px;
      left: 50%;

      transform: translateX(-50%);

      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;

      width: min(300px, calc(100vw - 50px));
      height: 55px;

      border-radius: 12px;

      background: #5865F2;

      color: white;

      text-decoration: none;

      font-size: 16px;
      font-weight: 700;

      box-shadow:
        0 12px 35px rgba(0, 0, 0, 0.35);

      transition: all 0.2s ease;
    }

    .discord:hover {
      background: #4752C4;

      transform:
        translateX(-50%)
        translateY(-3px);

      box-shadow:
        0 18px 40px rgba(0, 0, 0, 0.45);
    }

    .discord svg {
      width: 21px;
      height: 21px;

      fill: currentColor;
    }

    /* =========================
       MOBILE
    ========================= */

    @media (max-width: 600px) {

      .center {
        margin-top: -20px;
      }

      .logo {
        width: min(320px, 80vw);
        margin-bottom: 25px;
      }

      .ip-button {
        height: 52px;
        min-width: 190px;
      }

      .discord {
        bottom: 25px;
        height: 52px;
      }
    }

    .font-minecraft {
      font-family: "Minecraft";
      letter-spacing: 0.05em;
    }