html {
    font-family: 'Georgia', serif;
    scroll-behavior: smooth;
}

.wedding-font {
    font-family: 'Great Vibes', system-ui;
    color: #A38B00;
}

section {
    position: relative;
}

.decoration {
    position: absolute;
    width: 150px;
    height: auto;
    z-index: 1;
}

.decoration.top-left {
    top: 0;
    left: 0;
}

.decoration.top-right {
    top: 0;
    right: 0;
}

.decoration.bottom-left {
    bottom: 0;
    left: 0;
}

.decoration.bottom-right {
    bottom: 0;
    right: 0;
}

.fade-in-top {
    animation: fadeInTop 0.8s ease forwards;
}

@keyframes fadeInTop {
    from {
        opacity: 0;
        transform: translateY(-30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-in-bottom {
    animation: fadeInBottom 0.8s ease forwards;
}

@keyframes fadeInBottom {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.fade-out-top {
    animation: fadeOutTop 0.8s ease forwards;
}

@keyframes fadeOutTop {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(-30px);
    }
}

.fade-out-bottom {
    animation: fadeOutBottom 0.8s ease forwards;
}

@keyframes fadeOutBottom {
    from {
        opacity: 1;
        transform: translateY(0);
    }
    to {
        opacity: 0;
        transform: translateY(30px);
    }
}

.fade-in-left {
    animation: fadeInLeft 0.8s ease forwards;
}

@keyframes fadeInLeft {
    from {
        opacity: 0;
        transform: translateX(-30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-in-right {
    animation: fadeInRight 0.8s ease forwards;
}

@keyframes fadeInRight {
    from {
        opacity: 0;
        transform: translateX(30px);
    }
    to {
        opacity: 1;
        transform: translateX(0);
    }
}

.fade-out-left {
    animation: fadeOutLeft 0.8s ease forwards;
}

@keyframes fadeOutLeft {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(-30px);
    }
}

.fade-out-right {
    animation: fadeOutRight 0.8s ease forwards;
}

@keyframes fadeOutRight {
    from {
        opacity: 1;
        transform: translateX(0);
    }
    to {
        opacity: 0;
        transform: translateX(30px);
    }
}