html {
    background-color: #EC9D00;
}
head {
     padding: 0;
     background-color: #EC9D00;
}
 body {
     padding: 0;
     background-color: #EC9D00;
     height: 50vh;
}
 hr {
     display: block;
     height: 1px;
     border: 0;
     border-top: 2px solid white;
     margin: 1em 0;
     padding: 0;
}
 h1 {
     color: white;
     font-weight: bold;
     font-family: 'Roboto', sans-serif;
     display: inline;
}
 p {
     color: white;
     font-family: 'Open Sans', sans-serif;
}
 p2 {
     display: none;
     color: red;
     font-family: 'Open Sans', sans-serif;
     font-size: small;
}
 .inline-p {
     color: black;
     display: inline;
}
 .name {
     color: black;
     font-size: large;
     font-weight: bold;
     margin: 0;
}
 .beer {
     color: black;
     margin: 0;
}
 .attribute {
     margin: 0;
     color: black;
     font-style: italic;
     font-size: small;
     overflow-wrap: break-word;
     word-wrap: break-word;
 }
 .brewer {
     color: black;
     font-size: small;
     line-height: 0.8;
 }
 .beers {
     overflow: auto;
     margin: 0 auto;
     align-items: center;
     text-align: center;
     height: 50vh;
     padding: 30px;
     white-space: nowrap;
     word-wrap: break-word;
    -ms-overflow-style: none;  /* Internet Explorer 10+ */
    scrollbar-width: none;  /* Firefox */
}
 .beers::-webkit-scrollbar {
     display: none;
}
 .display {
     text-align: center;
     padding: 15px;
     margin: 0 auto;
     background-color: white;
     border-radius: 25px;
     word-wrap: break-word;
     overflow: auto;
     box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
}
 .recommended {
     position: relative;
     float: right;
     padding: 15px;
     margin: 0 auto;
     background-color: white;
     border-radius: 25px;
     word-wrap: break-word;
     overflow: auto;
     box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
 }
/* MAIN CONTAINER */
 .container {
     text-align: center;
     border-radius: 25px;
     padding: 20px;
     height: 75vh;
     width: 80vw;
     white-space: nowrap;
     overflow: hidden;
     word-wrap: break-word;
}
 .addBeer {
     float: right;
     padding: 10px;
}
 .btn:focus {
     outline: none;
     box-shadow: none;
}
 .code-form-popup {
     text-align: center;
     display: none;
     position: absolute;
     top: 60%;
     left: 50%;
     transform: translate(-50%, -50%);
}
 .code-form-popup.absolute {
    position: absolute;
}
 .beer-form-popup {
     text-align: center;
     display: none;
     position: absolute;
     top: 60%;
     left: 50%;
     transform: translate(-50%, -50%);
}
.beer-form-popup.absolute {
    position: absolute;
}
 .form-container {
     position: absolute;
     top: 75%;
     left: 50%;
     transform: translate(-50%, -50%);
     max-width: 300px;
     max-height: 500px;
     padding: 10px;
     margin: 5px;
     background-color: white;
     border-radius: 5px;
     box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
}
 .beer-form-container {
     position: absolute;
     top: 50%;
     left: 50%;
     transform: translate(-50%, -50%);
     max-width: 300px;
     max-height: 500px;
     padding: 10px;
     margin: 5px;
     background-color: white;
     border-radius: 5px;
     box-shadow: rgba(0, 0, 0, 0.15) 0px 15px 25px, rgba(0, 0, 0, 0.05) 0px 5px 10px;
}
 @media ( max-width :320px) {
     .beer-form-popup {
         min-width: 200px;
         min-height: 120px;
    }
}
 @media ( min-width :321px) {
     .beer-form-popup {
         min-width: 300px;
         min-height: 220px;
    }
}
 @media ( min-width :640px) {
     .beer-form-popup {
         min-width: 480px;
         min-height: 320px;
    }
}
 @media ( min-width :1200px) {
     .beer-form-popup {
         min-width: 700px;
         min-height: 400px;
    }
}
 input, select {
     border: 0;
     outline: 0;
     background: white;
     border-bottom: 1px solid black;
     margin-top: 5px;
}
/* ANIMATION */
 section {
     position: relative;
     width: 100%;
     height: 20vh;
     z-index: 100;
     background: white;
     overflow: hidden;
}
 section .wave {
     position: absolute;
     bottom: 0;
     left: 0;
     width: 100%;
     height: 100px;
     background: url(img/beer-wave.png);
     background-size: 1000px 100px;
}
 section .wave.wave1 {
     animation: animate 30s linear infinite;
     z-index: 1000;
     opacity: 1;
     animation-delay: 0s;
     bottom: 0;
}
 section .wave.wave2 {
     animation: animate2 15s linear infinite;
     z-index: 999;
     opacity: 0.5;
     animation-delay: -5s;
     bottom: 10px;
}
 section .wave.wave3 {
     animation: animate 30s linear infinite;
     z-index: 998;
     opacity: 0.2;
     animation-delay: -2s;
     bottom: 15;
}
 section .wave.wave4 {
     animation: animate2 5s linear infinite;
     z-index: 997;
     opacity: 0.7;
     animation-delay: -5s;
     bottom: 20px;
}
 @keyframes animate {
     0% {
         background-position-x: 0;
    }
     100% {
         background-position-x: 1000px;
    }
}
 @keyframes animate2 {
     0% {
         background-position-x: 0;
    }
     100% {
         background-position-x: -1000px;
    }
}
/* STAR RATING */
 .star {
     color: orange;
}
 .star1:before {
     content : '★☆☆☆☆' 
}
 .star2:before {
     content : '★★☆☆☆' 
}
 .star3:before {
     content : '★★★☆☆' 
}
 .star4:before {
     content : '★★★★☆' 
}
 .star5:before {
     content : '★★★★★' 
}