@import url("https://fonts.googleapis.com/css2?family=Bodoni+Moda:ital,opsz,wght@0,6..96,400..900;1,6..96,400..900&family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&display=swap");
:root {
  /* theme */
  --background-color: #120029;
  --foreground-color: #ede7f0;
  --main-color: #b53df9;
  --sec-color: #291b3a;
  --third-color: #f5019f;
  --sec-hover-color: #ff7bd1;
  --hover-color: #f2daff;
  --fontFamsTitle: "Bodoni Moda", serif;
  --fontFams: "Inter", sans-serif;
  --name-color: #ede7f0;
  --top: 30px;
  --left: 70px;

  --scale-svg: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLW1vdmUtZGlhZ29uYWwyLWljb24gbHVjaWRlLW1vdmUtZGlhZ29uYWwtMiI+PHBhdGggZD0iTTE5IDEzdjZoLTYiLz48cGF0aCBkPSJNNSAxMVY1aDYiLz48cGF0aCBkPSJtNSA1IDE0IDE0Ii8+PC9zdmc+);
  --rotate-svg: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLXJvdGF0ZS1jY3ctaWNvbiBsdWNpZGUtcm90YXRlLWNjdyI+PHBhdGggZD0iTTMgMTJhOSA5IDAgMSAwIDktOSA5Ljc1IDkuNzUgMCAwIDAtNi43NCAyLjc0TDMgOCIvPjxwYXRoIGQ9Ik0zIDN2NWg1Ii8+PC9zdmc+);
  --drag-svg: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyNCIgaGVpZ2h0PSIyNCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9ImN1cnJlbnRDb2xvciIgc3Ryb2tlLXdpZHRoPSIyIiBzdHJva2UtbGluZWNhcD0icm91bmQiIHN0cm9rZS1saW5lam9pbj0icm91bmQiIGNsYXNzPSJsdWNpZGUgbHVjaWRlLW1vdmUtaG9yaXpvbnRhbC1pY29uIGx1Y2lkZS1tb3ZlLWhvcml6b250YWwiPjxwYXRoIGQ9Im0xOCA4IDQgNC00IDQiLz48cGF0aCBkPSJNMiAxMmgyMCIvPjxwYXRoIGQ9Im02IDgtNCA0IDQgNCIvPjwvc3ZnPg==);
  --download-svg: url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIyMCIgaGVpZ2h0PSIyMCIgdmlld0JveD0iMCAwIDI0IDI0IiBmaWxsPSJub25lIiBzdHJva2U9IiNmZmZmZmYiIHN0cm9rZS13aWR0aD0iMiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2UtbGluZWpvaW49InJvdW5kIiBjbGFzcz0ibHVjaWRlIGx1Y2lkZS1kb3dubG9hZC1pY29uIGx1Y2lkZS1kb3dubG9hZCI+PHBhdGggZD0iTTEyIDE1VjMiLz48cGF0aCBkPSJNMjEgMTV2NGEyIDIgMCAwIDEtMiAySDVhMiAyIDAgMCAxLTItMnYtNCIvPjxwYXRoIGQ9Im03IDEwIDUgNSA1LTUiLz48L3N2Zz4=);
}
body {
  background: var(--background-color);
  color: var(--foreground-color);
}
::-webkit-scrollbar {
  display: none;
}
#name {
  position: absolute;
  top: 100px;
  left: 100px;
  white-space: nowrap;
  color: #ede7f0;
  font-size: 70px;
  cursor: grab;
  user-select: none;
  transform-origin: top left;
}
#text-color-picker {
  cursor: pointer;
}
/* selection border */
#name.selected {
  outline: 3px dashed #4da3ff;
}
#name {
  padding: 5px 15px !important;
  user-select: none;
  -webkit-user-drag: none;
  transform-origin: center;
  white-space: wrap !important;
  word-break: break-word !important;
  overflow-wrap: break-word !important;
}

/* resize handle */
.handle {
  position: absolute;
  width: 24px;
  height: 24px;
  background: var(--scale-svg), var(--foreground-color);
  transform: scale(1.3);
  right: -6px;
  bottom: -6px;
  cursor: nwse-resize;
  display: none;
  z-index: 100;
}
/* rotate handle (top-right) */
.handle.rotate {
  position: absolute;
  width: 24px;
  height: 24px;
  background: var(--rotate-svg), var(--foreground-color);
  transform: scale(1.3);
  right: -6px;
  top: -6px;
  cursor: grab;
  display: none;
}
/* left resize handle */
.handle.left {
  position: absolute;
  width: 24px;
  height: 24px;
  left: -16px;
  top: 50%;
  transform: translateY(-50%) scale(1.3);
  cursor: ew-resize;
  display: none;
  background: var(--drag-svg), var(--foreground-color);
}

#name.selected .handle.left {
  display: block;
}
#name.selected .handle.rotate {
  display: block;
}
#name.selected .handle {
  display: block;
}

.title {
  /* font-size: 18px !important; */
  font-weight: 600;
}
.sub-title {
  font-size: 15px !important;
  font-weight: 400;
}
#image-preview p {
  /* font-family: var(--font-name); */
  position: absolute;
}

* {
  margin: 0;
  padding: 0;
  font-family: var(--fontFams);
  line-height: normal;
}

preview-panel {
  /* height: fit-content; */
  display: flex;
  flex-direction: column;
  align-items: start;
  justify-content: start;
}

render,
#options {
  width: 40vw;
}
.dimenssions-setting {
  display: flex;
  flex-direction: row;
  gap: 20px;
  margin-top: 20px;
}
options-panel {
  display: flex;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

@media (max-width: 768px) {
  options-panel {
    gap: 10px;
  }
  render,
  #options {
    width: 100vw;
  }
}

