dc.css

*{
    margin: 0;
    box-sizing: border-box;
    text-decoration: none;
}
#box1 {
    background-image: url("src/dc.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 25vh;
    width: 100%;
}
header{
    text-align: right;
    color: navy;
    font-size: 3vw;
}
h1{
    padding: 2%;
    background-color: rgba(255,255,255,0.5);
    font-family: "Georgia", serif;
}
header p{
    padding-right: 2%;
    background-color: rgba(255,255,255,0.5);
    padding-bottom: 5%;
}

h2, nav{
    font-family: "Verdana", sans-serif;
}
h2{
    font-size: 3vw;
    margin-bottom: 2%;
}
p{
    font-family: "Helvetica Neue", sans-serif;
    font-size: 1.2vw;
}

nav{
    background-color: #D3D3D3;
    width: 60%;
    box-sizing: border-box; /* Makes sure padding is included in the width */
}

nav li{
    list-style: none;
    font-size: 1vw; /* Reduced from 1.2vw to give more space */
    padding: 10% 1%; /* Reduced horizontal padding */
    color: navy;
    display: block; /* Ensure each nav item is on its own line */

}

nav ul {
    padding-left: 0; /* Removes default padding */
    margin: 0; /* Removes default margin */
    text-align: left;
    display: flex; /* Makes the items flex items, adjusting better to space */
    flex-wrap: wrap; /* Allows items to wrap if needed */
}
main{
    padding: 2%;
}
main p{
    text-align: left;
}
#ggb, #sc, #holl, #background, #whitehouse, #nationalmall, #lincolnmemorial {
    padding: 3% 0 3% 0;
    border-bottom: navy 5px dotted;
}
#sc{
    border: none;
}
#page-wrapper{
    display: flex;
    flex-direction: column;
    text-align: center;
    background-color: navy;
    width: 70%;
    margin: auto;
}
#container{
    background-color: #FFEFD5;
    display: flex;
    flex-direction: row;
}
#box2{
    background-image: url("src/dc.jpg");
    background-repeat: no-repeat;
    background-size: cover;
    background-position: center;
    height: 14vh;
    width: 100%;
}
footer{
    background-color: rgba(255,255,255,0.5);
    padding-bottom: 6%;
    color: navy;
    padding-top: 3%;
}
img{
    margin-bottom: 2%;
    width:90%;
}
@media screen and (max-width:750px){
    #container{
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    nav{
        display: flex;
        flex-direction: column;
        width: 100%;
    }
    nav li{
        width: 100%;
        text-align: center;
        display: inline;
        border-left: none;
    }
    nav ul{
        margin: auto;
        width: 100%;

        font-size: 4vw;
        text-align: center;
    }
    header {
        text-align: center;
    }
    main    {
        width: 100%;
        display: flex;
        flex-direction: column;
    }
    img{
        max-width: 40%;
    }
    #page-wrapper {
        width: 100%;
        display: flex;
        flex-direction: column;
        margin: 0;
    }
}