:root{
    --surface-main: #47055e;
    --surface: rgba(255, 255, 255, 0.05);

    --symbols: rgba(255, 255, 255, 0.9);
    --symbols-muted: rgba(255, 255, 255, 0.8);
    --border: rgba(255, 255, 255, 0.2);    
}

@media (prefers-color-scheme: dark) {
        --surface-main: #270633;
        --surface: rgba(241, 245, 249, 0.05);
        --symbols: rgba(241, 245, 249, 0.9);
        --symbols-muted: rgba(241, 245, 249, 0.8);
        --border: rgba(241, 245, 249, 0.2);
}


body {
  overflow-y: auto;
  position: relative;
  background-color: var(--surface-main);
  color: var(--symbols);
}

.wrap {
  background: var(--surface);
  border: 1px solid var(--border);
  box-shadow:unset;
}

.header {
  border-bottom: 1px solid var(--border)
}

.button {
  background: rgb(194 65 12);
  color: rgb(255 247 237); 
}

.button:hover {
  background: rgb(154, 52, 18);
  color: rgb(255 247 237); 
}

label {
  color: var(--symbols)
}

input[type="text"], input[type="email"], input[type="password"], select {
  padding: 10px 15px;
  border: 1px solid #888;
  border-radius: 3px;
  width: 100%;
  box-shadow: none;
  border: 0px solid #ddd;
  font-size: 1em;
}