@import url("https://fonts.googleapis.com/css2?family=Kanit:wght@100;300;400;500;600;700&display=swap");
      :root {
        --dark_color: #18191b;
        --grey_color: #1c1e20;
        --accent_color: #48d176;
      }

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

      body {
        background-color: var(--dark_color) !important;
        background-image: url("../background.png");
        font-family: "Karit", sans-serif !important;
        font-weight: 400 !important;
        line-height: 1.2rem !important;
      }

      ::-webkit-scrollbar {
        width: 3px;
      }

      ::-webkit-scrollbar-track {
        background: var(--dark_color);
      }

      ::-webkit-scrollbar-thumb {
        background: var(--accent_color);
      }

      ::-webkit-scrollbar-thumb:hover {
        background: var(--accent_color);
      }

      a {
        color: white;
      }

      a:hover {
        color: var(--accent_color);
      }

      /* Navbar */

      .navbar {
        height: 1.925rem !important;
        background-color: var(--grey_color) !important;
        border-bottom: 1px solid var(--accent_color) !important;
        border-left: 0px;
        border-right: 0px;
        border-top: 0px;
      }

      .navbar-expand .navbar-nav {
        flex-direction: row !important;
        justify-content: space-between !important;
      }

      .navbar-expand .navbar-nav .active {
        color: var(--accent_color) !important;
      }

      .navbar-expand .navbar-nav a {
        transition: color 0.5s ease;
        line-height: 14px !important;
        letter-spacing: 0px !important;
        text-transform: capitalize !important;
        color: white !important;
        padding-inline: 2rem !important;
        position: relative !important;
      }

      .navbar-expand .underline:after {
        content: "" !important;
        position: absolute !important;
        left: 50% !important;
        bottom: -2px !important;
        width: 0px !important;
        height: 2px !important;
        background: var(--accent_color) !important;
        transition: all 0.45s !important;
      }

      .navbar-expand .underline:hover:after {
        width: 100% !important;
        left: 0 !important;
      }

      .navbar-expand .navbar-nav a:hover {
        color: var(--accent_color) !important;
      }

      /* Cards */

      .card {
        font-stretch: ultra-expanded !important;
        background-color: #1c1e20 !important;
        text-align: center;
        color: white !important;
        border: 1px solid var(--accent_color);
      }

      .card .card-header {
        background-color: #00000025;
        border-bottom: 1px solid var(--accent_color);
        border-image-slice: 1;
        border-left: 0px;
        border-right: 0px;
        border-top: 0px;
      }

      .card .card-footer {
        border-top: 1px solid rgb(56, 56, 56);
      }

      .card .card-footer svg {
        height: 37px;
      }

      .card .card-footer svg:hover {
        animation: rubberBand 0.9s ease;
      }

      .card .card-title {
        font-size: 3rem;
        margin-bottom: 3.2rem;
      }

      .card .card-body .logo-title img {
        width: 30%;
        margin-bottom: 2rem;
      }

      /* Discord Widget */

      .member_list {
        animation: slidein 0.5s ease;
      }

      @keyframes slidein {
        from {
          transform: translateX(-100px);
        }
        to {
          transform: translateX(0px);
        }
      }

      .member-list ul {
        list-style: none;
      }

      .member-list .member {
        display: flex !important;
        justify-content: space-between !important;
        padding: 0.6rem !important;
        align-items: center !important;
      }

      .member-list ul li:nth-child(even) {
        background-color: var(--dark_color) !important;
      }

      .member-img img {
        height: 30px !important;
      }

      /* Buttons */

      .btn {
        width: 100%;
        background-color: var(--accent_color) !important;
        color: white !important;
        border: none !important;
        transition: opacity 0.5s ease !important;
      }

      .btn:hover {
        opacity: 70% !important;
      }

      button {
        border: none !important;
        box-shadow: none !important;
      }

      button:active {
        border: none !important;
        box-shadow: none !important;
      }

      /* Waves are cool */

      .card-link {
        cursor: pointer;
        transition: color 0.5s ease;
        color: white;
        font-size: 13px;
        line-height: 18px;
      }

      .card-link:hover {
        color: var(--accent_color);
      }

      .wave {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        width: 100% !important;
        overflow: hidden !important;
        line-height: 0 !important;
        transform: rotate(180deg) !important;
      }

      .wave svg {
        position: relative !important;
        display: block !important;
        width: calc(100% + 1.3px) !important;
        height: 58px !important;
        animation: wave 10s cubic-bezier(0.36, 0.45, 0.63, 0.53) infinite !important;
        transform: translate3d(0, 0, 0) !important;
      }

      .wave svg:nth-of-type(2) {
        position: relative;
        display: block;
        width: calc(100% + 1.3px);
        height: 58px;
        animation: wave 19s cubic-bezier(0.36, 0.45, 0.63, 0.53) -0.125s infinite,
          swell 7s ease -1.25s infinite;
        transform: translate3d(0, 0, 0);
      }

      .wave .shape-fill {
        fill: #242424;
      }

      .logo-img {
        width: 30%;
        margin-bottom: 2rem;
      }
      /* Cool Animation Yes Poggers */

      @keyframes rubberBand {
        0% {
          transform: scale(1);
        }
        30% {
          transform: scaleX(1.25) scaleY(0.75);
        }
        40% {
          transform: scaleX(0.75) scaleY(1.25);
        }
        60% {
          transform: scaleX(1.15) scaleY(0.85);
        }
        100% {
          transform: scale(1);
        }
      }

      @keyframes wave {
        0%,
        100% {
          transform: translate3d(0, -25px, 0);
        }
        50% {
          transform: translate3d(0, 0px, 0);
        }
      }

      @keyframes bounce {
        0%,
        100% {
          transform: scale(1.05);
        }
        50% {
          transform: scale(1);
        }
      }

      .active {
        color: #96be25;
      }