@media (max-width: 768px) {
    .header {
        padding: 5px 10px;
    }

    h1 {
        font-size: 1.5em;
        margin-left: 5px;
    }

    .nav-buttons {
        gap: 10px;
    }

    .nav-button {
        font-size: 0.9em;
    }

    #settings-button{
        font-size: 1.5em;
    }

    #home-button {
        position: relative;
        right: 35px;
        top: 2px;
    }

    #courses-button {
        position: relative;
        right: 35px;
        top: 2px;
    }

    #settings-button {
        position: relative;
        top: 2px;
        right: 25px;
    }

    #menu {
        font-size: 1.2em;
    }

    .courses-container {
        flex-direction: column; /* Stack cards vertically on smaller screens */
        align-items: center; /* Center align cards */
    }

    .course-card { /* Two-column layout with margin */
        width: calc(100vw - 50px); /* Set width for two-column layout */
        margin: 10px; /* Adjusted margin between cards */
        padding: 0; /* Reset padding */
        height: calc(100vw - 50px); /* Make the height equal to width for square shape */
    }

    .course-card:hover {
        border-color: #888; /* Darker border color on hover */
        transform: none; /* Remove transform on hover */
    }

    .course-card h3 {
        font-size: 1.2em; /* Adjusted font size for smaller screens */
    }

    .course-card p {
        font-size: 0.9em; /* Adjusted font size for smaller screens */
    }
}