@import url(https://fonts.googleapis.com/css2?family=Monoton&display=swap);:root{--hue:193;--clr-primary-1:hsl(var(--hue),61%,89%);--clr-primary-2:hsl(var(--hue),60%,78%);--clr-primary-3:hsl(var(--hue),61%,67%);--clr-primary-4:hsl(var(--hue),61%,57%);--clr-primary-5:hsl(var(--hue),73%,46%);--clr-primary-6:hsl(var(--hue),72%,37%);--clr-primary-7:hsl(var(--hue),73%,27%);--clr-primary-8:hsl(var(--hue),72%,18%);--clr-primary-9:hsl(var(--hue),74%,9%);--clr-grey-1:#dae2ec;--clr-grey-2:#bcccdc;--clr-grey-3:#9eb2c7;--clr-grey-4:#829ab0;--clr-grey-5:#617d98;--clr-grey-6:#48647f;--clr-grey-7:#324d67;--clr-grey-8:#243a52;--clr-grey-9:#102a42;--clr-white:#fff;--clr-red-dark:#bb2525;--clr-red-light:#e66b6b;--clr-green-dark:#25bb32;--clr-green-light:#6be675;--clr-black:#222;--transition:all 0.3s linear;--spacing:0.1rem;--radius:0.25rem;--light-shadow:0 5px 15px rgba(0,0,0,.1);--dark-shadow:0 5px 15px rgba(0,0,0,.4);--max-width:1170px;--fixed-width:450px;--clr-pink:#f28ab2;--clr-green:#398379;--clr-blue:#3777bc;--clr-gold:#c59d5f;--clr-beige:#f4f0eb;--clr-nice-green:#2b4a47}*,:after,:before{box-sizing:border-box;margin:0;padding:0}body{background:#222;background:var(--clr-black);color:#fff;color:var(--clr-white);font-family:-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Oxygen,Ubuntu,Cantarell,Open Sans,Helvetica Neue,sans-serif;font-size:.875rem;line-height:1.5;scroll-behavior:smooth}ul{list-style-type:none}a{color:inherit;text-decoration:none}h1,h2,h3,h4{letter-spacing:.1rem;letter-spacing:var(--spacing);line-height:1.25;margin-bottom:.75rem;text-transform:capitalize}h1{font-size:3rem}h2{font-size:2rem}h3{font-size:1.25rem}h4{font-size:.875rem}p{color:#fff;color:var(--clr-white);margin-bottom:1.25rem}@media screen and (min-width:800px){h1{font-size:4rem}h2{font-size:2.5rem}h3{font-size:1.75rem}body,h4{font-size:1rem}h1,h2,h3,h4{line-height:1}}.l-hidden,.m-hidden,.s-hidden{display:none}.s-flex-center{align-items:center;display:flex;flex-direction:column;justify-content:center}.loading{margin-block:4rem}.loading-spinner{-webkit-animation:spinner 1s linear infinite,borderLeft 1s ease infinite alternate;animation:spinner 1s linear infinite,borderLeft 1s ease infinite alternate;background-color:initial;border:5px solid #f4f0eb;border-radius:50%;border-top:5px solid #c59d5f;border:5px solid var(--clr-beige);border-top-color:var(--clr-gold);height:50px;width:50px}@-webkit-keyframes spinner{0%{rotate:-1turn}}@keyframes spinner{0%{rotate:-1turn}}@-webkit-keyframes borderLeft{0%{border-left:5px solid #f4f0eb;border-left:5px solid var(--clr-beige)}to{border-left:5px solid #c59d5f;border-left:5px solid var(--clr-gold)}}@keyframes borderLeft{0%{border-left:5px solid #f4f0eb;border-left:5px solid var(--clr-beige)}to{border-left:5px solid #c59d5f;border-left:5px solid var(--clr-gold)}}.nav,.section-center{margin-block:1rem;margin-inline:auto;width:calc(100vw - 2rem)}.nav-image{object-fit:cover;width:clamp(200px,40vw,300px)}.nav-header{-webkit-margin-after:2rem;margin-block-end:2rem;width:100%}.nav-header h2{-webkit-margin-before:1rem;font-family:Monoton,cursive;letter-spacing:2px;margin-block-start:1rem;text-align:center}.nav-underline{background-color:#c59d5f;background-color:var(--clr-gold);height:4px;margin-inline:auto;max-width:20rem;width:50%}.nav-links:has(:hover,:focus-visible){box-shadow:0 2px 8px -2px #f4f0eb;box-shadow:var(--clr-beige) 0 2px 8px -2px}.nav-links{border:3px solid;border-radius:2px;min-width:7rem}.nav-link,.nav-links{color:#c59d5f;color:var(--clr-gold);transition:all .3s linear;transition:var(--transition)}.nav-link{display:flex;justify-content:space-between;padding:.3rem .8rem;width:100%}.nav-link-active,.nav-link:focus-visible,.nav-link:hover{background-color:#c59d5f;background-color:var(--clr-gold);color:#f4f0eb;color:var(--clr-beige)}.nav-link .nav-link-span{-webkit-margin-start:.8rem;flex-grow:1;margin-inline-start:.8rem;text-transform:capitalize;width:75%}svg{flex-grow:1;margin-block:auto}.home-header{margin-block:2rem}.home-header *,.random-cocktail *{text-align:center}.random-cocktail-link{position:relative}.random-cocktail-img{border-radius:inherit;height:200px;width:200px}.random-cocktail-img-container{border-radius:50%;margin-inline:auto;position:relative;width:200px}.random-cocktail-img-container:after{background-color:#c59d5f;background-color:var(--clr-gold);border-radius:inherit;content:"";height:200px;left:15px;position:absolute;top:-5px;width:200px;z-index:-2}.random-cocktail-name{border-bottom:4px solid #c59d5f;border-bottom:4px solid var(--clr-gold);border-left:4px solid #c59d5f;border-left:4px solid var(--clr-gold);margin-block:.8rem;padding:0 0 .5rem 1rem}.cocktail-attributes{position:absolute}.cocktail-attribute{font-size:.75rem;letter-spacing:2.6px;line-height:1.35rem;text-align:left}.single-cocktail-header{-webkit-margin-before:2rem;margin-block-start:2rem}.single-cocktail-header>h2{font-family:Monoton,cursive;text-align:center}.single-cocktail-underline{background-color:#c59d5f;background-color:var(--clr-gold);height:4px;margin-inline:auto;max-width:10rem;width:50%}.single-cocktail-info{-webkit-margin-before:2rem;margin-block-start:2rem}.single-cocktail-image-container{width:clamp(350px,45vw,500px)}.general-info{-webkit-margin-before:.3rem;display:flex;font-size:.7rem;gap:1rem;height:.8rem;letter-spacing:3px;margin-block-start:.3rem}.image-wrapper{border:1px solid #fff;border:1px solid var(--clr-white);margin-inline:auto;padding-block:10%;width:80%}.single-cocktail-image{height:80%;width:80%}.preparation-container{background-color:rgba(197,156,94,.8);margin-block:1rem;position:relative;width:clamp(280px,38vw,400px)}.preparation-container:after,.preparation-container:before{content:"";position:absolute}.preparation-container:after{background-color:#222;background-color:var(--clr-black);rotate:90deg;z-index:2}.preparation-container:after,.preparation-container:before{-webkit-clip-path:polygon(0 0,0 100%,100% 100%);clip-path:polygon(0 0,0 100%,100% 100%);height:20px;left:0;top:0;width:20px}.preparation-container:before{background-color:initial;border:1px solid #f4f0eb;border:1px solid var(--clr-beige);rotate:270deg}.ingredients-prep{-webkit-margin-before:1rem;margin-block-start:1rem;margin-inline:auto;width:75%}.single-ingredient{align-items:center;display:flex;gap:.7rem;justify-content:space-between}.single-ingredient>span:first-child{flex-grow:1;text-align:start}.single-ingredient>span:last-child{flex-grow:1;text-align:end}.single-ingredient>svg{flex:0 1 20px}.serve-in{margin-block:1rem;text-align:center}.serve-in span{font-weight:700;text-transform:capitalize}.preparation-instructions{margin-block:1rem}.fav-btn{background-color:initial;border:3px solid #c59d5f;border:3px solid var(--clr-gold);border-radius:2px;color:#fff;color:var(--clr-white);cursor:pointer;font-size:1.2rem;font-weight:700;padding:1rem 2rem;position:relative;transition:all .3s linear;transition:var(--transition)}.fav-btn:focus-visible,.fav-btn:hover{background-color:#c59d5f;background-color:var(--clr-gold);color:#f4f0eb;color:var(--clr-beige)}.fav-alert{color:#c59d5f;color:var(--clr-gold);font-size:.8rem;font-weight:600;left:50%;position:absolute;top:130%;translate:-50% 0;visibility:hidden;width:100%;z-index:-10}.show{visibility:visible;z-index:10}.single-fav-cocktail{-webkit-margin-after:4rem;-webkit-padding-before:2rem;margin-block-end:4rem;padding-block-start:2rem}.search-form{-webkit-margin-before:2.5rem;margin-block-start:2.5rem}.fav-input{background-color:initial;border:3px solid #c59d5f;border:3px solid var(--clr-gold);border-radius:2px;color:#fff;color:var(--clr-white);max-width:25rem;padding:.5rem 1rem;width:65%}.no-result-fav{margin-top:3rem;text-align:center}.form-control{display:flex;gap:2rem;margin-block:2rem}.form h2{font-family:monoton,cursive;margin-top:1rem;text-align:center}.input-search,.select-search{background-color:initial;border:2px solid #c59d5f;border:2px solid var(--clr-gold);color:#f4f0eb;color:var(--clr-beige);padding:.5rem}.select-search>*{background-color:#222;background-color:var(--clr-black)}.single-search-item{-webkit-margin-before:5rem;margin-block-start:5rem}.empty-arr-alert{-webkit-margin-before:2rem;margin-block-start:2rem;text-align:center}.error-page{margin-block:2rem;text-align:center}.error-page .fav-btn{margin-top:2rem}
/*# sourceMappingURL=main.8cc8107d.css.map*/