body {
      font-family: 'Roboto', 'Segoe UI', 'BIZ UDPGothic', 'Hiragino Kaku Gothic ProN', 'Meiryo', sans-serif;
      background-color: #f8f9fa;
      color: #343a40;
    }

    a {
      color: #2b7fff;
      text-decoration: underline;
    }

    input,
    select {
      font-size: 1rem;
      padding: 0.5rem;
      background-color: #fcfdfd;
      border: 1px solid #ced4da;
      border-radius: 0.375rem;
      transition: border-color 0.2s ease-in-out, box-shadow 0.2s ease-in-out;

      &:focus {
        outline: none;
        border-color: #2a61d8;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
      }
    }

    .btn {
      background-color: rgb(255, 225, 0);
      color: white;
      padding: 0.5rem 1rem;
      border: none;
      border-radius: 0.375rem;
      cursor: pointer;
      transition: background-color .4s ease-in-out, box-shadow 0.2s ease-in-out;

      &:hover {
        background-color: #a1f398;
        color: #ff9b9b;
        transform: scale(1.4) rotate(5deg);
        box-shadow: 0 0 0 0.2rem rgba(255, 0, 183, 0.25);
        animation: btn-hover-animation 1.5s infinite ease-in-out;
      }

      &:focus {
        outline: none;
        box-shadow: 0 0 0 0.2rem rgba(0, 123, 255, 0.25);
      }
    }

    @keyframes btn-hover-animation {
      0% {
        background-color: rgb(255, 225, 0);
        transform: scale(1.4) rotate(5deg);
        box-shadow: 0 0 0 0.2rem rgba(255, 225, 0, 0.25);
      }

      50% {
        background-color: rgb(179, 0, 255);
        transform: scale(1.6) rotate(-5deg);
        box-shadow: 0 0 0 10px rgba(255, 225, 0, 0.25);
      }

      100% {
        background-color: rgb(255, 225, 0);
        transform: scale(1.4) rotate(5deg);
        box-shadow: 0 0 0 0.2rem rgba(255, 225, 0, 0.25);
      }
    }

    /* Head Item */
    .head-item {
      display: flex;
      flex-direction: column;
      background-color: #ffffff;
      border: 1px solid #ced4da;
      border-radius: 0.375rem;
      padding: .5rem;
      margin-bottom: 1rem;
    }

    .head-item .item-data {
      display: flex;
      justify-content: space-between;
      margin-bottom: 0.5rem;
    }

    @media screen and (max-width: 639px) {
      .head-item .item-data {
        flex-direction: column;
      }

      /* #schema {
        display: none;
      } */
    }

    #url {
      border-top-left-radius: 0 !important;
      border-bottom-left-radius: 0 !important;
    }

    .head-item .item-data .key {
      font-weight: bold;
      color: #495057;
    }

    .head-item .item-data .value {
      color: #6c757d;

      &.is-good {
        color: #6390da;
      }

      &.is-bad {
        color: #dc3545;
      }

      &.is-warn {
        color: #d9b340;
      }
    }

    .head-item .desc {
      font-size: 0.875rem;
      color: #6c757d;
    }

    /* HTML Decorator */
    .html-decorator {
      color: #737477;

      .tag {
        color: #7b7d80;
      }

      .tag-name {
        color: #cf4550;
      }

      .attr-name {
        color: #cc9e49;
      }

      .attr-value {
        color: #609e34;
      }

      &::selection {
        background-color: #d1d3d7;
        color: inherit;
      }

      /* Dark */
      /* background-color: #282c34;
      color: #d1d3d7;
      .tag { color: #abb2bf; }
      .tag-name { color: #e06c75; }
      .attr-name { color: #e5c07b; }
      .attr-value { color: #98c379; } */
    }

    /* Loading */
    .loading-dayo {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      gap: 1rem;
      margin-block: 7rem;

      .x {
        width: 2rem;
        height: 2rem;
        background-color: #d5d9e0;
        border-radius: 50%;
        animation: loading-dayo 1.5s infinite ease-in-out;
      }

      #loading-text {
        font-size: 0.875rem;
        color: #8b949b;
        user-select: none;
      }
    }

    @keyframes loading-dayo {
      0% {
        transform: scale(0.8);
        box-shadow: 0 0 0 0 rgb(213, 217, 224, 0.4);
      }

      50% {
        transform: scale(1);
        box-shadow: 0 0 0 10px rgba(230, 231, 232, 0.4);
      }

      100% {
        transform: scale(0.8);
        box-shadow: 0 0 0 0 rgb(213, 217, 224, 0.4);
      }
    }