body {
      margin: 0;
      height: 100vh;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      background-color: #fff;
    }

    img {
      width: 200px;
      margin-bottom: 30px;
      animation: pulse 2s infinite ease-in-out;
    }

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

    .spinner {
      width: 100px;
      height: 100px;
      display: grid;
      border: 6px solid transparent;
      border-radius: 50%;
      border-right-color: #ED904B;
      animation: spinner-rotate 1s infinite linear;
    }

    .spinner::before,
    .spinner::after {
      content: "";
      grid-area: 1/1;
      margin: 4px;
      border: 6px solid transparent;
      border-radius: 50%;
      animation: spinner-rotate 2s infinite linear;
    }

    .spinner::before {
      border-right-color: #F44236;
    }

    .spinner::after {
      margin: 12px;
      border: 6px solid transparent;
      border-right-color: #FFC851;
      animation-duration: 3s;
    }

    @keyframes spinner-rotate {
      100% {
        transform: rotate(1turn);
      }
    }

    /* Responsiveness */
    @media only screen and (max-width: 480px) {
      img {
        width: 120px;
      }
      .spinner {
        width: 60px;
        height: 60px;
        border-width: 4px;
      }
      .spinner::before,
      .spinner::after {
        border-width: 4px;
      }
    }

    @media only screen and (max-width: 600px) {
      img {
        width: 140px;
      }
      .spinner {
        width: 70px;
        height: 70px;
        border-width: 5px;
      }
      .spinner::before,
      .spinner::after {
        border-width: 5px;
      }
    }

    @media only screen and (min-width: 601px) and (max-width: 1024px) {
      img {
        width: 180px;
      }
      .spinner {
        width: 90px;
        height: 90px;
        border-width: 6px;
      }
      .spinner::before,
      .spinner::after {
        border-width: 6px;
      }
    }

    @media only screen and (min-width: 1025px) and (max-width: 1920px) {
      img {
        width: 200px;
      }
      .spinner {
        width: 100px;
        height: 100px;
        border-width: 6px;
      }
      .spinner::before,
      .spinner::after {
        border-width: 6px;
      }
    }

    @media only screen and (min-width: 1921px) {
      img {
        width: 260px;
      }
      .spinner {
        width: 130px;
        height: 130px;
        border-width: 8px;
      }
      .spinner::before,
      .spinner::after {
        border-width: 8px;
      }
    }