@import url("https://fonts.googleapis.com/css2?family=Source+Serif+4:ital,opsz,wght@0,8..60,200..900;1,8..60,200..900&display=swap");

@keyframes scroll {
   from {
      background-position: 0px 0px;
   }
   to {
      background-position: -2000px 2000px;
   }
}

* {
   margin: 0;
   padding: 0;
   outline: none;
   border: none;
   text-decoration: none;
   box-sizing: border-box;
   font-family: "Source Serif 4", serif;
   font-size: 16px;
   line-height: 1;
   list-style: none;
   text-align: center;
   letter-spacing: 0.5px;
   text-transform: lowercase;
   color: inherit;
   transition: ease-in-out 0.15s;
}
html {
   height: 100%;
}
body {
   height: 100%;
   width: 100%;
   display: grid;
   grid-template-rows: auto 1fr auto;
   background-image: url("../img/clouds.png");
   background-repeat: repeat;
   background-size: 2000px;
   background-position: 0 0;
   animation: scroll 100s linear infinite;
   user-select: none;
   color: #fff;
}
.container {
   margin: 0 auto;
   padding: 0 10px;
   width: 100%;
   max-width: 1440px;
   display: flex;
   flex-direction: column;
   align-items: center;
   justify-content: space-between;
}
a,
button,
input,
textarea,
select {
   cursor: pointer;
   background: none;
}
.btn {
   padding: 20px;
   position: relative;

   text-align: center;
   letter-spacing: 1.5px;
   text-transform: uppercase;
   text-shadow: 0 -1px 4px rgba(255, 255, 255, 0.75),
      0 1px 4px rgba(255, 255, 255, 0.75);
}
.btn::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: -1;
   border-radius: 10px;
   pointer-events: none;
   border: 1px solid #fff;
   background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.8) 0%,
      rgba(255, 255, 255, 0.16) 100%
   );
   filter: blur(2px);
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
   opacity: 0.67;
}

/*  */
/*  */
/*  */
/*  */
/* header */
header {
   padding: 50px 0;
   height: 180px;
}
header .container {
   justify-content: start;
   flex-direction: row;
   column-gap: 30px;
}
header a {
   height: 100%;
}
.header-logo {
   object-fit: contain;
   width: auto;
   height: 90px;
   filter: drop-shadow(0 -2px 4px rgba(255, 255, 255, 0.45))
      drop-shadow(0 2px 4px rgba(255, 255, 255, 0.45));
}

/*  */
/*  */
/*  */
/* layout */
main .container {
   margin-bottom: 160px;
   display: grid;
   grid-template-columns: auto 1fr;
   align-items: start;
   gap: 40px;
}
.right-column {
   display: grid;
   grid-template-columns: 1fr minmax(auto, 350px);
   flex-direction: column;
   gap: 40px;
   width: 100%;
}
.left-column {
   width: 100%;
   max-width: 350px;
   display: flex;
   flex-direction: column;
   gap: 40px;
}

/*  */
/*  */
/*  */
/* form */
#pixelForm {
   width: 100%;
   padding: 20px;
   position: relative;
   display: flex;
   flex-direction: column;
   gap: 12px;
}
#pixelForm:before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   z-index: -1;
   border-radius: 10px;
   pointer-events: none;
   border: 1px solid #fff;
   background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.8) 0%,
      rgba(255, 255, 255, 0.16) 100%
   );
   filter: blur(2px);
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
   opacity: 0.67;
}
.input-box {
   display: flex;
   flex-direction: row;
   align-items: center;
   justify-content: space-between;
   position: relative;
}
/* image select */
#imageSelect {
   height: 75px;
   align-items: center;
   justify-content: center;
}
#imageSelect:before {
   background: linear-gradient(
      180deg,
      rgba(255, 128, 0, 0.8) 0%,
      rgba(255, 128, 0, 0.16) 100%
   );
}
#imageSelect label {
   text-align: center;
   text-shadow: 0 -1px 4px rgba(255, 255, 255, 0.75),
      0 1px 4px rgba(255, 255, 255, 0.75);
   font-size: 24px;
   letter-spacing: -1px;
   text-transform: lowercase;
}

