/* Custom styles - Black background with yellow (#FFD100) accents */

:root {
    --primary: #FFD100;
    --primary-hover: #e6bc00;
    --background-color: #000000;
    --color: #ffffff;
    --muted-color: #cccccc;
    --card-background-color: #1a1a1a;
    --form-element-background-color: #1a1a1a;
    --form-element-border-color: #333333;
    --form-element-focus-color: #FFD100;
}

html, body {
    background-color: #000000;
    color: #ffffff;
}

main.container {
    padding-top: 3rem;
}

h1 {
    color: #FFD100;
}

/* Buttons */
button,
[type="submit"],
[type="button"],
a[role="button"] {
    background-color: #FFD100;
    border-color: #FFD100;
    color: #000000;
    font-weight: 600;
}

button:hover,
[type="submit"]:hover,
[type="button"]:hover,
a[role="button"]:hover {
    background-color: #e6bc00;
    border-color: #e6bc00;
    color: #000000;
}

button:focus,
[type="submit"]:focus,
[type="button"]:focus,
a[role="button"]:focus {
    box-shadow: 0 0 0 3px rgba(255, 209, 0, 0.3);
}

button:disabled,
[type="submit"]:disabled {
    background-color: #666666;
    border-color: #666666;
    color: #333333;
}

/* Form inputs */
input,
select,
textarea {
    background-color: #1a1a1a;
    border-color: #333333;
    color: #ffffff;
}

input:focus,
select:focus,
textarea:focus {
    border-color: #FFD100;
    box-shadow: 0 0 0 2px rgba(255, 209, 0, 0.2);
}

input::placeholder {
    color: #888888;
}

/* Labels */
label {
    color: #ffffff;
}

/* Links */
a {
    color: #FFD100;
}

a:hover {
    color: #e6bc00;
}

/* Return link styled as button */
a[href="index.html"] {
    display: inline-block;
    padding: 0.75rem 1.5rem;
    background-color: #FFD100;
    color: #000000;
    text-decoration: none;
    border-radius: 4px;
    font-weight: 600;
    margin-top: 1rem;
}

a[href="index.html"]:hover {
    background-color: #e6bc00;
}

/* Paragraphs */
p {
    color: #cccccc;
}