@media (max-width: 768px) {
   html {
      background: #000;
   }

   * {
      box-sizing: border-box;
   }

   body {
      background-image: none;
      font-size: 14px;
      padding: 55px 0 0;
      margin: 0;
   }

   body::before {
      inset: 0;
      width: auto;
      height: auto;
      background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0.85)), url('../images/bg.jpg') center / cover no-repeat;
   }

   h1 {
      position: fixed;
      top: 0;
      left: 0;
      z-index: 2;
      width: 100%;
      margin: 0;
      padding: 15px 50px;
      background: #222;
      font-size: 20px;
      text-align: center;
   }

   .top-bar {
      display: block;
      position: fixed;
      top: 0;
      left: 0;
      z-index: 4;
      width: 220px;
      height: 100vh;
      margin: 0;
      background: #222;
      border: 0;
      border-radius: 0;
      font-size: 14px;
      text-align: left;
      transform: translateX(-100%);
      transition: transform .2s;
   }

   .menu-open .top-bar {
      transform: translateX(0);
   }

   .mobile-menu-btn {
      display: block;
      position: fixed;
      top: 8px;
      left: 8px;
      z-index: 5;
      width: 36px;
      height: 36px;
      padding: 8px;
      color: #fff;
      background: #333;
      border: 0;
      border-radius: 5px;
   }

   .mobile-menu-btn svg {
      display: block;
      width: 100%;
      height: 100%;
      fill: none;
      stroke: currentColor;
      stroke-width: 2;
      stroke-linecap: round;
   }

   .left-links {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      width: 100%;
      margin: 0;
      padding: 55px 18px 0;
   }

   .top-bar a {
      padding: 14px 0;
      border-bottom: 1px solid rgba(255, 255, 255, .18);
      font-size: 14px;
      text-align: left;
   }

   .right-info {
      display: block;
      clear: both;
      width: 100%;
      margin: 0;
      padding: 14px 18px 0;
      color: #bbb;
      font-size: 12px;
   }

   .something {
      width: 90%;
      max-width: calc(100vw - 20px);
      font-size: 16px;
      margin: 10px auto;
      padding: 0 5px;
   }

   .content,
   .color-settings-content {
      width: 90%;
      max-width: calc(100vw - 20px);
      padding: 0 5px;
      margin: 10px auto;
   }

   .content span {
      font-size: 18px;
   }

   .codebox p {
      font-size: 13px;
   }

   .slider,
   .slider-label,
   .output-box,
   .apply-settings {
      width: 90%;
      max-width: calc(100vw - 20px);
      margin-left: auto;
      margin-right: auto;
   }

   .slider-label {
      font-size: 15px;
   }

   .action-btn {
      padding: 8px 12px;
   }

   .choose-mode {
      width: 45%;
      flex-wrap: wrap;
   }

   .choose-mode .action-btn {
      padding: 8px 12px;
      margin: 0;
      white-space: nowrap;
      font-size: 14px;
   }

   #file-icon {
      width: 90%;
      text-align: center;
   }

   #file-icon span {
      font-size: 16px !important;
   }

   #dl.action-btn {
      white-space: normal;
   }

   .collapse-btn,
   .expand-btn,
   .back-to-top {
      display: none;
   }

   figure {
      width: 100%;
      margin: 15px auto;
   }

   .zoom-img {
      width: 100%;
      transition: none;
      cursor: auto;
   }

   .zoom-img.zoomed {
      transform: none;
      cursor: auto;
   }
}