body {
      background-color: #A2A175;
      font-family: Lucida Console, monospace;
      transition: background 0.25s ease;
      min-height: 100vh;
      margin: 0;
      padding: 0;
  }
    body.server-online {
      background-image: url("images/trapshoes.png");
      background-attachment: fixed;
      background-size: 256px;
  }
    h1 {
      background-color: MediumSeaGreen;
      border-left-style: solid;
      font-weight: bold;
      font-size: 80px;
  }
    #motd {
      background-color: MediumSeaGreen;
      border-color: #FFAA00;
      border-left-style: solid;
      font-weight: bold;
      font-size: 20px;
  }
    #status {
      background-color: MediumSeaGreen;
      border-color: #00570C;
      border-left-style: solid;
      color: #00570C;
      font-weight: bold;
      font-size: 20px;
  }
    #offline {
      color: #BF502B;
      font-weight: bold;
      font-size: 20px;
  }
    #players {
      background-color: MediumSeaGreen;
      border-color: SlateBlue;
      border-left-style: solid;
      font-weight: bold;
      font-size: 20px;
      color: SlateBlue;
  }
    .map-button {
      background-color: MediumSeaGreen;
      border: solid;
      color: black;
      padding: 30px 64px;
      text-align: center;
      font-size: 15px;
      font-weight: bold;
      cursor: grab;
      border-radius: 5px;
      transition-property: all;
      transition-duration: 2;
  }
    .radio-button {
      background-color: MediumSeaGreen;
      border: solid;
      color: black;
      padding: 30px 64px;
      text-align: center;
      font-size: 15px;
      font-weight: bold;
      cursor: grab;
      border-radius: 5px;
  }
    .map-button:hover {
      background-image: url("images/trapshoes64.png");
      background-size: contain;
      background-attachment: local;
  }
    .radio-button:hover {
      background-image: url("images/trapshoes196.png");
      background-size: contain;
      background-attachment: local;
  }
    @media screen and (max-width: 768px) {
      body {
        padding: 10px;
        font-size: 14px;
      }

      h1 {
          font-size: 24px;
          text-align: center;
          margin: 10px 0;
      }

      #status, #players, #motd {
        text-align:center;
        font-size: 18px;
      }

      .map-button {
        width: 100%;
        padding: 20px;
        font-size: 18px;
        margin: 10px 0;
      }

      #dynmap-frame {
        width: 100%: !important;
        height: 250px: !important;
        border-radius: 5px;
      }

      #map-container {
        margin: 20px 0;
        padding: 0 10px;
      }

      div {
        display: block;
        width: 100%;
      }
    }

    @media screen and (max-width: 1024px) and (min-width:769px) {
      #dynmap-frame {
        width: 90% !important;
        height: 400px !important;
      }
      .map-button {
        width: auto;
        padding: 15px 30px:
      }
    }

    #dynmap-frame {
      max-width: 100%;
      height: auto;
      min-height: 300px;
    }

    #map-container {
      overflow-x: auto;
    }

    #online, #offline {
      font-size: clamp(18px, 4vw, 24px);
    }

    @media screen and (min-width: 1025px) {
      #forecast {
        padding: 20px;
        padding-bottom: 0;
      }

      body {
        padding-bottom: 100px;
      }

      .map-section {
        margin-top: 60px;
      }

      #map-container {
        margin-top: 40px;
      }
    }