/* Body */
body:before {
    background-color: #5e299b;
    opacity: 0.7;
}

/* Navigation */
.on-top {
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    z-index: 3;
}

/* Button purple */
.btn-purple {
    --bs-btn-color: #fff;
    --bs-btn-bg: #04001d;
    --bs-btn-border-color: #04001d;
    --bs-btn-hover-color: #fff;
    --bs-btn-hover-bg: #0b0050;
    --bs-btn-hover-border-color: #070035;
    --bs-btn-focus-shadow-rgb: 16, 0, 122;
    --bs-btn-active-color: #fff;
    --bs-btn-active-bg: #0f006d;
    --bs-btn-active-border-color: #070035;
    --bs-btn-active-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
    --bs-btn-disabled-color: #fff;
    --bs-btn-disabled-bg: #020013;
    --bs-btn-disabled-border-color: #020013;
}

/* Masthead */
.masthead .masthead-content {
    padding-top: 10rem;
}

.masthead:before {
    background-color: rgba(4, 0, 29, 0.9);
}

@media (min-width: 576px) {
    .masthead .masthead-content {
        max-width: 30rem;
    }
}

@media (min-width: 768px) {
    .masthead .masthead-content {
        max-width: 40rem;
        padding-top: 15rem;
    }
}