body {
    font-family: Arial, Helvetica, sans-serif;
}

.header {
    padding: 1px; /* some padding */
    text-align: center; /* center the text */
    background: white; /* white background */
    color: #006; /* navy text color */
    max-width: auto;
    height: auto;
} 

/* Increase the font size of the <h1> element */
.header h1 {
    font-size: 45px;
}

/* Style the top navigation bar */
.navbar {
    overflow: hidden; /* Hide overflow */
    background-color: #fff; /* White background color */
}

/* Style the navigation bar links */
.navbar a {
    float: left; /* Make sure that the links stay side-by-side */
    display: block; /* Change the display to block, for responsive reasons (see below) */
    color: #006; /* Navy text color */
    text-align: center; /* Center the text */
    font-weight: 600;
    padding: 14px 20px; /* Add some padding */
    text-decoration: none; /* Remove underline */
}

/* Right-aligned link */
.navbar a.right {
    float: right; /* Float a link to the right */
}

/* Change color on hover/mouse-over */
.navbar a:hover {
    background-color: #ddd; /* Grey background color */
    color: black; /* Black text color */
}

.about {
    padding: 80px; /* some padding */
    text-align: center; /* center the text */
    background: white; /* white background */
    color: #006; /* navy text color */
}

/* Ensure proper sizing */
* {
    box-sizing: border-box;
}

/* Column container */
.row {
    display: flex;
    flex-wrap: wrap;
}

/* Create two unequal columns that sits next to each other */
/* Sidebar/left column */
.side {
    flex: 50%; /* Set the width of the sidebar */
    background-color: #f1f1f1; /* Grey background color */
    padding: 45px; /* Some padding */
}

/* Main column */
.main {
    flex: 50%; /* Set the width of the main content */
    background-color: white; /* White background color */
    padding: 45px; /* Some padding */
}

/* Responsive layout - when the screen is less than 700px wide, make the two columns stack on top of each other instead of next to each other */
@media screen and (max-width: 700px) {
    .row {
        flex-direction: column;
    }
}

/* Responsive layout - when the screen is less than 400px wide, make the navigation links stack on top of each other instead of next to each other */
@media screen and (max-width: 400px) {
    .navbar a {
        float: none;
        width: 100%;
    }
}

.responsive {
    max-width: 100%;
    height: auto;
}
li {
    line-height: 2; /* doubles the vertical space */
}

map-container {
    position: relative;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    height: 0;
    overflow: hidden;
    align-content: center;
}

map-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    max-width: 100%;
    height: auto;
}

/*My code - images responsive*/
.responsive {
    width: 100%;
    height: auto;
}

/*My code - video size responsive*/
.video-container {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio (height/width * 100) */
    height: 0;
    overflow: hidden;
    background: #000; /* fallback background */
}

/* Make the video fill the container */
.video-container video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* or 'contain' to avoid cropping */
}

.footer {
    padding: 30px; /* Some padding */
    text-align: left; /* left-align text*/
    background: #ddd; /* Grey background */
}