/* ===== GENERAL ===== */

body {
    margin: 0;
    padding: 0;
    min-height: 100vh;

    background-color: #fff4bd;

    font-family: "Trebuchet MS", Arial, sans-serif;
    color: #806b45;

    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
}


/* ===== MAIN CARD ===== */

.card {
    width: 70%;
    max-width: 620px;

    padding: 55px 35px;

    background-color: #fffdf2;

    border: 3px solid #e8c95f;
    border-radius: 35px;

    box-shadow: 0 12px 30px rgba(160, 130, 45, 0.18);
}


/* ===== DECORATIONS ===== */

.decoration {
    margin: 15px 0;

    color: #d1a52e;

    font-size: 25px;
    letter-spacing: 5px;
}

.seal {
    font-size: 70px;
    margin: 10px 0;

    animation: float 3s ease-in-out infinite;
}


/* ===== HEADINGS ===== */

h1 {
    margin: 10px 0;

    color: #c99b24;

    font-size: 42px;
}

h2 {
    margin: 10px 0 20px;

    color: #a68135;

    font-size: 25px;
}


/* ===== TEXT ===== */

p {
    font-size: 17px;
    line-height: 1.7;
}

.welcome {
    color: #bd9130;
    font-size: 20px;
}


/* ===== BUTTON ===== */

.enter-button {
    display: inline-block;

    margin: 25px 0;
    padding: 13px 30px;

    background-color: #f6dc78;

    color: #806b45;

    border: 2px solid #d9b94c;
    border-radius: 25px;

    text-decoration: none;

    font-size: 17px;

    transition: 0.25s;
}

.enter-button:hover {
    background-color: #edce5d;

    transform: translateY(-4px);

    box-shadow: 0 6px 12px rgba(160, 130, 45, 0.2);
}


/* ===== SEAL FLOATING ===== */

@keyframes float {

    0% {
        transform: translateY(0);
    }

    50% {
        transform: translateY(-8px);
    }

    100% {
        transform: translateY(0);
    }

}
/* ===== SURPRISE GIFTS ===== */

.gifts {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 18px;

    margin: 30px 0;
}

.gift {
    width: 130px;
    min-height: 130px;

    background-color: #fff5c9;

    border: 2px solid #e4c75b;
    border-radius: 25px;

    color: #806b45;

    font-size: 45px;

    cursor: pointer;

    transition: 0.25s;

    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
}

.gift span {
    margin-top: 10px;

    font-family: "Trebuchet MS", Arial, sans-serif;

    font-size: 15px;
}

.gift:hover {
    background-color: #ffed9e;

    transform: translateY(-7px) rotate(-2deg);

    box-shadow: 0 8px 15px rgba(160, 130, 45, 0.18);
}


/* ===== SURPRISE MESSAGE ===== */

.surprise-box {
    min-height: 45px;

    margin: 20px 0;
    padding: 18px;

    background-color: #fff9dc;

    border: 2px dashed #e2c45a;
    border-radius: 20px;

    color: #9a7932;

    font-size: 16px;

    line-height: 1.6;
}


/* ===== BACK LINK ===== */

.back-link {
    color: #a68135;

    text-decoration: none;

    font-size: 14px;
}

.back-link:hover {
    text-decoration: underline;
}
/* ===== QUIZ ===== */

.question {
    margin: 25px 0;
    padding: 20px;

    background-color: #fff8d8;

    border: 2px solid #efd477;
    border-radius: 22px;
}

.question h2 {
    font-size: 21px;
}

.question button {
    display: block;

    width: 90%;

    margin: 10px auto;

    padding: 11px;

    background-color: #fffdf2;

    color: #806b45;

    border: 2px solid #e4c75b;

    border-radius: 18px;

    cursor: pointer;

    font-family: "Trebuchet MS", Arial, sans-serif;

    transition: 0.2s;
}

.question button:hover {
    background-color: #ffed9e;

    transform: translateY(-2px);
}
/* ===== BIRTHDAY LETTER ===== */

.letter-page {
    max-width: 680px;
}

.letter {
    margin: 30px auto;

    padding: 35px;

    background-color: #fff9dc;

    border: 2px solid #e4c75b;

    border-radius: 20px;

    text-align: left;

    box-shadow:
        0 5px 15px rgba(160, 130, 45, 0.12);
}

.letter-decoration {
    text-align: center;

    font-size: 30px;

    margin-bottom: 15px;
}

.letter h2 {
    text-align: center;

    color: #bd9130;

    font-size: 23px;
}

.letter p {
    color: #806b45;

    font-size: 16px;

    line-height: 1.8;
}

.signature {
    text-align: right;

    margin-top: 30px;
}