:root {
  --bg: #070b14;
  --bg-soft: #0d1424;
  --panel: rgba(15, 23, 42, 0.78);
  --panel-solid: ##101827101827;
  --text: #eef4ff;
  --muted: #9ba9bd;
  --line: rgba(148, 163, 184, 0.18);
  --brand: #38bdf8;
  --brand-strong: #0ea5e9;
  --accent: #a78bfa;
  --danger: #fb7185;
  --shadow: 0 24px 80px rgba(0, 0, 0, 0.45);
  --radius: 24px;
  --max-width: 1180px;
}




/* ========= Base Styles ========= */
body {
    padding: 3rem;
    color: #eef4ff;
}

form,
fieldset {
    display: flex;
    flex-direction: column;
}

form {
    background: #101827;
    max-width: 400px;
    border-radius: var(--radius);
    box-shadow: var(--shadow), ;
    margin: auto;
    padding: 2rem;
    border: 1px solid var(--accent);

}

legend {
    font-size: 1.4em;
    font-weight: bold;
    color: var(--brand);
    margin: auto;
    margin-bottom: 20px;
    border-bottom: solid 1px var(--muted);

}


input,
textarea {
    padding: 8px 8px;
    font-size: 1rem;
    background: var(--line);
    color: #eef4ff;
    border-radius: var(--radius);
}

fieldset {
    gap: 16px;
    margin-bottom: 20px;
    border: none;
}

label {
    color: var(--muted);
}

textarea {
    padding: 10px 10px;
    min-height: 100px;
    resize: vertical;
}

input[type="checkbox"] {
    width: 10%;
}


label[for="consent"] {
    font-size: .8rem;
}

input:focus-visible,
textarea:focus-visible {
    border: none;
}



/* ========= Class Selectors ========= */



#consent-container {
    display: flex;
}

#consent {
    margin-right: 20px;
}



/* ========= Media Queries ========= */