body {
        color:white;
        background-repeat: repeat;
        background-position: 50% 0%;
        font-family: DJB The Generic;
        font-size: 16px;
        margin-left: 0px;
        margin-right: 0px;
        width: unset;
      }
       @font-face{
        font-family: DJB The Generic;
        src: url(/font/TheNitpickyCat.ttf);
        font-weight: bold;
      }
        h1 {
    margin-top: 25px;
    margin-bottom: 25px;
    font-size: 560%;
  }
       h2 {
    margin-top: 30px;
    margin-bottom: 10px;
    margin-left: 40px;
    font-size: 320%;
    height: unset;
  }
        
       h3 {
    margin-top: 10px;
    margin-bottom: 10px;
    margin-left: 40px;
    font-size: 240%;
  }
       h4 {
    text-align: left;
    margin-top: 40px;
    font-size: 275%;
  }
       h4.btn {
  position: fixed;
  top: 0px;
  padding-left: 30px;
  margin-top: 40px;
  padding-right: 10px;
  border-radius: 0 10px 10px 0;
  left: -10px;
}

    li {
        list-style: none;
    }
    .info {
    text-align: left;
    }
    .character {
    display: flex;
    margin-left: auto;
    margin-right: auto;
    vertical-align: center;
    text-align: center;
    }
    .img {
    float: left;
    }
    .l {
    float: left;
    width: 360px;
    height: 320px;
    }
    .r {
    float: right;
    width: 400px;
    }
    .about {
    float: right;
    width: 520px;
    }
            a {
        text-decoration: white;
        color:white;
      }
          .body {
      text-align: center;
      width: 1280px;
      margin-bottom: 30px;
      margin-left: auto;
      margin-right: auto;
    }
    
    .box {
  height: 40px;
  width: 40px;
  margin-right: 8px;
  margin-bottom: 8px;
  border-radius: 7.5px;
  box-shadow: 3px 3px 3px #000000bb;
  float: left;
  user-select: none;
  }
  
  .color-000000 {
  background-color: #000000;
  }
  .color-ffffff {
  background-color: #ffffff;
  }
  .color-1f1f1f {
  background-color: #1f1f1f;
  }
  .color-ffb8dc {
  background-color: #ffb8dc;
  }
  .color-ffd500 {
  background-color: #ffd500;
  }
  .color-653319 {
  background-color: #653319;
  }
  .color-bb8548 {
  background-color: #bb8548;
  }
  .color-ecdcc3 {
  background-color: #ecdcc3;
  }
  .color-755b4d {
  background-color: #755b4d;
  }
  .color-00c3ff {
  background-color: #00c3ff;
  }
  .color-800004 {
  background-color: #800004;
  }
  .color-808080 {
  background-color: #808080;
  }
  .color-d9d9d9 {
  background-color: #d9d9d9;
  }
  .color-0085ad {
  background-color: #0085ad;
  }
  .color-962100 {
  background-color: #962100;
  }
  .color-ffaf7a {
  background-color: #ffaf7a;
  }
  .color-004b00 {
  background-color: #004b00;
  }
  
    
    ::selection {
        background-color: #60ab1a;
      }
    
    @media (max-width: 1359px) {
        .character {
          width: 960px !important;
          margin-left: auto;
          margin-right: auto;
        }
        .body {
          text-align: center;
          width: 960px;
          margin-bottom: 30px;
        }
        p {
          margin: 0px !important;
        }
        h1 {
          font-size: 500% !important;
          width: 960px !important;
          margin-top: 15px;
          margin-bottom: 15px;
          margin-left: 0px;
        }
        h2 {
          font-size: 256% !important;
          margin-left: 10px;
        }
        h3 {
          font-size: 180% !important;
          margin-left: 10px;
        }
        h4.txt {
          font-size: 220%;
        }
        .l {
    width: 288px !important;
    height: 256px !important;
    }
    .r {
    width: 320px !important;
    }
    h4.img, img {
    width: 270px !important;
    }
    .about {
      width: 416px;
    }
    .box {
  height: 30px;
  width: 30px;
    }
      }