@charset "UTF-8";
:root {
    --bs-primary-rgb: 95, 133, 117;
    --bs-primary: #5F8575;
    --bs-secondary-rgb: 129, 184, 161;
    --bs-secondary: #81b8a1;
    --bs-primary-bg-subtle: var(--bs-primary);
    --bs-primary-text-emphasis: white;
    --bs-accordion-color: var(--bs-accordion-active-bg);
}

body {
    background: linear-gradient(135deg, #fef6f6, #e8f0ef, #fdfdfd);
    font-size: 18px;
}
.btn-primary {
    --bs-btn-bg: var(--bs-primary);
}
.btn-primary:hover {
    --bs-btn-hover-bg: var(--bs-secondary);
}

body {
    font-family: 'Lora', serif;
}

.w-80 {
    width: 80%;
}

.lavishly-yours-regular {
    font-family: "Lavishly Yours", cursive;
    font-weight: 400;
    font-style: normal;
}

h1.title, h2.title {
    font-family: 'Lavishly Yours', serif;
}

.green {
    color: var(--bs-primary);
}

.form-check-input:checked {
    background-color: var(--bs-primary);
    border-color: var(--bs-primary);
}

a {
    color: var(--bs-primary);
}

ul {
    list-style-type: disc;
}

.accordion-item:not(:first-of-type).mb-3 {
    border-top: var(--bs-accordion-border-width) solid var(--bs-accordion-border-color);
    border-top-left-radius: var(--bs-accordion-inner-border-radius);
    border-top-right-radius: var(--bs-accordion-inner-border-radius);
}

.accordion-item:not(:first-of-type).mb-3 > .accordion-header > .accordion-button {
    border-top-left-radius: var(--bs-accordion-inner-border-radius);
    border-top-right-radius: var(--bs-accordion-inner-border-radius);
}

.polaroid {
    background: white;
    padding: 10px 10px 30px 10px;
    border: 1px solid #ccc;
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
    width: 320px;
    text-align: center;
    font-family: 'Courier New', Courier, monospace;
    transition: transform 0.3s, box-shadow 0.3s;
}

.polaroid img {
    width: 100%;
    height: auto;
    display: block;
}

.polaroid:hover {
    transform: scale(1.08);
    box-shadow: 0 12px 24px rgba(0,0,0,0.4);
}

.polaroid > .caption {
    font-size: 1rem;
    color: #555;
    margin-top: 10px;
}

.rotate-left {
    transform: rotate(-5deg);
}

.rotate-right {
    transform: rotate(5deg);
}

.rotate-left-more {
    transform: rotate(-8deg);
}

/* Keep hover scaling on top of rotation */
.polaroid:hover.rotate-left,
.polaroid:hover.rotate-right,
.polaroid:hover.rotate-left-more {
    transform: scale(1.08) rotate(0deg);
}