body {
  background-color: #F3B347;
  font-family: 'Roboto Mono', monospace;
}

h1 {
  text-align: center;
}

.container {
  display: table;
  width: 100vw;
  height: auto;
  margin-bottom:2vh;
}

.ingredientbar {
  background-color: #ffff66;
  position: absolute;
  left: 0px;
  width: 21vw;
  height: auto;
  border-radius: 8px;
  padding: 1vh;
  margin-left: 0px;
  margin-right: 21vw;
  padding-right: 2vw;
  box-shadow: 0 8px 16px 0 #000000;
}

.builder {
  background-color: #ffffb3;
  position: absolute;
  right: 0px;
  width: 75vw;
  height: 300vh;
  border-radius: 8px;
  padding: 1vh;
  margin-left: 21vw;
  margin-right: 0vw;
  box-shadow: 0 8px 16px 0 #000000;
  overflow-y: auto;
}

.button {
    font-family: 'Roboto Mono', monospace;
    background-color: #ff1a1a;
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
    border-radius: 8px;
    transform: translateY(-12px);
}

.coolhr {
    border: 0;
    height: 2px;
    background-image: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0));
}

.ingredient{
    position: relative;
    width: 12vw;
}

.w3-input{
    padding:8px;
    display:block;
    border:none;
    border-bottom:1px solid #ccc;
    margin:0px;
    float: left;
}