* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

img, picture, video, canvas, svg {
    display: block;
    max-width: 100%;
  }

html, body {
    height: 100%;
}

html {
    display: table;
    margin: auto;
}

body {
    background-image: url("./assets/bg800bulbs.jpg");
    background-color: #544d47;
    background-repeat: no-repeat;
    background-position:top left -10rem;
}

hr {
    margin-left: 2rem;
    margin-right: 2rem;
    margin-bottom: 1rem;
}

h1 {
    font-family: "Patua One", serif;
    margin-left: 2rem;
}

p {
    font-family: "Barlow Semi Condensed", sans-serif;
    margin-left: 2rem;
    padding-bottom: 1rem;
    padding-right: 1rem;
}

a {
    font-family: "Barlow Semi Condensed", sans-serif; 
}

button {
    width: 30%;
    margin-left: 15rem;
    margin-bottom: 5rem;
    border: 1px solid grey;
    border-radius: 0.5rem;
    background: lightgray;
    padding: 10px;
    font-size: 1.5rem;
}

.container {
    background: #fff;
    margin: 3.125rem auto;
    border-radius: 0.5rem;
    width: 50vw;
}

.flex-container {
    display: flex;
    flex-direction: row;
    padding: 1.563rem;
}

.flex-item-left {
    background-color: #fff;
    flex: 50%;
    align-self: flex-end;
    justify-content: flex-start;
    width: 100%;
    float: none;
}

.flex-item-center {
    background-color: #fff;
    margin-left: 8rem;
    font-size: 1.5rem;
    align-self: flex-end;
    justify-content: flex-start;
    width: 100%;
}

.subcontainer1 {
    display: flex;
    padding-top: 0.781rem;
    overflow: hidden;
}

.subcontainer2 {
    background-color: #e2fee2;
    display: flex;
    padding-top: 2rem;
    padding-bottom: 2rem;
    margin: 2rem;
    overflow: hidden;
    font-size: 1.5rem;
}

.bannerimage {
    width: 100%; 
}

/* I think my monitor size is effecting what I see- I haven't been able to get the banner to 'fit' 
across the screen no matter the size, even using various object-fit options. However, my monitor 
is also a good bit bigger than 960px so I suspect that's the issue*/

.box1 {
    padding-right: 2rem;
    width: 70%; 
    border-radius: 0.5rem; /*haven't been able to figure out why the other corners aren't curving*/
    overflow: hidden;
}

.box2 {
    padding-left: 1.5rem;
}

.box3 {
    width: 100%;
    height: 5rem;
    font-size: 1.5rem;
    padding: 1.5rem;
    background-color: orange;

}

.barlow-semi condensed-regular {
    font-family: "Barlow Semi Condensed", sans-serif;
    font-weight: 400;
    font-style: normal;
}

.patua-one-regular {
    font-family: "Patua One", serif;
    font-weight: 400;
    font-style: normal;
}