@import"https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Lato&family=Montserrat&family=Playpen+Sans&family=Questrial&family=Roboto:wght@300&family=Shadows+Into+Light&display=swap";.app-container{display:flex;height:100vh;overflow-x:hidden;overflow-y:hidden}@media screen and (max-width: 768px){.app-container{flex-direction:column}}.navbar{padding:1.2rem}.card-list{padding:1.2rem 1.2rem 1.2rem .7rem;overflow-y:auto}@media screen and (min-width: 768px){.card-list{padding-left:1.1rem}}*{margin:0;padding:0;font-family:Lato,sans-serif}body{background-color:#e2e2e2;overflow-x:hidden}html{font-size:16px}@media screen and (min-width: 768px){html{font-size:22px}}@media screen and (min-width: 1024px){html{font-size:24px}}@media screen and (min-width: 1440px){html{font-size:28px}}@media screen and (min-width: 2560px){html{font-size:42px}}.navbar{background-color:#000;color:#fff;height:100vh;width:20%;display:flex;flex-direction:column;align-items:center;padding:1rem}.navbar__link{text-decoration:none;color:inherit}.navbar__heading{text-align:center;margin-bottom:1rem;font-size:1.2rem;font-family:Shadows Into Light,sans-serif;transition:transform .2s ease-in-out;border-bottom:2px solid #FFFFFF}.navbar__heading:hover{transform:scale(1.03);color:#b4ecb4}.navbar__search{margin-bottom:1.5rem}.navbar__filters label{display:block;margin-bottom:1.5rem}@media screen and (max-width: 768px){.navbar{display:none}}.search{margin-bottom:.5rem}.search__input{width:100%;padding:.05rem;box-sizing:border-box;border:.13rem solid #CCC;border-radius:.3rem;font-size:.6rem;text-align:center}.search__input:focus{outline:none;border-color:#b4ecb4}.filters__label{font-size:.6rem}.filters__input{margin-left:.3rem;cursor:pointer}.filters-container{display:block;gap:1rem}@media screen and (max-width: 320px){.filters-container{display:flex;gap:.7rem}}@media screen and (max-width: 768px){.filters-container{display:flex}}.card{background-color:#fff;padding:.4rem;border-radius:1rem;box-shadow:-3px 5px 12px #0000004d;display:flex;align-items:center;width:9rem;height:8rem;transition:transform .2s ease-in-out}.card:hover{transform:scale(1.03);background-color:#b4ecb4}.card__image{width:40%;max-height:90%;object-fit:contain;border-radius:1rem 0 0 1rem}.card__info{display:flex;flex-direction:column;width:60%;padding:.4rem}.card__name{font-family:Bebas Neue,sans-serif;font-size:.8rem;margin-bottom:.2rem}.card__name--small{font-size:.7rem}.card__abv{font-size:.6rem;padding:.2rem .5rem;width:fit-content;border-radius:.5rem;border:1.5px solid #000000;font-weight:700}.card__first-brewed{font-size:.6rem;margin-bottom:.3rem;font-style:italic}.card__tagline{font-size:.6rem;margin-bottom:.3rem}.card__tagline--small{font-size:.5rem}.card-link{text-decoration:none;color:inherit}.card-list{display:flex;flex-direction:row;flex-wrap:wrap;gap:1rem;width:94%;justify-content:center}.card-list__results{display:flex;justify-content:center;margin-top:2rem;font-family:Shadows Into Light,sans-serif;font-size:1.3rem}.card-details{display:flex;max-width:80%;flex-direction:column;align-items:center;margin:auto;padding:1rem;overflow-y:auto}@media screen and (min-width: 768px){.card-details{max-width:60%}}.card-details__name{font-family:Bebas Neue,sans-serif;font-size:1.5rem;margin-bottom:1rem;text-align:center}.card-details__image{max-width:2.3rem;height:auto;margin-bottom:1rem;border-radius:.5rem}.card-details__description{text-align:justify;font-size:.75rem;line-height:1.5;margin-bottom:1rem}.card-details__facts{font-size:.75rem;height:100%;display:flex;justify-content:center;gap:1rem}.card-details__abv,.card-details__ibu{margin-bottom:.5rem;align-self:center;padding:.3rem .6rem;width:fit-content;border-radius:.5rem;border:1.5px solid #000000;font-weight:700}.card-details__message{display:flex;width:94%;justify-content:center;margin-top:2rem;font-family:Shadows Into Light,sans-serif;font-size:1.3rem;font-weight:700}.navbar-mobile{background-color:#000;color:#fff;height:5.5rem;width:100%;display:none;flex-direction:column;align-items:center;padding-bottom:.7rem;padding-top:.7rem}.navbar-mobile__link{text-decoration:none;color:inherit}.navbar-mobile__heading{text-align:center;margin-bottom:.5rem;font-size:1.15rem;font-family:Shadows Into Light,sans-serif;transition:transform .2s ease-in-out;border-bottom:2px solid #FFFFFF}.navbar-mobile__heading:hover{transform:scale(1.03);color:#b4ecb4}.navbar-mobile__search{margin-bottom:1.5rem}@media screen and (max-width: 768px){.navbar-mobile{display:flex}}