/* Body styling applies to the whole page */
body {
    background-color: #f5eee6;
    font-family: Arial, sans-serif;
    margin: 30px;
}

/* Styled section uses an ID selector */
#styled-page {
    background-color: #ead8c7;
    border: 4px solid #8b5e3c;
    padding: 35px;
    margin-top: 30px;
    text-align: center;
}

/* Heading styling with font, size, color, and font-variant */
.main-title {
    color: #5b3224;
    font-family: Georgia, serif;
    font-size: 48px;
    font-variant: small-caps;
    letter-spacing: 3px;
    background-color: #f9efe5;
    padding: 20px;
    border-radius: 20px;
}

/* Subheading styling */
.sub-title {
    color: #7a4a32;
    font-size: 30px;
    font-family: "Trebuchet MS", sans-serif;
}

/* Paragraph styling with class selector */
.intro-text {
    color: #4a2f24;
    font-size: 22px;
    line-height: 1.6;
    text-align: center;
    background-color: #fff7ef;
    padding: 20px;
    border: 2px dashed #9b6f4e;
}

/* Extra styled paragraph */
.special-text {
    color: white;
    background-color: #9b6f4e;
    font-size: 24px;
    font-family: Verdana, sans-serif;
    padding: 18px;
    margin: 25px auto;
    width: 70%;
    border-radius: 15px;
}

/* Image styling with transition and transform */
.tea-image {
    width: 360px;
    border: 6px solid #5b3224;
    border-radius: 25px;
    margin: 20px;
    transition: transform 1s, filter 1s;
}

/* Hover effect demonstrates transformation */
.tea-image:hover {
    transform: scale(1.12) rotate(3deg);
    filter: brightness(115%);
}

/* Animation keyframes */
@keyframes floatBox {
    0% {
        transform: translateY(0px);
        background-color: #c99f7a;
    }

    50% {
        transform: translateY(-15px);
        background-color: #b7825a;
    }

    100% {
        transform: translateY(0px);
        background-color: #c99f7a;
    }
}

/* Animated box */
.floating-box {
    color: white;
    font-size: 20px;
    font-weight: bold;
    font-family: "Trebuchet MS", sans-serif;
    padding: 20px;
    margin: 30px auto;
    width: 60%;
    border-radius: 20px;
    animation-name: floatBox;
    animation-duration: 3s;
    animation-iteration-count: infinite;
}