.input-box input::-webkit-outer-spin-button,
.input-box input::-webkit-inner-spin-button {
   display: none;
}
.input-box label {
   font-size: 18px;
   font-weight: 400;
   text-transform: lowercase;
   text-shadow: 0 2px 4px rgba(0, 0, 0, 0.25),
      0 -1px 4px rgba(255, 255, 255, 0.35), 0 1px 4px rgba(255, 255, 255, 0.35);
}
.input-box input,
.input-box select,
.draggable-number {
   padding: 1px;
   width: 100%;
   max-width: 90px;
   border-radius: 32px;
   text-align: center;
   line-height: normal;
   font-size: 14px;
   font-weight: 700;
   text-transform: lowercase;
   border: 2px solid #fff;
   box-shadow: 0 1.983px 3.966px 0 rgba(0, 0, 0, 0.25),
      0 -0.991px 3.966px 0 rgba(255, 255, 255, 0.35),
      0 0.991px 3.966px 0 rgba(255, 255, 255, 0.35);

   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
}

.input-box select:disabled {
   opacity: 0.5;
   cursor: not-allowed;
}
#paletteSelect option {
   color: #fff;
   background: #062f4d;
}
.custom-select {
   position: relative;
   width: 100%;
   max-width: 180px;
}
.custom-select select {
   height: 26px;
   max-width: 100%;
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
   padding-right: 30px;
}
.custom-select::after {
   content: "";
   position: absolute;
   top: 50%;
   right: 12px;
   transform: translateY(-50%);
   border-left: 6px solid transparent;
   border-right: 6px solid transparent;
   border-top: 6px solid #fff;
   pointer-events: none;
}

input[type="checkbox"] {
   appearance: none;
   position: relative;
   width: 24px;
   height: 24px;
   border-radius: 50%;
   background: none;
   border: 2px solid #fff;
   box-shadow: 0 1px 4px 0 rgba(0, 0, 0, 0.25),
      0 -1px 4px 0 rgba(255, 255, 255, 0.35),
      0 1px 4px 0 rgba(255, 255, 255, 0.35);
   cursor: pointer;
}
input[type="checkbox"]:checked {
   background: #fff;
}

/* other */
.dashes {
   overflow: hidden;
   color: #fff;
   font-size: 14px;
   font-weight: 700;
   letter-spacing: 1px;
   opacity: 0.4;
   text-shadow: 0 4px 4px rgba(0, 0, 0, 0.25),
      0 -1px 4px rgba(255, 255, 255, 0.35), 0 1px 4px rgba(255, 255, 255, 0.35);
}
.center-btns {
   width: 100%;
   display: flex;
   gap: 30px;
}
.center-btns .btn {
   width: 100%;
}

.input-box.select,
.btn {
   transition: transform 0.2s ease;
}
.input-box.select:hover,
.btn:hover,
.preview-box:hover {
   transform: scale(1.02);
}
.input-box.select:active,
.btn:active,
.preview-box:active {
   transform: scale(0.98);
}
.preview-box,
.preview-box .img-wrapper {
   transition: transform 0.2s ease, width 0.3s ease, height 0.3s ease;
}

.seed {
   padding: 15px;
   width: 100%;
   display: flex;
   position: relative;
}
#seedInput {
   width: 100%;
   height: fit-content;
   text-align: start;
   overflow: hidden;
   text-overflow: ellipsis;
}
.seed::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   pointer-events: none;
   border-radius: 10px;
   border: 1px solid #fff;
   filter: blur(2px);
}
#downloadLink::before {
   background: linear-gradient(
      90deg,
      rgba(255, 128, 0, 0.8) 0%,
      rgba(255, 89, 0, 0.16) 100%
   );
}
#copyImageLink::before {
   background: linear-gradient(
      90deg,
      rgba(0, 178, 255, 0.8) 0%,
      rgba(0, 178, 255, 0.16) 100%
   );
}

