html, body, header, nav, h1, a, ul, li, strong, main,
button, i, section, img, div, h2, p, form, fieldset,
label, input, textarea, span, article, footer, time, small {
  margin: 0;
  border: 0;
  padding: 0;
  outline: 0;
  font: inherit;
  text-align: inherit;
  text-decoration: inherit;
  vertical-align: inherit;
  box-sizing: inherit;
  color: inherit;
  background: transparent;
}

ul, li {
  list-style: none;
}

html {
  background: rgb(145,255,255);
}

.button, span {
  cursor: pointer;
}

.page-content {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.title {
  font-family: 'Orbitron', sans-serif;
  font-size: 60px;
  margin: 60px;
}

.master-controls {
  display:block;
  position: relative;
  background: rgba(0, 0, 0, 0.9);
  width: 840px;
  height: 60px;
  border-radius: 5px 5px 0 0 ;
    color: rgb(196,201,192);
}

.button-controls {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
}

.button {
  border: solid 1px rgb(196,201,192, 0.5);
  border-radius: 5px;
  padding: 10px 30px;
  font-size: 12px;
  margin-top: 20px;
}

#clear-button, #demo-button, .slide-controls {
  font-family: 'Raleway', sans-serif;
}

.slide-controls {
  margin-top: 10px;
}
.slider {
    -webkit-appearance: none;
    height: 8px;
    border-radius: 5px;
    background: rgba(0, 0, 0, 0.9);
    border: solid 1px rgb(196,201,192, 0.5);
    outline: none;
    opacity: 0.7;
    -webkit-transition: .2s;
    transition: opacity .2s;
}

.slider:hover {
    opacity: 1;
}

.slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: rgb(196,201,192);
    cursor: pointer;
}

.slider::-moz-range-thumb {
    width: 12px;
    height: 12px;
    border-radius: 3px;
    background: rgb(196,201,192);
    cursor: pointer;
}

#canvas {
  display: block;
  position: relative;
  background: rgba(0, 0, 0, 0.9);
  border-radius: 0 0 5px 5px;
}

.app-info {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.links {
  font-size: 40px;
  color: rgb(0, 0, 0, 0.6);
  margin: 60px 40px 0 40px;
}

.attribute {
  font-family: 'Raleway', sans-serif;
  display: flex;
  justify-content: center;
  font-size: 16px;
  margin: 30px;
}

#modal-background {
  display: block;
  position: fixed;
  top: 0;
  bottom: 0;
  right: 0;
  left: 0;
  background: rgba(0, 0, 0, 0.7);
  z-index: 10;
}

#modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  min-width: 300px;
  border: solid 1px black;
  border-radius: 4px;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
  background-color: rgb(226,228,224);
  font-family: 'Raleway', sans-serif;
  padding: 40px;
  display:flex;
  flex-direction: column;
}

.close-button-flex {
  display: flex;
  justify-content: space-between;
}

#close-button {
  font-size: 40px;
  font-weight: 800;
  cursor: pointer;
  position: relative;
  top: -25px;
}

.modal-title {
  font-family: 'Orbitron', sans-serif;
  font-size: 40px;
}

.modal-text {

}