style.css

/* universal */
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Bebas Neue", cursive;
}

body{
  background-color: rgb(233, 183, 76, 0.7);
}

/* Heading */
header {
  text-align: center;
  background-image: url(https://images.photowall.com/products/45025/beer.jpg?h=699&q=85);
  font-family: "Bebas Neue", cursive;
  padding: 1em;
  color: white;
  text-shadow: 1px 2px 3px rgb(138, 101, 0);
}

header p {
  font-size: 2em;
}

/* beer info input div */
#beer-input {
  text-align: left;
}

h2 {
  font-family: "Bebas Neue", cursive;
  color: rgb(255, 168, 38);
  text-shadow: 1px 2px 3px rgb(138, 101, 0);
}

h4 {
  color: rgb(255, 114, 38);
  font-family: "Bebas Neue", cursive;
}
/* slider */
div.noUi-connect {
  background-color: rgb(255, 168, 38);
}

#percent-range {
  font-size: 1.5em;
}

/* color shades */

.input-field li span {
  color: black;
}

.input-field li #color1 {
  background-color: rgb(255, 168, 38);
}

.select-wrapper input.select-dropdown {
  font-family: "Bebas Neue", cursive;
}

/* checkboxes */
[type="checkbox"].filled-in:checked + span:not(.lever):after {
  border-color: rgb(255, 114, 38);
  background-color: wheat;
}

/* beer display */
#beer-display h2 {
  /* border: 1px dotted wheat; */
  text-align: end;
}
/*search button*/

.btn {
  background-color: rgb(255, 114, 38);
}

.btn:hover {
  background-color: black;
}


@media only screen and (max-width: 600px) {
  #beer-input {
    width: 100%;
    text-align: center;
  }

  #beer-display {
    width: 100%;
    text-align: center;
  }

  #beer-display h2 {
    /* border: 1px dotted wheat; */
    text-align: left;
  }

  #food-display {
    width: 100%;
  }

  #dessert-display {
    width: 100%;
  }
}

#error-message {
  margin-top: 5px;
}

.material-icons {
  cursor: pointer;
}

.noUi-touch-area{
  cursor: pointer;
}