/* @font-face {
   font-family: "bebas";
   src: url("../font/BebasNeue-Bold.woff");
   font-weight: 500;
}
@font-face {
   font-family: "bebas";
   src: url("../font/BebasNeue-Regular.woff");
   font-weight: 400;
}
@font-face {
   font-family: "bebas";
   src: url("../font/BebasNeue-Book.woff");
   font-weight: 300;
}
@font-face {
   font-family: "bebas";
   src: url("../font/BebasNeue-Light.woff");
   font-weight: 200;
}
@font-face {
   font-family: "bebas";
   src: url("../font/BebasNeue-Thin.woff");
   font-weight: 100;
} */

:root {
   --accent: #ccc28d;
   --gap: 20px;
}
@keyframes bg {
   0% {
      background-position: 0px 0px;
   }
   100% {
      background-position: 900px 0px;
   }
}
* {
   margin: 0;
   padding: 0;
   outline: none;
   border: none;
   text-decoration: none;
   box-sizing: border-box;
   font-family: "Handjet", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
   font-weight: 400;
   letter-spacing: 0.3px;
   font-size: 20px;
   line-height: 1;
   color: inherit;
}
body {
   margin: 40px 20px;
   background-color: black;
   color: #fff;
}

#tileInfo {
   color: #fff;
   font-weight: 700;
   letter-spacing: 0.4px;
   text-transform: uppercase;
   line-height: 1.1;
}

#tileInfo .muted {
   color: #fff !important;
   opacity: 0.9;
}

#tileInfo .sep {
   color: #fff !important;
   opacity: 0.7;
   padding: 0 8px;
}

#tileInfo .accent {
   color: #cfc68a !important;
}

#tileInfo .warn {
   color: #c24a3f !important;
}
#settings_emoji.is-disabled {
   opacity: 0.45;
   filter: grayscale(100%);
   pointer-events: none;
}
#settings_emoji.is-disabled * {
   cursor: not-allowed !important;
}

