@media (max-width: 1400px) {
   body {
      margin: 0;
   }
   .h6 {
      cursor: pointer;
   }
   .arrow {
      display: flex;
   }
   /* header */
   .header {
      display: flex;
      flex-direction: column;
   }
   .imgs_mobile {
      padding: 10px;
      display: flex;
      justify-content: space-between;
   }
   .imgs_mobile img {
      width: 100%;
   }
   .logo {
      display: none;
   }
   .banner {
      min-height: 145px;
      padding: 10px;
   }
   .banner li {
      list-style: none;
      padding-top: 20px;
   }
   .banner > img {
      display: none;
   }
   .users {
      display: none;
   }
   .socials {
      grid-template-columns: 1fr;
   }
   .socials .h6 {
      display: flex;
   }
   .socials .arrow {
      transform: rotate(180deg);
      display: flex;
   }
   .social_box {
      padding: 10px 10px;
      display: none;
   }

   /* settings */
   .settings {
      display: flex;
      flex-direction: column;
   }
   .settings_box_box {
      height: auto;
   }
   #settings_main .settings_box_box {
      grid-template-columns: 1fr 1fr;
   }
   #settings_packgen .settings_box_box {
      padding: 15px;
   }
   #settings_packgen .text,
   #settings_packgen #generateBtn {
      grid-column: span 2;
   }
   #settings_hint {
      display: none;
   }
   #settings_emoji.mini_box .settings_box_box,
   .mini_box .settings_box_box {
      height: auto;
      grid-template-columns: 1fr auto;
   }

   /* preview */
   .preview {
      display: flex;
      flex-direction: column;
   }
   .preview .arrow {
      transform: rotate(180deg);
      display: flex;
      flex-direction: column;
   }
   .preview_settings {
      display: none;
      padding: 15px 30px;
      flex-direction: column;
      gap: 10px;
      height: auto;
   }
   .preview_settings label {
      width: 100%;
      justify-content: space-between;
   }
   .success_tip {
      margin-bottom: 50px;
   }
   .copy_on_click {
      text-align: center;
   }

   /* actions */
   .actions {
      display: flex;
      flex-direction: column;
      gap: 10px;
   }
   .slash {
      display: none;
   }
   .sum_btns {
      flex-direction: column;
      justify-content: center;
      row-gap: 10px;
   }
   .actions_btn {
      width: 100%;
   }

   footer .logo_imgs img {
      max-width: 120px;
      width: 100%;
      object-fit: contain;
   }
   footer .logo_imgs {
      margin-bottom: 20px;
   }

   /* animations */
   /* hovers */
   .arrow:hover {
      opacity: 0.5;
   }
   .fileload:hover {
      opacity: 0.8;
   }
   a:hover {
      opacity: 0.8;
   }
   button:hover {
      opacity: 0.8;
   }
   .copy_text:hover {
      opacity: 0.8;
      transition: ease-in-out 0.1s;
   }
}