:root {
  --bg-main: #0F172A;
  --bg-card: #1E293B;
  --bg-sidebar: #111827;
  --bg-input: #334155;
  --text-main: #E5E7EB;
  --text-muted: #9CA3AF;
  --orange: #F97316;
  --green: #22C55E;
  --yellow: #FACC15;
  --purple: #A855F7;
  --blue: #3B82F6;
  --red: #EF4444;
}
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
.montserrat {
  font-family: "Montserrat", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
}
body {
    min-height: 100vh;
    background: var(--bg-main);
    font-size: 0.8em;
    color: var(--text-main);
}
.box {
    position: relative;
    height: 100vh;
}
form {
    position: absolute;
    top: 50%;
    left: 50%;
    display: flex;
    flex-direction: column;
    gap: 15px;
    width: 40%;
    transform: translateX(-50%) translateY(-50%);
}
h2 {
    text-align: center;
    font-size: 2.2em;
    font-weight: 800;
    color: var(--orange);
}
input {
    padding: 10px 18px;
    font-size: 1.4em;
    color: var(--text-main);
    background: var(--bg-input);
    border: 2px solid var(--bg-sidebar);
    border-radius: 12px;
    outline: none;
}
input:focus {
    border: 2px solid var(--orange);
}
button {
    padding: 8px 14px;
    font-size: 1.6em;
    font-weight: 600;
    color: #000;
    background: var(--orange);
    border: 2px solid var(--bg-sidebar);
    border-radius: 12px;
}
button:hover,
button:focus {
    transform: scale(1.1);
}
.erro {
    color: var(--red);
}