* {
      margin: 0;
      padding: 0;
    }

    body {
      font-family: Verdana, Geneva, Tahoma, sans-serif;

    }

    .bold {
        font-weight: bolder;
    }

    .white-text {
      color: #FFF;
    }

    .blue-text {
      color: #5B97FF;
    }

    .primary-background {
      background-color: #5B97FF;
    }

    .content-container {
      width: 70vw;
      margin: auto;
    }

    .large-text {
      font-size: 1.6rem;
    }

    .medium-text {
      font-size: 1.3rem;
    }


    .top-space {
      margin-top: 16px;
    }

    .white-background {
      background-color: white;
    }

    .white-background a {
        color: #5B97FF    }

    .padded {
      padding: 16px;
    }

    .bordered {
      padding: 16px;
      border: 2px solid #000;
      border-bottom-width: 8px;
      border-left-width: 8px;
      transition: 0.3s;
    }

    .bordered:hover {
      padding-bottom: 12px;
      padding-left: 12px;
      border-bottom-width: 12px;
      border-left-width: 12px;
    }

    a {
      color: #FFF;
    }

    .top-margin {
      margin-top: 16px;
    }

    .rounded {
      border-radius: 16px;
    }

    .button {
      margin-top: 16px;
      background-color: #5B97FF;
      color: white;
    }

    .center-block {
      display: block;
      margin-left: auto;
      margin-right: auto;
    }

    .htmx-indicator {
      display: none;
    }

    .htmx-request .htmx-indicator {
      display: block;
    }

    .htmx-request.htmx-indicator {
      display: block;
    }

    .loader {
      width: 48px;
      height: 48px;
      border: 5px solid #FFF;
      border-bottom-color: #82B0FF;
      border-radius: 50%;
      display: inline-block;
      box-sizing: border-box;
      animation: rotation 1s linear infinite;
    }

    @keyframes rotation {
      0% {
        transform: rotate(0deg);
      }

      100% {
        transform: rotate(360deg);
      }
    }

    .input-with-button {
      width: fit-content;
    }

    .input-with-button input,
    .input-with-button button {
      margin: 0;
      border: 0;
      display: inline-block;
      font-size: 2rem;
      font-weight: bolder;
      padding: 16px;
      border-bottom: 12px solid #000;
      border-top: 2px solid #000;
    }

    .input-with-button input {
      border-right: 2px solid #000;
      border-left: 2px solid #000;
      border-bottom-left-radius: 16px;
      border-top-left-radius: 16px;
      color: #5B97FF;
    }

    .input-with-button button {
      border-right: 2px solid #000;
      border-bottom-right-radius: 16px;
      border-top-right-radius: 16px;
    }

    @media (max-width: 600px) {
      body {
        font-size: 0.9rem
      }

      .large-text {
        font-size: 1.3rem;
      }

      .medium-text {
        font-size: 1.1rem;
      }

      .content-container {
        width: 90vw;
        margin: auto;
      }
      .input-with-button {
        
      }
      .input-with-button input,
      .input-with-button button {
        font-size: 0.9rem;
      }
    }