* { box-sizing: border-box; }
body { font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; margin: 0; background-color: #0b0d17; color: white; }

.row { display: flex; flex-wrap: wrap; }
.col-9 { flex: 75%; padding: 20px; }
.col-3 { flex: 25%; padding: 20px; background-color: #161b22; }

nav { background-color: #1c1c1c; }
nav ul { display: flex; flex-wrap: wrap; list-style: none; padding: 0; margin: 0; justify-content: center; }
nav a { color: #00d4ff; padding: 15px 20px; display: block; text-decoration: none; font-weight: bold; }
nav a:hover { background-color: #00d4ff; color: black; }

footer { background-color: #1c1c1c; text-align: center; padding: 20px; margin-top: 20px; border-top: 1px solid #333; }

@media screen and (max-width: 768px) {
    .col-9, .col-3 { flex: 100%; }
}