html {
      background-color: #36393e;
      background-size: cover;
      color: #ffffff;
      overflow: auto;
      scroll-behavior: smooth;
      scrollbar-width: 0;
      scrollbar-color: transparent transparent;
      -webkit-scrollbar: none;
      -ms-overflow-style: none;
      scrollbar-gutter: stable;
    }


    body {
      overflow-y: scroll;
      scroll-behavior: smooth;
    }

    .home {
      top: 1%;
      left: 1%;
      position: absolute;
      font-size: 20px;
      font-family: "Comic Sans MS", "Comic Sans";
      color: #ffffff;
      text-decoration: none;
      transition: transform 0.5s ease;
      z-index: 1;
      border-radius: 15px;
      padding: 10px;
      background-color: #2f3136;
      border: 4px solid transparent;
    }

    .aa {
      display: flex;
      gap: 2%;
      flex-wrap: wrap;
      margin-bottom: 5%;
    }

    .svr,
    .mem,
    .bot,
    .int {
      background-color: #2f3136;
      color: #ffffff;
      border: 4px solid transparent;
      border-radius: 15px;
      padding: 10px;
      font-family: "Comic Sans MS", "Comic Sans";
      font-size: 20px;
      height: 1%;
      position: relative;
      left: 2%;
      margin-top: 5%;
      flex: 0 0 21%;
      transition: transform 0.5s ease, padding 0.5s ease, box-shadow 0.5s ease;
      z-index: 0;
      overflow: visible;
    }

    .svrst, .memst, .botst, .intst {
      margin-left: 5%;
      margin-top: -4%;
    }

    .svr::before,
    .mem::before,
    .bot::before,
    .int::before {
      content: "";
      position: absolute;
      border-radius: 19px;
      top: -4px;
      bottom: -4px;
      left: -4px;
      right: -4px;
      background: linear-gradient(270deg,
          pink, white, violet, plum, orchid, #87CEEB, #FF69B4, beige);
      background-size: 1600% 1600%;
      filter: blur(8px);
      opacity: 0;
      transition: opacity 0.5s ease;
      z-index: -1;
      mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      -webkit-mask:
        linear-gradient(#fff 0 0) content-box,
        linear-gradient(#fff 0 0);
      mask-composite: exclude;
      -webkit-mask-composite: destination-out;

      padding: 4px;
      box-sizing: border-box;
    }

    .svr:hover::before,
    .mem:hover::before,
    .bot:hover::before,
    .int:hover::before {
      opacity: 1;
      animation: rainbowMove 8s linear infinite;
    }

    .bot:hover,
    .svr:hover,
    .mem:hover,
    .int:hover {
      transform: scale(1.05);
      box-shadow: 0 0 15px rgba(255, 255, 255, 0.3);
      padding: 15px;
    }

    @keyframes rainbowMove {
      0% {
        background-position: 0% 50%;
      }

      50% {
        background-position: 100% 50%;
      }

      100% {
        background-position: 0% 50%;
      }
    }