.title {
    color: white;
    text-shadow: 4px 4px #000000;
}

.header{
    padding:20px;
    height:200px;
    text-align: center;
}

.nav-bar{
    background-color:black;
    height:30px;
}

body {
    font-family: 'Franklin Gothic', Helvetica, Arial;
    background-image: url('background.jpg'),url('background2.jpg');
    background-position:center bottom;
    background-repeat: no-repeat, repeat;
    background-size: 1920px auto, auto;
    margin:0;
}

.message{
    color:white;
    padding-left:20px;
    padding-right:20px;
    padding-bottom:10px;
    padding-top:20px;
    background-color: #003399;
    text-align:center;
    box-shadow: 0 4px #000000;
    min-height: 200px;
}
.card-row {
    display: flex;
    gap: 20px;
    margin-left: 20px;
    margin-right: 20px;
    margin-top:40px;
    margin-bottom:40px;
}
.card {
    flex: 1; /* Each card takes equal space */
    background-color: #FFFFFF;
    padding: 20px;
    text-decoration: none;
    color: inherit;
    transition: transform 0.2s, box-shadow 0.2s;
    min-height:300px;
}

.card h3 {
    margin-top: 0;
    color: #003399;
}
.card p {
    font-size: 0.9em;
}

@media (max-width: 800px) {
    #main-content {
        flex-direction: column; /* Stacks the sidebar ABOVE the content-area */
    }
    .card-row {
        flex-direction: column; /* Cards now stack vertically */
        gap: 15px; /* Adjust vertical space between cards */
    }
    .card {
        width: auto; /* Card takes full available width */
        margin: 0;
    }
}