.orientation-demo {
    padding: 20px;
    text-align: center;
    background: linear-gradient(45deg, #3498db, #2ecc71);
    color: white;
    border-radius: 10px;
    margin: 10px 0;
    transition: all 0.3s ease;
}

@media (orientation: portrait) {
    .orientation-demo {
        background: linear-gradient(45deg, #e74c3c, #f39c12);
        padding: 30px 15px;
    }
    .orientation-demo::before {
        content: "📱 Portrait Mode";
        display: block;
        font-size: 1.2em;
        margin-bottom: 10px;
    }
}

@media (orientation: landscape) {
    .orientation-demo {
        background: linear-gradient(45deg, #3498db, #2ecc71);
        padding: 20px 40px;
    }
    .orientation-demo::before {
        content: "💻 Landscape Mode";
        display: block;
        font-size: 1.2em;
        margin-bottom: 10px;
    }
}