index.css

/* Zero out the margins and padding so that we can start from a clean slate. */
* {
  margin: 0px;
  padding: 0px
}

/* This will target the body element */
body {
  /* Sets the documents font to system_ui */
  font-family: system-ui;

  /* Sets the height to 100% of the height of the browser */
  height: 100vh;

  /* Sets the display mode to flex, allowing you to put components side by side */
  display: flex;

  /* Aligns the elements inside of the body in the center of the browser */
  justify-content: center;
  align-items: center;
}

/* This will target elements with the class of App */
.App {
  /* This will set the background color */
  background: rgb(178, 190, 181);

  /* Creates a border of a solid black line with a width of 2px, then gives corners
  a radius of 5px */
  border: solid black 2px;
  border-radius: 5px;

  /* Sets the width to 35 character widths */
  width: 35em;

  /* Sets the display mode to grid, then creates 2 columns with equal widths */
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Selects any element with the class border */
.border {
  /* Creates a border of a solid black line with a width of 2px, then gives corners
  a radius of 5px */
  border: solid black 2px;
  border-radius: 5px;
}

/* Selects all button elements */
button {
  /* Adds the top and bottom padding to 0.5 the width of a character and the 
  left and right to 3 times the width of a character */
  padding: 0.5em 3em;

  /* Sets the font size to 16px */
  font-size: 16px;

  /* Sets the radius of the button to 5px */
  border-radius: 5px;
}

/* Selects all input elements */
input {
  /* Sets the width to 50px */
  width: 50px;

  /* Sets the margin of the right to the size of 1 character width */
  margin-right: 1em;

  /* Sets the radius of the input to 5px */
  border-radius: 5px;
}

/* Selects all elements with the class panel-title */
.panel-title {
  /* Sets the font size to small */
  font-size: small;
}

/* Selects all elements with the id of latest-values_container */
#latest-values_container {
  /* Sets the width and height to 15 character widths */
  width: 15em;
  height: 15em;

  /* Sets the margin to auto allowing the browser to set the left and right 
  margins to equal values */
  margin: auto;
}

/* Selects all the section elements that are inside of an element with the id
of latest-values_container */
#latest-values_container > section {
  /* Sets the height to 13.75 of a character width */
  height: 13.75em;

  /* Centers the text */
  text-align: center;
}

/* Selects element with class latest-values-table */
.latest-values-table {
  font-size: 13px;
}

/* Selects all elements with the id of statistics_container */
#statistics_container {
  /* Sets the width to 17.25 character widths and the height to 12.75 character
   widths */
  width: 17.25em;
  height: 12.75em;

  /* Sets the margin to auto allowing the browser to set the left and right 
  margins to equal values */
  margin: auto;

  /* Sets the margin to a character width */
  margin-right: 1em;

  /* Sets the position to relative so that you can position it relative to its 
  normal position */
  position: relative;
}

/* Selects all sections the are inside of elements with a class 
vertical-center inside elements with the id of statistics_container */
#statistics_container > .vertical-center > section {
  /* Centers the text */
  text-align: center;
}

/* Selects all sections that are inside a div, inside an element with the id
of statistics_container */
#statistics_container > div > section {
  /* Sets the height to 16.75 of a characters width */
  height: 16.75em;
}

/* Selects elements with the id of statistic-table-title */
#statistic-table-title {
  /* Sets the display mode to flex, allowing you to put components side by side */
  display: flex;

  /* Sets the direction of the content to be vertical */
  flex-direction: column;

  /* Sets the margins around the children to be equal */
  justify-content: space-around;

  /* Adds some margins to the top and bottom */
  margin-top: 25px;
  margin-bottom: 50px;
}

#statistic-table {
  /* Sets the display mode to flex, allowing you to put components side by side */
  display: flex;

  /* Sets the direction the components will be displayed */
  flex-direction: column;
}

#statistic-table table {
  /* Sets the width fo the table to 90% */
  width: 90%;
}

#statistic-table table thead tr {
  /*  Sets the height to 30px */
  height: 30px;
}

#statistic-table table tbody tr {
  /* Sets the height to 40px */
  height:40px;
}

#statistic-table button {
  /* Sets the button width to 90% of its containers width */
  width: 90%;
}

/* Selects the elements with the class content-panel that is a child of elements
with the class name vertical-center that is a child of an element with the 
id of statistics_container */
#statistics_container > .vertical-center > .content-panel {
  /* Sets the font size to small */
  font-size: small;
}

