@import url('https://fonts.googleapis.com/css2?family=Abril+Fatface&family=Poppins:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100;1,200;1,300;1,400;1,500;1,600&family=Raleway:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;1,100;1,200;1,300;1,400;1,500;1,600&display=swap');

@font-face {
    font-family: Legan;
    src: url(../fonts/Legan.ttf);
}

@font-face {
    font-family: CandleFish;
    src: url(../fonts/Candlefish.ttf);
}

@font-face {
    font-family: TheSignature;
    src: url(../fonts/Thesignature.ttf);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body,
html {
    background: #f5f5f5;
    overflow-x: clip !important;
    scroll-behavior: smooth;
}

.firstBanner {
    background: #f5f5f5;
    height: auto;
}

.title h1 {
    font-family: candleFish;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 150px;
    padding-top: 20px;
    color: #C09861;
}

.title p {
    font-size: 10px;
    font-weight: 500;
    font-family: Legan;
    color: #333;
    display: flex;
    justify-content: center;
    align-items: center;
}

.secondBanner {
    height: auto;
    background: #f5f5f5;
}

.list {
    padding-top: 50px;
}

.lcard {
    font-family: 'Poppins', sans-serif;
    padding: 15px;
    /* From https://css.glass */
    background: rgba(157, 172, 124, 0.3);
    border-radius: 10px;
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.lcard .guest {
    display: flex;
    justify-content: start;
    padding-bottom: 5px;
}

.guest h5 {
    font-family: 'Poppins', sans-serif;
    font-weight: 600;
    font-size: 12px;
    text-transform: capitalize;
}

.content {
    background: rgba(245, 245, 245, 0.8);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);
    -webkit-backdrop-filter: blur(5px);
    border: 1px solid rgba(255, 255, 255, 0.3);
    padding: 5px 10px;
    border-radius: 5px;
}

.content p {
    margin-bottom: 0px;
    font-size: 10px;
    font-style: italic;
}

.lcard .time {
    padding-top: 10px;
    display: flex;
    justify-content: end;
}

.time .text {
    font-size: 10px;
    margin-bottom: 0;
}


@media (max-width: 575.98px) {
    .title h1 {
        font-size: 84px;
        font-weight: 400;
    }

    .title p {
        padding-top: 50px;
        font-size: 8px;
    }
}