html {

    min-width: 300px; 

    overflow-x: hidden;

}



body {

    background-color: #2e5780;

    background-size: cover;

    background-position: center;

    background-repeat: no-repeat;

    background-attachment: fixed;

    color: #ffffff;

    margin: 0 auto;

    font-family: Arial, sans-serif;

    height: 100%;

    margin: 0;

    display: flex;

    flex-direction: column;

    align-items: center;

    justify-content: center;

}



.content{

    width: 90%;

    max-width: 1200px; 

    margin: 10px;

    overflow: hidden;

}



.navbar {

    background-color: #0d4f91;

    padding: 0.5rem;

    border-radius: 5px;

    list-style-type: none;

    margin: 3px;

    display: flex;

    flex-wrap: wrap;

    justify-content: center; 

    gap: 10px;

}



.nav-item {

    font-size: 1rem;

    font-weight: bold;

    color: #ffc107;

    text-align: center;

    margin: 5px;

    padding: 1px;

}



.nav-item a {

    text-decoration: none;

    color: #ffc107;

    padding: 4px 12px;

    display: block;

    border-radius: 5px;

    transition: background-color 0.3s ease-in-out;

}



.nav-item a:hover {

    text-decoration: none;

    color: #ffbb00;

    background-color: rgba(255, 255, 255, 0.2);

}



h1, h2 {

    margin-left: 10px;

    padding: 5px;

    font-size: clamp(18px, 3vw, 32px); 

}



.filtertitle {

    background-color: #13304e;

    border-radius: 5px;

    padding: 10px;

    margin: 10px auto;

    text-align: center;

    width: 100%;

    max-width: 100%;

}



.table-container {

    overflow-x: auto; 

    width: 100%;

}



table {

    width: 100%;

    border-collapse: collapse;

    background-color: #5491ce;

    max-width: 100%;

}



th, td { 

    border: 2px solid black;

    padding: 10px; 

    text-align: left;

    word-wrap: break-word;

    overflow-wrap: break-word;

}



th { 

    background-color: #ffc400;

    font-size: 1.4rem;

    font-weight: bold;

}



a {
    text-decoration: none;

    color: #ffc107;

    font-size: clamp(14px, 2vw, 18px);

}



a:hover {

    text-decoration: underline;

    color: #ffbb00;

}



footer {

    background-color: #0e3b75;

    color: white;

    font-weight: bold;

    text-align: center;

    padding: 5px 0;

    width: 100%;

    margin-top: auto;

    margin-bottom: 0%;

    position: relative;

}



@media (max-width: 768px) {

    .content {

        padding: 1rem;

        width: 100%;

    }



    .navbar {

        flex-direction: column;

        align-items: center;

    }



    .nav-item {

        width: 100%;

        text-align: center;

    }



    .nav-item a {

        width: 100%;

        padding: 2px;

        font-size: 1.1rem;

    }



    table {

        font-size: 14px;

    }



    th {

        font-size: 1rem;

    }



    .filtertitle {

        font-size: 1rem;

        padding: 5px;

    }



    h1 {

        font-size: 1.5rem;

    }

}