*,:after,:before{margin:0;padding:0}body{line-height:20px;font-size:16px;font-family:Arial,sans-serif}img{max-width:100%}header a{display:inline-block;margin:10px 15px}.head,.page{text-align:center;display:flex;flex-direction:column}.head{width:100%;background-color:#512da8;min-height:15rem;flex-wrap:wrap}.head__nav{padding:1rem;position:fixed;background-color:inherit;min-width:100%}.head__nav__headlink{float:right;top:0 px;margin-right:1rem;font-family:Roboto,sans-serif}.head__nav h1{position:relative;float:left;top:0 px;color:#fff;text-decoration:none}.head__nav h1 span{transform:rotate(-20deg);display:inline-block}.head__headline{position:relative;display:flex;flex-wrap:wrap;justify-content:space-evenly;flex-direction:column;height:90px;width:100%;color:#fff;font-family:Roboto,sans-serif;margin-top:5em}.head__headline h4{letter-spacing:3px}.head__searchForm{min-height:10vh}.head__searchForm .search-bar{width:40%;height:30px;border:none;padding:10px;justify-content:center;box-shadow:0 5px 20px #474747;font-family:Roboto,sans-serif}.detail{position:fixed;width:50%;height:90%;top:0;left:0;right:0;bottom:0;margin:auto;font-family:Roboto,sans-serif;background-color:#fff}.detail,.detail__beer{display:flex;flex-wrap:wrap}.detail__beer{flex-direction:row;align-items:center;padding-left:2rem}.detail__beer__left{max-width:20%;max-height:70%}.detail__beer__left img{max-width:20rem;max-height:20rem}.detail__beer__right{padding:2rem;display:flex;flex-wrap:wrap;flex-direction:column;align-items:flex-start;max-width:70%;max-height:100%;justify-content:space-around}.detail__beer__right__number{flex-wrap:wrap}.detail__beer__right__number p{display:inline-block;padding:5px}.detail__beer__right ul{display:flex;align-items:flex-start;flex-direction:column;flex-wrap:wrap}.beers{display:flex;flex-direction:row;flex-wrap:wrap;justify-content:space-around;padding:5rem}.beers__beer{display:flex;flex-direction:column;min-width:18rem;max-width:18rem;min-height:20rem;max-height:20rem;margin-top:2rem;align-items:center;border-radius:10px;background-image:linear-gradient(0deg,#dfe9f3 0,#fff)}.beers__beer__image{min-height:10rem;max-height:10rem;margin:2rem 0;max-width:4rem}.advSearch{display:flex;flex-direction:column;flex-wrap:wrap}.advSearch__head{padding:1rem;position:fixed;background-color:#512da8;min-width:100%}.advSearch__head__headlink{float:right;top:0 px;margin-right:1rem;font-family:Roboto,sans-serif}.advSearch__head h1{position:relative;float:left;top:0 px;color:#fff;text-decoration:none}.advSearch__head h1 span{transform:rotate(-20deg);display:inline-block}.advSearch__headline{min-height:5em;color:#667eea}.advSearch__headline,.advSearch__search{display:flex;flex-wrap:wrap;align-items:center;justify-content:center}.advSearch__search{min-height:6em;flex-direction:column}.advSearch__search__form{flex-direction:column;min-width:45%}.advSearch__search__form,.advSearch__search__form__one{display:flex;flex-wrap:wrap;justify-content:space-evenly}.advSearch__search__form__one{flex-direction:row;align-content:flex-start}.advSearch__search__form__one__formGroup{display:flex;flex-wrap:wrap;flex-direction:column}.advSearch__search__form__one__formGroup input[type=number]{width:13em;padding:5px;border:2px solid #ccc;-webkit-border-radius:5px;border-radius:5px}.advSearch__search__form__two{display:flex;flex-wrap:wrap;flex-direction:row;justify-content:space-evenly;align-content:flex-start}.advSearch__search__form__two__formGroup{display:flex;flex-wrap:wrap;flex-direction:column}.advSearch__search__form__two__formGroup input[type=number]{width:13em;padding:5px;border:2px solid #ccc;-webkit-border-radius:1px;border-radius:5px}