.container {
   margin: 0 auto;
   padding: 0 10px;
   width: 100%;
   max-width: 1440px;
}
.h6 {
   padding-bottom: 10px;
   letter-spacing: 1px;
   text-transform: lowercase;
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.arrow {
   display: none;
   object-fit: contain;
   padding: 0 10px;
   cursor: pointer;
   transition: ease-in-out 0.1s;
}
button {
   cursor: pointer;
}
input[type="number"],
input[type="text"],
select {
   background-color: black;
   border: 1px solid #ddd;
   padding: 4px;
   font-size: 16px;
   text-align: center;
}
button {
   padding: 4px;
   font-size: 16px;
}
input::-webkit-outer-spin-button,
input::-webkit-inner-spin-button {
   -webkit-appearance: none;
   margin: 0;
}
input[type="checkbox"] {
   position: relative;
   width: 25px;
   height: 25px;
   border: 1px solid #fff;
   appearance: none;
}
input[type="checkbox"]:checked {
   background-color: var(--accent);
}
input[type="checkbox"]:checked::before {
   content: " ";
   position: absolute;
   top: 1px;
   left: 1px;
   right: 1px;
   bottom: 1px;
   border: 4px solid black;
}
/* header */
.header {
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   column-gap: 60px;
   row-gap: 30px;
   padding-bottom: 30px;
   border-bottom: dashed 3px #fff4;
}
.logo {
   height: 150px;
   width: 100%;
   min-width: 320px;
   object-fit: contain;
}
.logo,
.banner {
   background-image: url("../img/banner.png");
   background-repeat: repeat-x;
   /* animation: bg 70s infinite; */
}
.banner {
   grid-column: span 2;
   padding: 10px;
}
.banner img {
   height: 90px;
}
.banner_actions {
   display: flex;
   gap: 40px;
   margin-bottom: 10px;
}
.banner_actions span {
   color: var(--accent);
}
.banner a {
   color: var(--accent);
   text-decoration: underline;
   letter-spacing: 2.5px;
}
.banner p,
.banner li {
   text-transform: lowercase;
}
.banner li span {
   color: white;
}
.banner li {
   color: var(--accent);
}
.socials {
   grid-column: span 3;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   column-gap: 60px;
   row-gap: 15px;
}
.socials .h6 {
   display: none;
}
.social_box {
   width: 100%;
   height: 48px;
   padding: 10px 30px;
   display: flex;
   justify-content: space-between;
   align-items: center;

   border: 1px solid #fff;
   border-bottom: 3px solid #fff;
}
.social_box p {
   font-weight: 600;
}
.social_box a {
   font-weight: 900;
   color: var(--accent);
}

/* settings */
.settings {
   padding: 30px 0;
   display: grid;
   grid-template-columns: repeat(3, 1fr);
   column-gap: 60px;
   row-gap: 30px;

   border-bottom: dashed 3px #fff4;
}
.settings_box_box {
   height: 140px;
   width: 100%;
   min-width: 320px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: center;

   border: 1px solid #fff;
   border-bottom: 3px solid #fff;
}
.fileload {
   height: 140px;
   width: 100%;
   min-width: 320px;
   padding: 15px;

   background-color: var(--accent);
   border: 1px solid #fff;
   border-bottom: 3px solid #fff;
}
.fileload .mini {
   height: 100%;
   width: 100%;
   display: flex;
   flex-direction: column;
   justify-content: center;
   padding: 25px;
   background-color: #fff;
   border: 1px solid black;
   border-bottom: 3px solid black;
}
.fileload .mini b {
   color: #000;
   font-size: 32px;
   font-weight: 900;
   letter-spacing: 3px;
   text-transform: lowercase;
}
.fileload .mini p {
   color: #000;
   font-size: 24px;
   font-weight: 600;
   text-transform: lowercase;
}
.fileload .mini .file-meta {
   margin-top: 12px;
   color: #000;
   font-size: 18px;
   font-weight: 600;
   text-transform: lowercase;
   word-break: break-word;
}
.fileload .mini .file-meta:empty {
   display: none;
}
.fileload.dragover {
   border-color: #4caf50;
   background: rgba(76, 175, 80, 0.1);
}
#settings_main .settings_box_box {
   padding: 13px 30px;
   display: grid;
   grid-template-columns: 3fr 2fr 3fr 2fr;
   column-gap: 15px;
   row-gap: 10px;
   align-items: center;
}
#settings_emoji .settings_box_box,
#settings_packgen .settings_box_box {
   padding: 15px 30px;
   display: grid;
   grid-template-columns: 3fr 2fr;
   column-gap: 10px;
   row-gap: 15px;
}
#settings_packgen p a {
   color: var(--accent);
   text-decoration: underline;
}
.bigger span,
#settings_packgen .bigger span {
   color: var(--accent);
   text-decoration: none;
}
#settings_emoji select {
   width: 60px;
   height: 30px;
}
#settings_packgen input {
   width: 100%;
}
#settings_packgen button {
   padding: 10px 15px;
   background-color: var(--accent);
   color: black;
   font-weight: 800;
   letter-spacing: 0.2px;
   text-transform: uppercase;
}
#settings_packgen .text {
   font-weight: 300;
   font-size: 16px;
}
#settings_packgen .text a {
   font-weight: 300;
   font-size: 16px;
}
#settings_hint .settings_box_box {
   padding: 12px;
   text-align: justify;
   font-weight: 600;
   line-height: 112%;
   letter-spacing: 1.6px;
   text-transform: lowercase;
}
#settings_hint2 .settings_box_box {
   display: block;
   flex-direction: row;
   padding: 12px;
}
#settings_hint .settings_box_box span,
#settings_hint2 .settings_box_box span,
#settings_emoji .settings_box_box span {
   color: var(--accent);
}
#settings_emoji.mini_box .settings_box_box,
.mini_box .settings_box_box {
   height: 88px;
   grid-template-columns: 1fr auto;
}
/* preview */
.preview {
   display: grid;
   grid-template-columns: repeat(2, 1fr);
   gap: 40px;

   padding: 30px 0;
   border-bottom: dashed 3px #fff4;
}
.preview_settings {
   padding: 20px;
   margin-bottom: 30px;
   height: 60px;
   display: flex;
   align-items: center;
   justify-content: space-between;

   border: 1px solid #fff;
   border-bottom: 3px solid #fff;
}
.preview_settings label {
   font-weight: 600;
   display: flex;
   align-items: center;
   gap: 16px;
}
.preview_settings input {
   width: 60px;
}
input[type="color"] {
   width: 60px;
   border: 1px solid #fff;
   appearance: none;
   border-radius: 0;
}
input[type="color"]::-webkit-color-swatch-wrapper {
   padding: 0;
   border-radius: 0;
}
.success {
   color: var(--accent);
   font-size: 32px;
   letter-spacing: 1.6px;
   text-transform: lowercase;
   margin-bottom: 30px;
}
.success_tip {
   font-size: 24px;
   font-weight: 400;
   letter-spacing: 1.2px;
   text-transform: lowercase;
   margin-bottom: 60px;
}
.success_tip a {
   color: var(--accent);
   text-decoration-line: underline;
}
.success_tip span {
   color: var(--accent);
}
.copy_on_click {
   text-align: right;
   display: flex;
   flex-direction: column;
   justify-content: end;
   gap: 5px;
   transition: ease-in-out 0.1s;
}
.copy_on_click .copy_text {
   color: #fff;
   font-size: 48px;
   font-weight: 800;
   letter-spacing: 2.4px;
   text-decoration-line: underline;
   text-transform: lowercase;
   cursor: pointer;
}
.copy_on_click p {
   font-size: 16px;
   letter-spacing: 0.8px;
   text-transform: lowercase;
   opacity: 0.8;
}
.copy_on_click.copied .copy_text {
   color: var(--accent);
   transition: ease-in-out 0.1s;
   text-decoration: none;
}
.copy_on_click.copied p {
   opacity: 1;
   transition: ease-in-out 0.3s;
}
canvas {
   width: 100%;
   height: auto;

   border: 1px solid #fff;
   border-bottom: 3px solid #fff;
}

/* actions */
.actions {
   padding: 30px 0;
   display: flex;
   justify-content: space-between;
   align-items: center;
}
.actions .cost {
   font-size: 16px;
   font-weight: 600;
   letter-spacing: 0.16px;
   text-transform: uppercase;
}
.actions .cost a {
   color: var(--accent);
   text-decoration-line: underline;
}
.actions_btn {
   padding: 10px 15px;
   background-color: var(--accent);
   color: black;
   font-weight: 600;
   letter-spacing: 0.2px;
   text-transform: uppercase;
}
#resetBtn {
   background-color: white;
}
.actions_data {
   font-weight: 600;
   letter-spacing: 0.1px;
   text-transform: uppercase;
}
.sum_btns {
   margin-top: 72px;
   display: flex;
   justify-content: end;
   gap: 30px;
}

/* footer */
footer {
   padding-top: 40px;
}
footer a {
   color: var(--accent);
   text-decoration: underline;
}
footer .logo_imgs {
   padding-top: 10px;
   display: flex;
   align-items: end;
   gap: 20px;
}

/* other stuff */
.imgs_mobile {
   display: none;
   align-items: center;
}
.imgs_mobile img {
   width: 150px;
   height: 100%;
   object-fit: contain;
}
.div {
   display: flex;
   align-items: center;
   gap: 15px;
}