/* Basic CSS Format */
* { box-sizing: border-box; }

body { 
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; 
    margin: 0; 
    background-color: #8B0000; /* Deep Festive Red Background */
}

.row::after { content: ""; clear: both; display: table; }

/* Main Content Boxes */
[class*="col-"] { 
    float: left; 
    padding: 20px; 
    width: 100%; 
    background-color: #F0FFF0; /* Honeydew (Very light green) for readability */
    border: 2px solid #006400; /* Dark Green Border */
    margin-top: 10px;
}

nav { 
    background-color: #006400; /* Dark Green Navigation */
    overflow: hidden; 
}

nav a { 
    float: left; 
    color: white; 
    padding: 14px 16px; 
    text-decoration: none; 
    font-weight: bold;
}

nav a:hover { 
    background-color: #ff0000; /* Bright Red hover effect */
    color: white; 
}

footer {
    text-align: center;
    color: white;
    padding: 20px;
}

/* Desktop Viewport (Responsive Web) */
@media only screen and (min-width: 768px) {
    .col-9 { width: 70%; margin-left: 2%; }
    .col-3 { width: 24%; margin-left: 2%; }
}