/* Styling for the bottom container to make it "Stand Out" */
.styled-container {
    padding: 50px;
    background-color: #f0f0f0; /* Light grey background for the section */
    font-family: "Helvetica", "Arial", sans-serif; /* Modern sans serif */
}

/* The primary Bauhaus container */
.bauhaus-box {
    border: 10px solid black; /* Bold geometric border */
    padding: 40px;
    background-color: #ffcc00; /* Requirement: Color n Background Property (Yellow) */
}

/* Font and Text Properties */
.font-demo {
    font-size: 4rem;
    font-weight: 900;
    text-transform: uppercase; /* Bauhaus characteristic */
    color: black;
    margin: 0;
    line-height: 0.9;
}

.text-demo {
    letter-spacing: 5px; /* Spaced out for modern feel */
    background-color: #0066cc; /* Requirement: Color & Background Property (Blue) */
    color: white;
    padding: 10px;
    display: inline-block;
    margin-top: 20px;
}

/* Demonstrating Image and Border Styles */
.styled-img {
    border: 15px solid #ff0000; /* Strong red border */
    display: block;
    margin: 20px 0;
}

/* Color and Background Property Demo */
.background-demo {
    margin-top: 30px;
    height: 100px;
    /* Requirement: CSS Gradient Background */
    background: linear-gradient(90deg, #ff0000 33%, #0066cc 33%, #0066cc 66%, #000000 66%);
    color: white;
    display: flex;
    align-items: center;
    padding-left: 20px;
    font-weight: bold;
}

/* --- ANIMATION CODE --- */

/* 1. Define the animation movement */
@keyframes bauhausFloat {
    0% {
        transform: translateY(0px) rotate(0deg);
    }
    50% {
        transform: translateY(-20px) rotate(2deg); /* Moves up and tilts slightly */
    }
    100% {
        transform: translateY(0px) rotate(0deg);
    }
}

/* 2. Apply the animation to your styled image */
.styled-img {
    width: 350px; /* Scaling the 1000px image down */
    height: auto;
    border: 15px solid #ff0000;
    display: block;
    margin: 20px 0;
    
    /* Requirement: CSS Animation */
    animation: bauhausFloat 4s ease-in-out infinite; 
}