.container {
    display: flex;
    width: 100%;
}

.dashboard {
    width: 25%;
    /* 1/4th of the screen */
    padding: 20px;
    border-right: 1px solid #ccc;
    min-height: 50vh;
    /* Visual separation between dashboard and content */
}

.content {
    width: 75%;
    /* 3/4ths of the screen */
    padding: 20px;
}

/* Additional styling for responsiveness */
@media (max-width: 768px) {

    .dashboard,
    .content {
        width: 100%;
        padding: 10px;
    }

    .dashboard {
        border-right: none;
        border-bottom: 1px solid #ccc;
        /* Visual separation in a stacked layout */
    }
}

.splash-header {
    width: 100%;
    height: 100px;
    background-image: url('../assets/placeholder-image.png');
    background-size: cover;
    background-position: center;
}

/* Styling for the "Access Class" button to match the "Search" button */
.resource-column a {
    display: inline-block;
    padding: 10px 20px;
    background-color: #000000;
    /* Assuming the Search button has a blue background */
    color: white;
    text-decoration: none;
    border-radius: 5px;
    font-weight: bold;
    transition: background-color 0.3s ease;
    margin-bottom: 20px;
}

.resource-column a:hover {
    background-color: #0056b3;
    /* Darker shade of blue for hover effect */
}