* {
    /* resets every element to a margin and padding of 0px, overriding browser settings. Good practice to use on every site. */
    margin: 0px;
    padding: 0px;
}

html {
    background-color: white;
}

body {
    background-color: whitesmoke;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 18px;
    /* this next one sets the text color */
    color: darkslategray;
    width: 960px;
    margin: 0 auto;
}

header {
    display: flex;
    height: 150px;
}

header > div {
    /* using ">" means only div elements that are children the header. because the header is set to display: flex, this can be further defined here*/
    flex: 1;
    /* will apply to all divs in header so they're all equal  */
    text-align: center;
    /* default flex-direction: row is default horizontally. vertical alignment will be set within align-self  */
    align-self: flex-end;
}

li {
    /* to set the navigation text links side by side */
    display: inline;
}

header img {
    /* didn't use the ">" bc it's not a direct child of the header. instead it's every img in the header */
    max-width: 100px;
}

h1 {
    margin: 10px;
    font-size: 20px;
}

ul {
    margin: 10px 0;
    padding: 0;
}

a {
    text-decoration: none;
    /* the color below is to set the color of the text links */
    color: darkslategray;
}

a:hover {
    color: firebrick;
}

#signup {
    /* again id=#. Class=. */
    background-image: url(images/main.jpg);
    height:500px;
    display: flex;
    flex-direction: column;
    align-items: center;
    /* when flex direction is set to column, align-items will center them across the page horizontally */
    justify-content: center;
    /* justify-center will center the whole thing on the page */
}

h2, h3 {
    /* with a comma you can select multiples */
    background-color: rgba(46, 39, 39, .5);
    /* the A in rgbA is for alpha. scale is from 0-1 */
    padding: 5px;
    color: white;
    font-weight: 300;
}

input[type="email"] {
    width: 250px;
    padding: 5px;
    border-radius: 5px;
    font-size: 14px;
    border: none;
}

input[type="submit"] {
    background: #ccc;
    padding: 5px 15px;
    border: none;
    border-radius: 5px;
    font-size: 14px;
}

#ideas {
    display: flex;
    /* display flex, again will display them side by side */
    padding: 15px;
}

#ideas img {
    width: 100%;
}

.relative {
    position: relative;
    /* elements original position in the flow of the doc. */
}

.category-title {
    position: absolute;
    /* because the absolute is in a relative container (if there is none, it will move it off 
    of the full document. it will guide the position off of that and remove it from the flow of the document. 
    so you have to use top, right, bottom, and left to set the position */
    top: 20px;
    width: 100%;
    text-align: center;
    padding: 5px 0;
}

.middle {
    margin: 0 15px;
}

footer {
    display: flex;
    /* again, flex direction by default is row, so the below changes it to column.
    we have to use flex in order to use align-items: center; */
    flex-direction: column;
    align-items: center;
    /* if you set the flex direction to row and align items to center, it will align 
    it centered on a row or horizontal axis */
    background: whitesmoke;
    padding: 20px;
}

footer img {
    max-width:80px;
}