@media (max-width: 480px) {
  options-panel {
    gap: 10px;
  }
  render,
  #options {
    width: 100vw;
  }
}
input-editor,
#Rendered-name {
  /* width: 50vw; */
  height: 100%;
  max-height: 620px;
  overflow-y: scroll;
  scrollbar-color: var(--main-color);
}

.input-section label {
  font-weight: 700;
}
.input-section {
  gap: 5px;
  display: flex;
  flex-direction: column;
}
#render-button[disabled] {
  background-color: #919191;
  color: #000;
}
#render-button {
  width: 50%;
  margin-top: 10px;
  padding: 10px 20px;
  background: var(--main-color);
  color: #ede7f0;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: all;
  transition-duration: 200ms;
}

button {
  background: var(--main-color);
  color: #ede7f0;
  border: none;
  padding: 10px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: all;
  transition-duration: 200ms;
}

#render-button:not([disabled]):hover,
button:hover {
  background: var(--hover-color);
  color: #080808;
}

#download-button {
  position: relative;
  min-width: 36px;
  min-height: 36px;
}
#download-button:hover {
  background: var(--sec-color);
}
#download-button::after {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  background: var(--download-svg);
  color: var(--foreground-color);
}
input {
  min-width: auto;
  padding: 10px 10px;
}
#image-preview {
  position: relative;
  transform: scale(0.5);
  transform-origin: top left;
}
.flex-row {
  display: flex;
  gap: 10px;
  flex-direction: row;
}
.flex-col {
  display: flex;
  /* gap: 10px; */
  flex-direction: column;
}
#font-family {
  padding: 10px;
  border: 1px solid #9b9b9b;
}

.hidden {
  display: none;
}
#socmed a:hover {
  background: var(--sec-hover-color);
}
#socmed a {
  background: var(--sec-color);
  color: #ede7f0;
  border: none;
  padding: 10px 10px;
  border-radius: 5px;
  cursor: pointer;
  transition: all;
  transition-duration: 200ms;
  text-decoration: none;
}

#message-template {
  min-height: 50px;
  border: none;
  outline: none;
  padding: 12px;
  font-size: 12px;
  margin-bottom: 15px;
  font-weight: 600;
  box-sizing: border-box;
  resize: vertical;
}

.generated-message {
  min-width: 100px;
  max-width: 100% !important;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  padding: 10px 10px;
  background: var(--sec-hover-color);
  border-radius: 5px;
  font-size: 12px;
  margin-top: 10px;
}

.generated-message:hover {
  background: var(--sec-color);
  transition: all 200ms;
  cursor: pointer;
  color: var(--foreground-color);
}

.generated-message.copied {
  background: rgb(174, 240, 157);
}

/* CSS v2 */

body {
  padding: 60px;
}

container {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
  position: relative;
  margin-top: 44px;
}

preview-panel,
options-panel {
  width: 100%;
  max-height: 100vh;
  background: var(--background-color);
  border-radius: 10px;
  box-shadow: 0 5px 10px rgba(0, 0, 0, 0.1);
  max-width: 100vw;
  overflow-y: scroll;
}
preview-panel {
  overflow-y: visible;
}
input:focus {
  outline: var(--main-color);
}

#title {
  font-size: 40px;
  font-family: var(--fontFamsTitle);
  color: var(--main-color);
  text-shadow:
    -1px -1px 0px var(--main-color),
    1px 1px 0px var(--main-color),
    -1px 1px 0px var(--main-color),
    1px -1px 0px var(--main-color);
  font-weight: 600 !important;
  letter-spacing: 1px;
}
#version {
  color: var(--foreground-color) !important;
  text-shadow:
    -1px -1px 0px var(--foreground-color),
    1px 1px 0px var(--foreground-color),
    -1px 1px 0px var(--foreground-color),
    1px -1px 0px var(--foreground-color) !important;
}
.sub-title {
  opacity: 80%;
}

#font-family,
#line-height,
#text-color-picker,
#width,
#height,
#message-template,
#names-input {
  margin-top: 10px;
  background: var(--sec-color) !important;
  border: 2px solid var(--main-color);
  padding: 20px 30px;
  border-radius: 10px;
  color: var(--foreground-color);
}
#line-height,
#text-color-picker,
#width,
#height {
  padding: 10px 30px;
}
#font-family {
  padding: 7px 30px;
}
.align-btn:hover {
  background: var(--hover-color) !important;
  color: var(--sec-color);
}
.align-btn {
  margin-top: 6px;
  background: var(--sec-color) !important;
  padding: 8px 10px !important;
  color: var(--main-color);
  align-items: end;
  transform-origin: center;
  transform: scale(0.83);
  border: 2px solid var(--main-color);
  color: #ede7f0;
}

.active-align {
  background: var(--main-color) !important;
}

.clr-field button {
  max-height: 35px !important;
  padding: 10px 30px;
  border-radius: 10px;
  transform: translateY(-13px) translateX(-3px) !important;
}
.name-item {
  margin-top: 16px;
  display: flex;
  flex-direction: column;
  padding: 10px 20px;
  background: #f4f4f4;
  border-radius: 10px;
  color: var(--background-color);
  font-weight: 700 !important;
  cursor: pointer;
}
.name-item:nth-child(even) {
  background: #e8c1ff;
  border: 2px solid #ececec;
}
.name-item:nth-child(even):hover,
.name-item:hover {
  transform: translateX(10px);
  transition: all;
  transition-duration: 200ms;
}
.name-top-row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

/* Preview */
preview-panel {
  margin-top: 44px;
}