:root {
  --background-light: #fff;
  --light-background-light: #f9f9f9;
  --medium-background-light: #bebebe;
  --medium-foreground-light: #353535;
  --foreground-light: #252525;
  --light-shadow-light: #0000000d;
  --dark-shadow-light: #00000040;
  --background-dark: #151515;
  --light-background-dark: #353535;
  --medium-background-dark: #505050;
  --medium-foreground-dark: #e1e1e1;
  --foreground-dark: #fff;
  --light-shadow-dark: #00000080;
  --dark-shadow-dark: #000;
}

.main-container {
  min-height: 100vh;
  padding: 1rem;
}

.editor {
  background-color: #252525;
  border-radius: 8px;
  flex-direction: column;
  row-gap: 1rem;
  margin: 1rem;
  padding: 1rem;
  display: flex;
}

.editor p {
  color: #909090;
}

.color-selector {
  background-color: #353535;
  border-radius: 8px;
  justify-content: center;
  align-items: center;
  gap: 1rem;
  padding: 2rem;
  display: flex;
}

.preview {
  flex-direction: row;
  gap: .5rem;
  width: 100%;
  display: flex;
}

.preview .light {
  --lightningcss-light: initial;
  --lightningcss-dark: ;
  color-scheme: light;
  background-color: var(--background-light);
  color: var(--foreground-light);
  border-radius: 8px;
  flex-direction: column;
  gap: 1rem;
  width: 50%;
  margin: 1rem;
  padding: 1rem;
  display: flex;
}

.preview .light input, .preview .light select, .preview .light textarea {
  background-color: var(--light-background-light);
  color: var(--medium-foreground-light);
  box-shadow: 2px 2px 8px var(--light-shadow-light);
}

.preview .light input:focus, .preview .light select:focus, .preview .light textarea:focus {
  background-color: var(--background-light);
  box-shadow: 2px 2px 8px var(--dark-shadow-light);
}

.preview .light button {
  background-color: var(--accent);
  box-shadow: 2px 2px 8px var(--light-shadow-light);
}

.preview .light button:hover {
  background-color: var(--accent-secondary);
  box-shadow: 2px 2px 8px var(--dark-shadow-light);
}

.preview .light p {
  color: var(--foreground-light);
}

.preview .dark {
  --lightningcss-light: ;
  --lightningcss-dark: initial;
  color-scheme: dark;
  background-color: var(--background-dark);
  color: var(--foreground-dark);
  border-radius: 8px;
  flex-direction: column;
  gap: 1rem;
  width: 50%;
  margin: 1rem;
  padding: 1rem;
  display: flex;
}

.preview .dark input, .preview .dark select, .preview .dark textarea {
  background-color: var(--light-background-dark);
  color: var(--medium-foreground-dark);
  box-shadow: 2px 2px 8px var(--light-shadow-dark);
}

.preview .dark input:focus, .preview .dark select:focus, .preview .dark textarea:focus {
  background-color: var(--background-dark);
  box-shadow: 2px 2px 8px var(--dark-shadow-dark);
}

.preview .dark button {
  background-color: var(--accent);
  box-shadow: 2px 2px 8px var(--light-shadow-dark);
}

.preview .dark button:hover {
  background-color: var(--accent-secondary);
  box-shadow: 2px 2px 8px var(--dark-shadow-dark);
}

.preview .light input[type="range"], .preview .dark input[type="range"], .preview .light input[type="range"]:focus, .preview .dark input[type="range"]:focus {
  box-shadow: none;
  background-color: #0000;
}

/*# sourceMappingURL=index.1cdd34c8.css.map */