* {
box-sizing: border-box;
}

body {
font-family: Arial, sans-serif;
margin: 0;
padding: 20px;
background: #f4f4f4;
}

header {
background: #111827;
color: white;
padding: 30px;
text-align: center;
}

.hero {
background: white;
padding: 20px;
margin-top: 20px;
}

video {
width: 100%;
max-width: 900px;
}

.cards {
display: flex;
gap: 20px;
margin-top: 20px;
}

.cards img {
width: 50%;
border-radius: 10px;
}

footer {
margin-top: 20px;
text-align: center;
}

@media (max-width: 768px) {
.cards {
flex-direction: column;
}

.cards img {
width: 100%;
}
}/* Week 4 CSS Change */

#clock{

    text-align:center;

    margin:30px auto;

    width:320px;

    background:#003366;

    color:white;

    border-radius:15px;

    padding:20px;

}

/* Week 4 Style Change */

#wday{

    font-size:26px;

    font-weight:bold;

}

/* Week 4 Style Change */

#date{

    font-size:20px;

    margin-top:10px;

}

/* Week 4 Style Change */

#time{

    font-size:34px;

    color:#FFD700;

    margin-top:15px;

}/* =========================
   Week 4 JavaScript Clock
   ========================= */

#clock {

    width: 340px;

    margin: 20px auto;

    padding: 20px;

    background: #0d6efd;

    color: white;

    text-align: center;

    border-radius: 15px;

    box-shadow: 0 4px 12px rgba(0,0,0,.25);

}

/* Style Change: Weekday */

#wday {

    font-size: 28px;

    font-weight: bold;

}

/* Style Change: Date */

#date {

    margin-top: 8px;

    font-size: 18px;

}

/* Style Change: Time */

#time {

    margin-top: 12px;

    font-size: 32px;

    color: #FFD700;

    font-weight: bold;

}

/* Stage 5 countdown styles */
#countdown{background:#eef;padding:15px;border-radius:8px;color:#003366;max-width:400px;}
#timer{font-size:2em;font-family:Arial,sans-serif;}

/* Stage5 countdown */
#clock{text-align:center;margin:20px;font-family:Arial,sans-serif}#seconds{font-size:48px;color:#0066cc}#Alert{font-size:24px;color:#cc0000}
/* Stage 6 accessibility improvements */
.skip-link{position:absolute;left:-9999px;} .skip-link:focus{left:10px;top:10px;background:#fff;padding:8px;} body{line-height:1.6;} nav a{padding:8px;} 

/* Accessibility */
.skip-link{position:absolute;left:-9999px}.skip-link:focus{left:10px;top:10px;background:#fff;padding:8px;z-index:1000}a:focus{outline:3px solid #000;}
