index.css

/* set defaults for body, everything center aligned, full width even at narrow breakpoint */
body {
    font-family: 'Poppins', sans-serif;
    font-size: 14px;
    margin: 0;
    padding: 0;
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    max-width: 100%;
    width: 100%;
}

/* #logo should be horizontal flex box, justify content space between, align items center, max width 1440px */
#logo {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width: 1440px;
    width: 15%;
    padding: 0 8px;
    margin: 0 0px;
}

#logo img {
    height: 16px;
}

/* set default of 48px for all img inside body */
img {
    height: 48px;
}

/* #header section flex box, justify content space between, align items center, max width 1440px */
#header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1440px;
    width: 100%;
}

/* nav should be horizontal, ul should be horizontal, li should be horizontal, no list style, no margin, no padding */
nav {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width: 40%;
    width: 100%;
}

nav ul {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width: 1440px;
    width: 100%;
    padding: 0 24px;
    list-style: none;
    margin: 0;
    padding: 0;
}

/* #search-form should be above #hero */
#search-form {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1440px;
    width: 100%;
    padding: 16px 16px;
    margin: 16px;
    margin-left: 48px;
    margin-right: 48px;
}

/* #search-form div should be horizontal flex box, justify content space between, align items center, max width 1440px */
#search-form {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width: 1440px;
    width: 100%;
}

/* #search-bar should be horizontal flex box, justify content space between, align items center, max width 1440px */
#search-bar {
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    max-width: 1000px;
    width: 100%;
   padding-left: 24px;
    background-color: rgb(245, 245, 245);
}

/* make the #search-form img 20px height */
#search-form img {
    height: 20px;
}

#search-form input {
    padding: 16px 16px;
    border-radius: 0px;
    border: none;
    font-size: 16px;
    font-weight: 600;
    width: 100%;
    background-color: rgb(245, 245, 245);
}

#search-form button {
    margin-left: 16px;
    padding: 16px 32px;
    border-radius: 0px;
    border: none;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

/* join button should have black border, white background, black text */
#join {
    border: 1px solid #000;
    background-color: transparent;
    color: #000;
}

/* no background for #login */
#login {
    background-color: transparent;
    color: black;
}

/* make hero section full width with flexbox, and set background image, height 844px max */
#hero {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background-color: rgb(242, 238, 233);
    background-repeat: no-repeat;
    background-size: cover;
    height: 600px;
    width: 100%;
    max-width: 100%;
}

/* #hero h1, centered in section, 54px margin top and bottom */
#hero h1 {
    text-align: center;
    font-size: 80px;
    font-weight: bold;
    color: #000;
    margin: 0;
    margin-top: 54px;
    margin-bottom: 54px;
}

/* #hero p, centered aligned, flex box center, max width 512px */
#hero p {
    text-align: center;
    font-size: 24px;
    font-weight: 400;
    color: #000;
    margin: 0;
    margin-bottom: 54px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 512px;
}


/* #hero-buttons, flex box, justify content center, flex wrap wrap, max width 512px */
#hero-buttons {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 512px;
    padding: 16px 32px;
}

#hero-buttons button {
    margin: 8px;
    padding: 16px 56px;
    border-radius: 0px;
    border: none;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
}

#red-button {
    background-color: #ff0000;
    color:white;
}

#white-button {
    background-color: #fff;
    color: #000;
}

/* center-section padding 0 24px, max width 1440px, center align flex */
#center-section {
    max-width: 1440px;
    width: 100%;
    margin-top: 100px;
    margin-bottom: 100px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}

/* #center-section h2 should be 32px font size, 600 font weight, black color, margin 0, margin bottom 32px, text highlight color bisque*/
#center-section h2 {
    font-size: 32px;
    font-weight: 600;
    color: #000;
    margin: 0;
    margin-bottom: 32px;
    text-align: center;
    background-color: bisque;
    margin: 48px;
}

/* #center-section p should be 16px font size, 400 font weight, black color, center aligned text */
#center-section p {
    font-size: 16px;
    font-weight: 400;
    color: #000;
    text-align: center;
}

/* #center-p-text should be center aligned flex, max width 512px, center of div */
#center-p-text {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    max-width: 512px;
    margin: auto;
}

/* #center-section img should be large size */
#center-section img {
    height: 200px;
    width: 100%;
    max-width: 100%;
}

/* #features-section should be flex box, text aligned to left, flex wrap wrap, max width 1440px, margin top 100px, margin bottom 100px */
#features {
    display: flex;
    justify-content: left;
    max-width: 1440px;
    width: 100%;
    margin-top: 100px;
    margin-bottom: 100px;
}

#features div {
    margin-right: 48px;
}

#features h2 {
    text-align: left;
    font-size: 16px;
    font-weight: 600;
    color: red;
    margin-top: 24px;
    margin-bottom: 32px;
}

#bottom-button {
    margin-top: 32px;
    padding: 16px 72px;
    border-radius: 0px;
    border: none;
    font-size: 16px;
    font-weight: 600;
    cursor: pointer;
    background-color: black;
    color: white;
}