/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

body {
    background-color: #000;
    background-image: url("/assets/background-5f79e35f.jpg");
    background-repeat: no-repeat;
    background-attachment: fixed;
    background-size: cover;
    color: #fff;
}

main {
    width: clamp(20rem, 95vw, 50vw);
}

.selection-option {
    cursor: pointer;
    transition: background-color 150ms ease, border-color 150ms ease, box-shadow 150ms ease, color 150ms ease;
}

.selection-option:has(input:checked) {
    background-color: rgb(251 191 36);
    border-color: rgb(251 191 36);
    box-shadow: 0 0 0 0.25rem rgb(245 158 11 / 35%);
    color: #000;
}

.selection-option:has(input:disabled) {
    cursor: not-allowed;
    opacity: 0.7;
}

.selection-option:has(input:disabled:checked) {
    opacity: 1;
}