main.css

body {
    font-family: 'San Francisco', 'Segoe UI', 'Arial', sans-serif;
    /* The text-align property tells the browser to
     *
     *        align the text
     *         in the box
     *          like this
     *
     * instead of
     * like this, aligned
     * to the left, which is the default.
     *
     */
    text-align: center;
}

#menubar {
    /* These four lines align the header
     *  and the "about" link on the same line.
     *
     *  Read more about flex-box CSS styles
     *  at https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    /* These two lines add some "padding" (empty space)
     *  to the left and right of the menubar */
    padding-left: 16%;
    padding-right: 16%;
}

.inputBox {
  /* These four lines align the LABEL and INPUT
   *  boxes on the same horizontal line.
   *
   * Don't worry too much about understanding what
   *  these lines do today. */
    display: flex;
    flex-direction: row;
    justify-content: space-between;
    align-items: center;

    margin-bottom: 20px;

    padding-left: 16%;
    padding-right: 16%;
}

label, input, button {
    font-size: 24px;
}

input {
    /* min-width sets the minimum allowed size
     * for this element. No matter how small or big
     * the rest of the page was resized, the input
     * box is guaranteed at least 100px width */
    min-width: 100px;
    border-width: 2px;
    border-style: solid;
    border-color: grey;
}

button {
    background: grey;

    padding-top: 6px;
    padding-bottom: 6px;
    padding-left: 12px;
    padding-right: 16px;

    /* "color" by itself stands for the text color */
    color: #fff;
    box-shadow: 0 2px 6px -1px rgba(0, 0, 0, .4);
}

/* The ":hover" selector only applies styles when
 *  you're hovering the mouse over the element */
button:hover {
    opacity: .7;
}