/* colours.css */
:root {
    --theme-brown-color: #654321; /* From meta theme-color, for reference if needed in CSS */
    --primary-accent-color: #007BFF;
    --primary-accent-hover-color: #0056b3;
    --text-color-on-dark: white;
    --overlay-background-color: rgba(0, 0, 0, 0.8);
    --shadow-color: rgba(0, 0, 0, 0.5);
    --focus-border-color: blue;
    --main-border-color: black;
    --outline-color-on-dark: white;
}

#custom-alert {
    background-color: var(--overlay-background-color);
    color: var(--text-color-on-dark);
}

#custom-alert button {
    color: var(--text-color-on-dark);
    background-color: var(--primary-accent-color);
}

#custom-alert button:hover,
#custom-alert button:focus {
    background-color: var(--primary-accent-hover-color);
    outline: 3px solid var(--outline-color-on-dark);
}

#help-text {
    background-color: var(--overlay-background-color);
    color: var(--text-color-on-dark);
    box-shadow: 0 4px 6px var(--shadow-color);
}

video:focus {
    border: 6px solid var(--focus-border-color);
}

main {
    border: 4px solid var(--main-border-color);
}