/* Selects element with class vertical-center */
.vertical-center {
  /* Sets all margins around this element to 0 */
  margin: 0;

  /* Vertically centers the element */
  position: absolute;
  top: 50%;
  -ms-transform: translateY(-50%);
  transform: translateY(-50%);
}

/* Selects element with the class content-panel that has a child with the class
vertical-center  */
.vertical-center > .content-panel {
  display: grid;
  grid-template-columns: 1fr 4fr;
  width: 21em;
}

/* Selects elements with class margin-top */
.margin-top {
  /* Sets the margin-top to 18px */
  margin-top: 18px;
}

/* Selects elements with the is of status_container  */
#status_container {
  /* Sets the size of the element to span over 2 columns */
  grid-column: 1/3;

  /* Sets the left and right margins to 1 character width */
  margin-left: 1em;
  margin-right: 1em;
}

/* Selects elements with the id status-message */
#status-message {
  /* Sets the padding to 0.5 character widths */
  padding: 0.5em;
  
  /* Centers the text */
  text-align: center;
}

/* Selects elements with the id alarm_container */
#alarm_container {
  /* Extends the width of the element to 2 columns */
  grid-column: 1/3;

  /* Sets the display to grid, with 2 equally sized columns */
  display: grid;
  grid-template-columns: 1fr 1fr;

  /* Sets the top, right and left margins to 1 character width and the bottom 
  to 0.5 character width */
  margin: 1em 1em 0.5em 1em;
}

/* Selects element with id current-alarm_container */
#current-alarm_container {
  /* Sets the margin to auto allowing the browser to set the left and right 
  margins to equal values */
  margin: auto;
}

/* Selects p elements inside of elements with the id current-alarm_container */
#current-alarm_container > p {
  /* Sets the bottom margin to 1 character width */
  margin-bottom: 1em;
}

/* Select elements with the id of set-alarm_container */
#set-alarm_container {
  /* Sets the margin to auto allowing the browser to set the left and right 
  margins to equal values */
  margin: auto;

  /* Sets the top and bottom margins to 0.5 character widths */
  margin-top: 0.5em;
  margin-bottom: 0.5em;
}

/* Select elements that have the id of input-h */
#input-h {
  /* Sets the left margin to 2 character widths */
  margin-left: 2em;
}

/* Select buttons the are child elements of elements with the id of 
set-alarm_container */
#set-alarm_container > button {
  /* Set the top margin to 8px */
  margin-top: 8px;
}

/* Select elements with the id input_container */
#input_container {
  /* Sets the size to 2 columns */
  grid-column: 1/3;
}

/* Select elements with the id of input_container */
#input_container {
  /* Sets the display mode to grid with equally sized columns */
  display: grid;
  grid-template-columns: 1fr 1fr;

  /* Sets the height to 8 character widths */
  height: 8em;

  /* Sets the top margin to 0.5 character widths, and the rest to 1 character 
  widths */
  margin: 0.5em 1em 1em 1em;
}

/* Select elements with the id of current-sensor-h and current-sensor-t */
#current-sensor-h,
#current-sensor-t {
  /* Creates a border of a solid black line with a width of 2px, then gives corners
  a radius of 5px */
  border: solid black 2px;
  border-radius: 5px;

  /* Sets the font size to small */
  font-size: small;

  /* Sets the top and bottom padding to 0 and the left and right to 0.5 
  character width */
  padding: 0em 0.5em;

  /* Sets the right margin to 1 character width */
  margin-right: 1em;
}
/* Select element with an id of current-sensor-h */
#current-sensor-h {
  /* Sets the left margin-left to 2 character width */
  margin-left: 2em;
}

/* Select element with the id of current-input-value_container or input-button=container that is a 
child of an element with the id of input_container */
#input_container > #current-input-value_container,
#input_container > #input-button_container {
  /* Sets the margin to auto allowing the browser to set the left and right 
  margins to equal values */
  margin: auto;
}

/* Select element with the id of random1 */
#random1 {
  /* Set top and bottom padding of 0.5 character width and the left and right 
  of 3.5 character width */
  padding: 0.5em 3.5em;

  /* Set the bottom margin to 0.5 character width */
  margin-bottom: 0.5em;
}

/* Select element with the id of random10 */
#random10 {
  /* Set top and bottom padding of 0.5 character width and the left and right 
  of 3 character width */
  padding: 0.5em 3em;

  /* Set the top margin to 0.5 character width */
  margin-top: 0.5em;
}

/* Select element to id current-sensor-title */
#current-sensor-title {
  /* Sets the bottom margin to 1 character width */
  margin-bottom: 1em;
}