style-trash.css

/* CSS files add styling rules to your content */

body {
  height: 100vh;
  padding:0;
  margin:0;
  display: flex;  
/*   align-items: center; */
  justify-content: center;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale; 
  
}

.container {
  font-family: avenir next,avenir,roboto,noto,segoe ui,arial,sans-serif;
  margin-top: 28px;
  font-size: 16pt;
  padding: 24px;
  display: flex;
  flex-direction: column;
/*   height: 90vh;
  max-height: 1200px; */
  height: 90%;
  width: 33vw;
  max-width: 800px;
  min-width: 400px;
  box-shadow:
  0 1px 5px rgba(0,0,0,0.12),
  0 1px 3px rgba(0,0,0,0.24);
  
/*   background-color: #FEDBD0; */
  
  background-color: #B9E4C9;
}

.before-load {
  background-color: #ddd;
}

h1 {
  line-height: 1.2em;
  color: #263238;
  font-size: calc(1.15rem + 2vw);
  
/*   font-size: 3rem; */
}

.instructions {
  color: #356859;
}

#results {
  display: flex;  
  align-items: center;
  justify-content: center;
  flex: 6 0px;
}

#last-detected {
  color: #356859;
  

  text-transform: uppercase;
  font-size: 10vw;
  padding: 30px;
}



#controls {
/*   border-top: 0.5px solid #FD5523; */
  padding: 10px;
  display: flex;
  flex: 1 0px;
  align-items: center;
  justify-content: center;
}

button {
  font-size: 14pt;
  line-height: 2.25rem;
  font-weight: 700;
  
  letter-spacing: .0892857143em;
  text-transform: uppercase;
  padding: 0px 12px;

  min-width: 84px;
  height: 42px;
  vertical-align: middle;
  border-radius: 4px;
/*   background-color: #0336FF; */
  background-color: #FF1744;
  border:0;
  color: #FAFAFA;
  margin:10px;
}

button:disabled {
  background-color: #616161;
}