body {
    margin: 0;
    font-family: sans-serif;
    background-color: #f0f0f0; 
}

.navbar {
    background-color: #333; 
    padding: 15px 0;
}

.nav-menu {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    justify-content: center; 
}

.nav-item a {
    color: white;
    text-decoration: none;
    padding: 10px 20px;
    display: block;
}

.nav-item a:hover {
    background-color: #555; 
}

.container {
    display: flex;
    flex-wrap: wrap;
    padding: 20px;
    gap: 20px; 
}

.header-block {
    background-color: #6495ED; 
    height: 100px;
    width: 100%;
}

.main-content {
    flex: 3; 
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.content-block-large {
    background-color: #FFD700; 
    height: 300px;
}

.content-block-small {
    background-color: #FF8C00; 
    height: 150px;
}

.sidebar {
    flex: 1; 
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.sidebar-block {
    background-color: #90EE90; 
    height: 200px;
}

.footer-block {
    background-color: #A9A9A9; 
    height: 80px;
    width: 100%;
}


@media (max-width: 768px) {
    .nav-menu {
        flex-direction: column; 
        align-items: center; 
    }

    .nav-item {
        width: 100%;
        text-align: center;
    }

    .nav-item a {
       border-bottom: 1px solid #444; 
    }

    .nav-item:last-child a {
        border-bottom: none; 
    }

    .container {
        flex-direction: column; 
    }

    .main-content, .sidebar {
        width: 100%; 
    }
}