/* :root basically means the entire document. By default, it uses serif (e.g. times new roman) font, which looks awful */
:root {
  font-family: Arial, Helvetica, sans-serif;
  font-size: 16px;
}

/* Octothorpes (#) refer to an ID of an element, like <div id="simulation-title"></div>*/
/* vw means "viewport width". It is a percentage of the window width, so 100vw means the width of the entire browser. Margin is essentially what it says it is - it adds a buffer between elements. */
#simulation-title {
  width: 100vw;
  height: 35px;
  text-align: center;
  margin-top: 15px;
  margin-bottom: 5px;
  font-size: 18px;
}

/* You can use calc() to calculate variables, so height in this context is the browser width minus 100 pixels */
/* Position: absolute means that you can specify the exact placement in pixels of the element, instead of the browser trying to automatically detect where to put it. So it is 0px to the left and 0px from the top of the browser window.  I wouldn't recommend using position:absolute for most things, but in this context it makes the simulation-wrapper element essentially the same exact size as the browser window. */
#simulation-wrapper {
  position: absolute;
  left: 0px;
  top: 0px;
  width: 100vw;
  height: calc(100vh - 100px);
}

/* Display: grid is my favorite way of placing elements. As you can tell, I use it a lot. See this website for a brief synopsis: https://grid.malven.co . Gap is the space between grid elements. */
.inputs-wrapper {
  display: grid;
  grid-template-columns: max-content max-content;
  justify-content: center;
  gap: 20px 20px;
}

.input-row {
  display: grid;
  grid-template-columns: max-content 150px 15px max-content;
  gap: 10px;
  align-items: end;
  justify-items: center;
  height: 15px;
}

.select-row {
  display: grid;
  grid-template-columns: repeat(3, max-content);
  gap: 10px;
  align-items: center;
}

select {
  padding: 2px 5px;
}

#graphics-wrapper {
  position: absolute;
  top: 100px;
  width: 100vw;
  height: max-content;
  display: grid;
  justify-content: center;
}

/* Box shadows can often make elements appear as though they're "floating" above the page, and I really like the aesthetic of it, so I use it a lot alongside a 1 pixel black border */
canvas {
  border: 1px solid black;
  box-shadow: 0px 0px 2px 2px grey;
}



label {
  margin-right: 20px;
}

#modal-buttons {
  display: grid;
  grid-template-columns: 110px 110px 110px; /* formerly 1fr 1fr 1fr */
  gap: 10px;
}

.modal-body .modal-text {
  max-width: 70ch;
  text-align: justify;
}

.modal-body .modal-equation {
  width: max-content;
  margin-left: 15px;
  padding: 2px;
}

.modal-text+.modal-text {
  margin-top: 10px;
}

.modal-equation.no-padding {
  padding: 0px;
}


.simulation-controls {
  display: grid;
  grid-template-columns: max-content;
  justify-content: center;
  gap: 0px 20px;
  width: 100vw;
}

.checkbox-inline {
  margin-left: 10px;
}

#pressure {
  color: blue;
}

#enthalpy, #quality, #phase-envelope {
  margin-left: -20px;
}