:root {
    --light: #FAFAFF;
    --dark: #322E49;
    --accent-primary: #00B0BD;
    --accent-secondary: #183238;
    --text-primary: #322E49;
    --text-secondary: #ffffff; 
}

.light {
    background-color: var(--light);
}

.dark {
    background-color: var(--dark);
}

.accent-primary {
    background-color: var(--accent-primary);
    color: var(--text-primary);
}

.accent-secondary {
    background-color: var(--accent-secondary);
    color: var(--text-secondary);
}

.logo {
    max-height: max(25vh, 100px);
}

.social-icon {
    font-size: 4rem;
    color: var(--text-secondary);
    transition: color 0.25s;
}

.social-icon:hover {
    color: var(--accent-primary);
}

.text-cursive {
    font-family: "Pacifico", cursive;
    font-weight: 400;
    font-style: normal;
}

.contact-link {
    font-size: 1.5rem;
    color: var(--text-secondary);
    transition: color 0.25s;
}

.contact-link:hover {
    color: var(--accent-primary);
}

.carousel-video {
    display: block;
    margin: 0 auto;
    max-width: 360px;
}

/* Semi-hacky way to only have filter on the background */
#gallery .carousel-inner::before {
    content: "";
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-image: url("./assets/SBCS-logo-2x-ellipse-transparent.png");
    background-position: center;
    background-repeat: no-repeat;
    background-size: contain;
    filter: opacity(60%) blur(2px);
}

.card {
    transition: scale 0.25s ease-in-out;
}

.card:hover {
    scale: 105%;
}

.card .btn-primary {
    --bs-btn-color: var(--text-primary);
    --bs-btn-bg: var(--light);
    --bs-btn-border-color: var(--accent-secondary);
    --bs-btn-hover-color: var(--text-secondary);
    --bs-btn-hover-bg: var(--accent-primary);
    --bs-btn-hover-border-color: var(--accent-secondary);
}

.card .btn-primary:hover {
    --bs-btn-color: var(--text-secondary);
    --bs-btn-bg: var(--accent-primary);
    --bs-btn-border-color: var(--accent-secondary);
}