@import url(reset.css);

body {
    background-color: darkseagreen;
    font-family: verdana;
}

.pageWrapper {
    min-height: 90vh;
    width: 80vw;
    max-width: 1000px;
    margin: 0 auto;
}

.sidebar {
    background-color: goldenrod;
    min-height: 90vh;
    float: left;
    width: 250px;
}

.main {
    background-color: peru;
    min-height: 90vh;
    margin-left: 250px;
}

header {
    background-color: palegreen;
    min-height: 20vh;
}

.hero {
    background-color: thistle;
    min-height: 40vh;
    position: relative;
    background-image: url(../images/heroGraphic.jpg);
    background-size: cover;
    background-position: 0 65%;
}

.alertBox {
    width: 190px; height: 100px;
    background-color: chocolate;
    position: absolute; 
    top: 9px; right: 9px;
}

.promos {
    background-color: lightblue;
    min-height: 30vh;
    display: flex;
    justify-content: space-evenly;
    padding-top: 9px;
}

.promoItem {
    background-color: blueviolet;
    width: 200px; height: 150px;
    margin: 0 0;
}

.promoItem:first-child {
    background-color: purple;
    background-image: url(../images/matterhorn.jpg);
    background-size: 400px;
    background-position: 50% 10%;
}