html {    
    width: 300px;
    height: 100px;
    background: #151619;
    color: #c9cbcd;
    font-family: Open Sans,Segoe UI,sans-serif;
    -webkit-font-smoothing: antialiased;
    text-rendering: optimizeLegibility;
}


.container {
    text-align: center;
    padding-bottom: 10px;
  }
  
  .button-group {
    display: flex;
    justify-content: center;
  }
  
  .button {
    border-radius: 6px;
    color: #c3c4ca;
    font-weight: bold;
    padding: 10px 20px;
    text-decoration: none;
    transition: all 150ms ease-in-out;
  }
  .button:hover {
    background-color: #1d1f23;
  }
  .button:not(:first-of-type) {
    margin-left: 15px;
  }
  .button.bg-blue {
    background-color: #202127;
    color: #c3c4ca;
  }
  .button.bg-blue:hover {
    background-color: #452e7c;
  }
  .discord  {
    overflow: visible;
    margin-right: 3px;
    display: inline-block;
  }
  .button-arrow .arrow-icon {
    overflow: visible;
    margin-left: 3px;
    width: 8px;
  }
  .button-arrow .arrow-head {
    transform: translateX(0);
    transition: transform 150ms ease-in-out;
  }
  .button-arrow .arrow-body {
    opacity: 0;
    transform: scaleX(1);
    transition: transform 150ms ease-in-out, opacity 150ms ease-in-out;
  }
  .button-arrow:hover .arrow-head {
    transform: translateX(3px);
  }
  .button-arrow:hover .arrow-body {
    opacity: 1;
    transform: scaleX(2);
  }