/**
 * 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.
 * One serif font:
 *   - Old Standard TT has an old-fashioned look.
 */
@import url("https://fonts.googleapis.com/css?family=Open+Sans");
@import url("https://fonts.googleapis.com/css?family=Raleway");
@import url("https://fonts.googleapis.com/css?family=Old+Standard+TT");

/**
 * Dark mode theme
 */

.dark {
  background-color: black;
  color: whitesmoke;
}

/**
 * Classic style theme
 */
 
.classic {
  background-color: antiquewhite;
  color: black;
  font-family: "Old Standard TT", serif;
}

/* ------------ styling the web page and input elements ------------ */

/**
 * 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;
}

/**
 * Use Open Sans for the entire document.  Add some space around the body.
 */
body {
  font-family: "Open Sans", sans-serif;
  padding: 20px;
  margin: 0 30px 30px 30px;
}

/**
 * Apply some space around the form and add a border.
 */
.form {
  margin-top: 10px;
  padding: 8px;
  border: 1px solid lightgray;
  border-radius: 10px;
  width: 330px;
}

/*
  * Use a better font and larger text size for the labels to make it easy
  * to read.  Add some spacing to the make the form cleaner.
  */
.form label {
  font-family: "Raleway", sans-serif;
  font-size: 14px;
  margin-right: 15px;
  margin-left: 15px;
}

/**
 * Style the input control with a font size a bit smaller than the label,
 * use a larger font-size with a light gray border and slightly rounded
 * corners.
 */
select, input {
  font-family: "Raleway", sans-serif;
  font-size: 12px;
  border: 1px solid lightgray;
  border-radius: 10px;
  padding-right: 10px;
  margin-right: 15px;
}

input {
  background-color: lightgray;
}