/*  */
/*  */
/*  */
/* preview */
.preview-box {
   padding: 10px;
   width: 100%;
   display: flex;
   flex-direction: column;
   gap: 10px;
   position: relative;
}
.preview-box::before {
   content: "";
   position: absolute;
   top: 0;
   left: 0;
   right: 0;
   bottom: 0;
   border-radius: 10px;
   border: 1px solid #fff;
   background: linear-gradient(
      180deg,
      rgba(255, 255, 255, 0.8) 0%,
      rgba(255, 255, 255, 0.16) 100%
   );
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
   filter: blur(2px);
   opacity: 0.65;
}
.preview-box h2 {
   font-size: 32px;
   font-weight: 700;
   text-align: start;
   text-transform: uppercase;
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25),
      0 -1px 3px rgba(255, 255, 255, 0.35), 0 1px 3px rgba(255, 255, 255, 0.35);
}
.img-wrapper {
   width: 100%;
   height: 280px;
   overflow: hidden;
   position: relative;
   border-radius: 10px;
   cursor: grab;
}
.img-wrapper img {
   image-rendering: pixelated;
   transform-origin: center center;
   user-select: none;
   pointer-events: none;
}

.preview-box.active {
   grid-row: span 2;
   order: -100 !important;
}
.preview-box.active .img-wrapper {
   /* min-height: 600px; */
   height: 100%;
   max-height: 660px;
}
.preview-box img {
   max-width: 100%;
}

/*  */
/*  */
/*  */
/* credits */
#errorBox,
#progressBox,
#progressLabel {
   display: none;
   width: 100%;
   text-align: start;
   font-weight: 400;
   text-transform: lowercase;
   text-shadow: 0 1px 3px rgba(0, 0, 0, 0.25),
      0 -1px 3px rgba(255, 255, 255, 0.35), 0 1px 3px rgba(255, 255, 255, 0.35);
}
.progress-track {
   padding: 10px;
   width: 100%;
   overflow: hidden;

   border-radius: 10px;
   border: 1px solid #fff;
   background: linear-gradient(
      90deg,
      rgba(255, 255, 255, 0.8) 0%,
      rgba(255, 255, 255, 0.16) 100%
   );
   box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.25);
   filter: blur(2px);
   opacity: 0.55;
}
.progress-inner {
   height: 100%;
   width: 0%;

   transition: width 0.3s linear;
   border-radius: 10px;
   border: 1px solid #fff;
   background: linear-gradient(90deg, #fff 0%, rgba(255, 255, 255, 0.55) 100%);
   box-shadow: 0 -4px 4px 0 rgba(0, 0, 0, 0.25), 0 4px 4px 0 rgba(0, 0, 0, 0.25);
   filter: blur(2px);
   opacity: 0.75;
}

/*  */
/*  */
/*  */
/* footer */
footer {
   font-weight: 600;
}
footer .container {
   gap: 10px;
   align-items: start;
   margin-bottom: 80px;
}
footer a {
   text-decoration: underline;
}
footer .logo_imgs {
   height: 80px;
   padding-top: 10px;
   display: flex;
   align-items: end;
   gap: 20px;
}
footer .logo_imgs img {
   max-height: 80px;
   object-fit: contain;
}

/*  */
/*  */
/*  */
/* media */
@media (max-width: 1400px) {
   .center-btns {
      flex-direction: column;
   }
}
@media (max-width: 1100px) {
   main .container {
      grid-template-columns: 1fr;
   }
   .left-column {
      max-width: calc(100vw - 40px);
   }
   .right-column {
      grid-template-columns: 1fr;
   }
}
@media (max-width: 650px) {
   header {
      padding: 20px 0;
      height: auto;
   }
   header .container {
      flex-direction: column;
   }
   .header-logo {
      height: auto;
      width: 100%;
      max-width: 400px;
   }

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