*,
::before,
::after{
    box-sizing:border-box;
}

h1,h2,h3,h4,h5,p,a{
    color:seashell;
}

body{
    margin:0 auto;
    align-items: center;
    justify-content: center;
    font-family: Helvetica;
    font-size: 22px;
    color:seashell;
    background-color:black;
    opacity: 0.9;
    text-align: center;
    /* width: 1020px; */
    max-width: 1024px;

}

wrapper{
    margin:0 auto;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    /* margin-inline:20px; */

}

header{
    height:69px;
    width:100%;
    border-bottom: 1px solid seashell;
    display:flex;
    flex-direction: row;
    justify-content: space-between;
}

#logo{
    margin-top:10px;
    height:75px; 
    background-color: antiquewhite;
    border-radius: 50%;

}

#primary-navigation ul li{
    list-style: none;
}

#primary-navigation ul li a{
    margin-inline: .5rem;
    color:seashell;
}

#banner{
    background-image: url('img/bg-city.jpg');
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    min-height: 600px;
    display:flex;
    
}
#mission{
    align-self: center;
    background-color:black;
    color:seashell;
    width:100%;
    /* margin-block-end: 5rem; */
} 

#mission *{
    margin:0;
    padding-block: .5rem;
}
#tea-of-month{
    max-width: 1000px;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    align-items: center;
    justify-content: center;
    gap:2rem;
    margin-block-end:5rem;

    .screenshot{
        height:200px;
        width:300px;
        margin-bottom:1.1rem;

        img{
            max-width:300px;
        }
        h4{
            margin:.3rem;
        }
    }
}

h2{
    font-size:2rem;
}

h4{
    font-size:1.2rem;
    font-weight:1000;
    letter-spacing: .01rem;
}
#locations{
    background-image: url('img/bg-mpls.jpg');
    min-height: 600px;
    display:flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    align-self:center;
    gap:40px;

    .site {
        /* width:250px; */
        height:300px;
        color:seashell;
        /* background-color: #2550db; */
        background: url('img/alhatimi-contact.png');
        background-size: cover;
        background-repeat: no-repeat;
        width: 100%;
        padding:1rem;
        /* border-radius: 15px; */
        /* filter:blur(.1rem); */

        p{
            font-size: 1.2rem;
        }   
    }
    .site #alhatimi {
        background: url('img/alhatimi-contact.png');
    }
    .site #dc-v1 {
        background: url('img/dc-v2-home.png');
    }
    .site #dc-v2 {
        background: url('img/screenshots/dc-v1-home.png');
    }
}
@media screen and (max-width: 35em){
    #locations {
        background-image: url('img/bg-mpls.jpg');
        /* min-height: 750px; */
        display:flex;
        flex-direction: column;
        width: 100%;
        /* align-items: center;
        justify-content: center;
        align-self: center; */
        /* gap:40px; */
    }

    .site {
        width: 100%;
        background-color: red;
    }
}
.screenshot{
    height:200px;
    width:300px;
    margin-bottom:1.1rem;

    img{
        max-width:300px;
    }
    h4{
        margin:.3rem;
    }
}
.locations-h2{
    position:relative;
    top:150px;  
    padding-bottom: 10rem;
}

#tea-cozy{
    height:200px;
    margin-block-end:20px;
}
footer{
    text-align: left;
    margin-left:20px;
}