/* Button */
:root {
    --brand-color: #4a90e2;
    --brand-dark-color: #00186a;
    --button-color: var(--brand-color);
    --button-hover-color: #1a78e3;
}
.btn.btn-brand {
    color: #fff;
    background-color: var(--button-color);
    border-color: var(--button-color);
}
.btn.btn-brand:hover,
.btn.btn-brand:active,
.btn.btn-brand:focus,
.btn.btn-brand:active:focus {
    color: #fff;
    background-color: var(--button-hover-color);
    border-color: var(--button-hover-color);
}
.btn.btn-brand:active,
.btn.btn-brand:focus,
.btn.btn-brand:active:focus {
    background-color: var(--button-hover-color);
    border-color: var(--button-hover-color);
    box-shadow: 0;
}
.survey-content button:not(:disabled).btn:hover:not(:active), 
.survey-content button:not(:disabled).btn:hover:not(:active):focus {
    transform: none;
    box-shadow: none;
}
.text-brand {
    color: var(--brand-color);
}
.text-brand-dark {
    color: var(--brand-dark-color);
}
a.text-brand:hover {
    color: var(--button-hover-color);
}

/* Page-specific */
.logo {
    max-width: 260px;
}
.survey-content {
    max-width: 1100px;
    margin-top: 3rem;
}
.survey-content h1 {
    margin-bottom: 1.5rem;
    font-size: clamp(2em, 4vw, 3.25em);
    line-height: 1.125;
}
video {
    width: 100%;
}
@media (min-width: 768px) {
    .logo {
        max-width: 310px;
    }
    .survey-content {
        margin-top: 6rem;
    }
}
@media (min-width: 992px) {
    .logo {
        max-width: 360px;
    }
}
@media (max-width: 575px) {
    .input-group > .form-control-lg {
        border-top-right-radius: var(--bs-border-radius-lg) !important;
        border-bottom-right-radius: var(--bs-border-radius-lg) !important;
    }
    .input-group > button {
        border-top-left-radius: var(--bs-border-radius-lg) !important;
        border-bottom-left-radius: var(--bs-border-radius-lg) !important;
    }
}