header {
    background-color: #003a60;
    color: white;
    padding: 15px;
    text-align: center;

    nav {
        ul {
            list-style: none;
            margin: 0;
            padding: 0;
        }

        li {
            display: inline-block;
            margin: 10px;
        }

        a {
            text-decoration: none;
            color: white;
        }
    }
}


body {
    word-wrap: break-word;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    background-color: #005d81;
    color: white;
    min-height: 100vh;
    text-align: center;

    h1, h2 {
        margin: 0;
    }
    h1, h2, h3, h4, h5{
        margin-bottom:0;
    }

    ul {
        list-style-position: inside;
    }

    .infographic{
        @media (min-width: 800px) {
            width:800px;
            height:2000px;
        }
        @media (min-width: 400px) and (max-width: 799px) {
            width:400px;
            height:1000px;
        }
        @media (max-width: 399px) {
            width:100%;
            aspect-ratio: 2 / 5;
        }
        border: none;
        padding: 0;
        margin: 0;
    }
    .video{
        width: 100%;
        aspect-ratio: 16 / 9;
        border: none;
        padding: 0;
        margin: 0;
    }

    .container {
        @media (min-width:500px) { width: 75%; }
        margin:auto;
        margin-top:25px;
        margin-bottom:25px;
        background-color: rgba(0, 0, 0, 0.3);
        padding: 20px;
        border-radius: 8px;
        box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
        text-align: center;
        position: relative;
        color:white;

        a{
            color:tomato
        }

        img {
            width: 100%;
            margin-bottom: 5px;
        }
    }
}