/**
* Two sans-serif fonts from Google Fonts: Raleway and Open Sans.
*   - Open Sans is a solid general-purpose sans-serif font, and
*   - Raleway works well for labels and headings.
*/
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
@import url("https://fonts.googleapis.com/css?family=Raleway");

/**
 * Apply border-box to all elements in the page, so content, padding,
 * and border are all taken into account when calculating width and height.
 */
* {
  box-sizing: border-box;
}

body {
  font-family: "Open Sans", sans-serif;
  padding: 1em;
}

form {
  /* Apply some space around our form, and add a border. */
  margin-top: 3em;
  padding: 2em;
  border: 1px solid black;

  /**
   * Set a max-width, so it doesn't expand with the window,
   * using the rest as margin.
   */
  max-width: 800px;
  min-width: 400px;
  margin-left: auto;
  margin-right: auto;

  /**
   * Use a grid layout for the items in the form: two columns,
   * with most of the width in the second.
   */
  display: grid;
  grid-template-columns: 0.3fr 1fr;
  
  /**
   * Align each item in the grid cell's center,
   * and add 20px of space between the rows and columns.
   */
  align-items: center;
  grid-gap: 20px;
}

/*
  * Use a better font and larger text size for our labels,
  * to make them easy to read.
  */
form label {
  font-family: "Raleway", sans-serif;
  font-size: 1.5em;
}

/**
 * Style the input controls, including the textarea, so they are full width
 * in their cells, use a larger font-size, have a light gray border, and
 * have slightly rounded corners.
 */
input,
textarea {
  width: 100%;
  padding: 0.3em;
  font-size: 1.5em;
  border: 1px solid rgb(206, 212, 218);
  border-radius: 0.25em;
}

/**
 * When an input control has the focus, change its border color
 * to light blue so that it is clear where the user is entering text.
 */
input:focus,
textarea:focus {
  outline: 3px solid lightskyblue;
}

/**
 * Stretch the textarea from the start of the grid to the end.  NOTE: the
 * grid has the columns, but the numbers here are for the *outside lines*
 * of each column.
 */
textarea {
  grid-column: 1 / 3;
}

/**
 * Move the buttons to the right side of the right column.
 * First, add <div> element to wrap the buttons in the HTML file.
 */
.buttons {
  grid-column: 2 / 3;
  text-align: right;
}

/**
 * For the two "submit" style buttons, make them stand out a bit more
 */
input[type="submit"],
input[type="reset"] {
  width: 150px;
  background-color: rgb(0, 123, 255);
  color: white;
}

 /**
  * Also do something when you hover or focus them
  */
input[type="submit"]:hover,
input[type="submit"]:focus,
input[type="reset"]:hover,
input[type="reset"]:focus {
  background-color: #0069d9;
}