/* --- GENERAL PAGE SETUP --- */
body {
    background-color: #f0f0f0; /* REQUIREMENT: Background */
    margin: 20px;
}

/* --- SECTION 2 STYLING (The ID Selector) --- */
#styled-section {
    background-color: #222; 
    color: white; /* REQUIREMENT: Color */
    padding: 20px;
    border-radius: 15px;
    border: 4px solid royalblue;
    text-align: center; /* REQUIREMENT: Align */
}

/* --- FONTS & TEXT (Class Selector) --- */
.cool-title {
    /* REQUIREMENT: Font-family */
    font-family: 'Orbitron', sans-serif; 
    
    /* REQUIREMENT: Font-variant (The missing piece!) */
    font-variant: small-caps; 
    
    color: #00e5ff;
    text-shadow: 2px 2px 0px blue;
    font-size: 32px; /* REQUIREMENT: Size */
}

/* --- TRANSITIONS & TRANSFORMATIONS --- */
.action-btn {
    background-color: #ff0055;
    color: white;
    padding: 10px 20px;
    font-size: 18px;
    border: none;
    cursor: pointer;
    
    /* REQUIREMENT: Transition */
    transition: all 0.5s ease;
}

.action-btn:hover {
    background-color: #ff9900;
    
    /* REQUIREMENT: Transform */
    transform: rotate(10deg) scale(1.2);
}

/* --- ANIMATION --- */
/* REQUIREMENT: Animation */
@keyframes slideAndColor {
    0% { margin-left: 0px; background-color: yellow; }
    50% { margin-left: 100px; background-color: limegreen; }
    100% { margin-left: 0px; background-color: yellow; }
}

.animated-box {
    width: 150px;
    padding: 10px;
    margin: 20px auto; /* Centers the box */
    background-color: yellow;
    color: black;
    font-weight: bold;
    
    /* triggers the animation defined above */
    animation: slideAndColor 3s infinite;
}