@import url("https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,500;0,700;1,800&family=Roboto:ital,wght@0,100;0,300;0,400;0,500;0,700;0,900;1,100;1,300;1,400;1,500;1,700;1,900&display=swap");*{box-sizing:border-box;padding:0;margin:0}body{font-family:Roboto,ui-sans-serif,system-ui,-apple-system;background-color:rgb(178 193 212)}ul{list-style-type:none}h2{font-weight:400}dialog{&[open]{position:fixed;width:80vw;height:50vh;min-height:270px;top:50%;left:50%;transform:translate(-50%,-50%);z-index:999;border-width:0;border-radius:.75rem;box-shadow:-7px 12px 14px 6px rgb(0 0 0/.2);& article{background-color:unset}}& form{display:flex;flex-direction:column;justify-content:space-between;height:100%}& footer{padding-right:20px}&::-webkit-backdrop{background-color:#f6f7f9;opacity:.8}&::backdrop{background-color:#f6f7f9;opacity:.8}}footer{& button{--tw-shadow:0 1px 3px 0 rgb(0 0 0/0.1),0 1px 2px -1px rgb(0 0 0/0.1);--tw-shadow-colored:0 1px 3px 0 var(--tw-shadow-color),0 1px 2px -1px var(--tw-shadow-color);box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow);text-transform:uppercase;font-size:1rem;outline:0;border:0;padding:10px;cursor:pointer}& .button--cancel{color:rgb(178,193,212);background-color:white;border-radius:3px}& .button--confirm{background-color:rgb(255 111 0);color:white;border-radius:3px}& menu{display:flex;justify-content:flex-end;padding:20px 0;gap:20px}}header{background-color:rgb(56 85 116);color:white;display:flex;justify-content:space-between;padding:.8rem;align-items:center;& img{height:2rem}& ul{display:none;position:absolute;width:220px;z-index:99}& a{text-decoration:none;color:white}.profileImage{border-radius:100%;border:2px solid white;margin-right:10px}}.logo{display:flex;align-items:center;& img{-webkit-margin-end:10px;margin-inline-end:10px}color:white;text-decoration:none;font-size:1.25rem;font-weight:500}.menu{display:inline-block;position:relative;padding:15px 20px;align-self:stretch}.menu ul{left:calc(-220px * .9);color:rgb(42 72 101);background-color:white;box-shadow:0 0 10px 0 rgb(0 0 0/50%);& li{padding:10px;border-bottom:1px solid rgb(42 72 101/.25)}& a{font-weight:700;color:unset}& li:has(a):hover{background-color:rgb(42 72 101/.05)}& a:visited{color:unset}}.menu:hover ul{display:block}.profile{display:flex;& a,& p{display:flex;align-items:center}}.main__home{background-color:rgb(178 193 212);min-height:100vh}.main__recipe{background-color:rgb(229 234 240);min-height:90vh}article{margin:2rem auto;padding:2rem;max-width:900px;background-color:white;border-radius:12px;box-shadow:0 4px 6px rgba(0,0,0,.1)}.recipes{display:grid;margin-top:20px;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));grid-gap:24px;gap:24px;& li{background:white;border-radius:8px;overflow:hidden;box-shadow:0 2px 8px rgba(0,0,0,.1);transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column}& li:hover{transform:translateY(-4px);box-shadow:0 4px 12px rgba(0,0,0,.15)}& a{color:#333;display:flex;flex-direction:column;flex:1 1;height:100%}& h2{font-weight:400}}.image-cover{width:100%;aspect-ratio:16/9;overflow:hidden;position:relative;background:#f0f0f0;& img{width:100%;height:100%;object-fit:cover;object-position:center}}a{text-decoration:none}.recipe__meta{display:flex;gap:.75rem;flex-wrap:wrap;align-items:center;margin-bottom:10px}.recipe__meta span{font-weight:500;font-size:.875rem;color:#555}.recipe__details{padding:20px;flex:1 1;display:flex;flex-direction:column;gap:12px;& h2{margin:0 0 8px;font-size:1.25rem;line-height:1.4;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}}.recipe__rating{padding:5px 0;display:flex;align-items:center;& ul{display:flex}& svg{width:2rem;height:2rem;color:rgb(255 202 40)}& span{color:rgb(156 163 175)}}.recipe__review_summary{max-width:"50vw";height:"75px";padding-top:"10px";margin:1.5rem 0}.recipe__review_summary h3{margin-bottom:.5rem;color:#333;font-size:1.1rem;font-weight:600}.recipe-image-section{width:100%;height:auto;position:relative;margin-bottom:2rem}.recipe-image-section>img{width:100%;height:400px;object-fit:cover;display:block}.recipe-details-section{max-width:900px;margin:0 auto;padding:2rem;background:white;border-radius:12px}.details{position:static;color:#333;padding:0;& span{color:inherit}}.img__section{width:100%;height:auto;position:relative;margin-bottom:2rem}.img__section>img{width:100%;height:400px;object-fit:cover;display:block}.details__container{position:static;background:transparent;height:auto;width:auto}.reviews{& .review__item{padding:40px;border-bottom:1px solid rgb(156 163 175/.25)}& time{font-size:.8rem;color:darkgrey}}.actions{position:absolute;top:1rem;right:1rem;z-index:10;display:flex;justify-content:flex-end;gap:.5rem;& img{height:3rem;cursor:pointer;transition:transform .2s ease}& img:hover{transform:scale(1.1)}.review{--tw-ring-offset-shadow:0 0 #0000;--tw-ring-shadow:0 0 #0000;background-color:rgb(255 202 40);border-radius:.75rem}.add,.review{--tw-shadow:0 10px 15px -3px rgb(0 0 0/0.1),0 4px 6px -4px rgb(0 0 0/0.1);cursor:pointer;box-shadow:var(--tw-ring-offset-shadow,0 0 #0000),var(--tw-ring-shadow,0 0 #0000),var(--tw-shadow)}.add{--tw-shadow-colored:0 10px 15px -3px var(--tw-shadow-color),0 4px 6px -4px var(--tw-shadow-color);background-color:rgb(255 143 0);border-radius:9999px;height:4rem}.add input{display:none}:where(.review,.add){margin:0 30px}}#review{padding:20px;font-size:17px;border:none;border-bottom:2px solid rgb(255 111 0);width:100%}.star-rating{display:flex;flex-direction:row-reverse;justify-content:flex-end}.radio-input{position:fixed;opacity:0;pointer-events:none}.radio-label{cursor:pointer;font-size:0;color:rgba(0,0,0,.2);transition:color .1s ease-in-out}.radio-label:before{content:"★";display:inline-block;font-size:32px}.radio-input:checked~.radio-label{color:#ffc700;color:gold}.radio-label:hover,.radio-label:hover~.radio-label{color:goldenrod}.radio-input:checked+.radio-label:hover,.radio-input:checked+.radio-label:hover~.radio-label,.radio-input:checked~.radio-label:hover,.radio-input:checked~.radio-label:hover~.radio-label,.radio-label:hover~.radio-input:checked~.radio-label{color:darkgoldenrod}.average-rating{position:relative;-webkit-appearance:none;-moz-appearance:none;appearance:none;color:transparent;width:auto;display:inline-block;vertical-align:baseline;font-size:25px}.average-rating:before{--percent:calc(4.3 / 5 * 100%);content:"★★★★★";position:absolute;top:0;left:0;color:rgba(0,0,0,.2);background:linear-gradient(90deg,gold var(--percent),rgba(0,0,0,.2) var(--percent));-webkit-background-clip:text;-webkit-text-fill-color:transparent}.rating-picker{display:flex;flex-direction:row-reverse;justify-content:center}.filter-menu{background-color:rgb(229 234 240);border-radius:3px;border-bottom:1px solid rgb(27 58 87);& summary{font-weight:700;cursor:pointer;display:flex;align-items:center}& form{padding:20px 20px 0}& form,& label{display:flex;flex-direction:column}& label{padding:10px 0;flex-grow:1;color:rgb(75 85 99);font-size:.75rem;line-height:1rem}& img{height:4rem;max-width:100%}& form div{display:flex;gap:10px}& select{color:rgb(17 24 39);font-size:.875rem;line-height:1.25rem;padding:1rem .625rem .5rem;border:0;border-bottom:2px;border-color:#e5e7eb;border-style:solid}& p:first-child{color:#333;font-weight:400;font-size:1.25rem;line-height:1.75rem;margin-bottom:2px}& p:last-child{color:#666;font-weight:600;font-size:.875rem;line-height:1.25rem}}.filter{margin:0 auto}.tags{display:flex;flex-wrap:wrap;gap:10px;margin:30px 0;& span{font-weight:500;line-height:1.25rem;padding:.25rem .5rem;background-color:rgb(71 98 130);border-radius:9999px;color:white;font-size:.95rem}& button{cursor:pointer;margin-left:5px;padding:2px 10px;color:white;background-color:transparent;outline:none;border:none;font-size:.8rem}}.recipe__description__div{margin:1.5rem 0}.recipe__description__div h3{margin-bottom:.5rem;color:#333;font-size:1.1rem;font-weight:600}.recipe__description{margin:1rem 0;color:#555;line-height:1.6;font-size:.95rem}.recipe__ingredients{margin:1.5rem 0}.recipe__ingredients h3{margin-bottom:.5rem;color:#333;font-size:1.1rem;font-weight:600}.recipe__ingredients ul{list-style-type:disc;margin-left:1.5rem}.recipe__ingredients li{margin-bottom:.25rem;color:#555;line-height:1.4}.recipe__instructions{margin:1.5rem 0}.recipe__instructions h3{margin-bottom:.5rem;color:#333;font-size:1.1rem;font-weight:600}.recipe__instructions ol{list-style-type:decimal;margin-left:1.5rem}.recipe__instructions li{margin-bottom:.5rem;color:#555;line-height:1.5}.ingredient-input{max-width:900px;margin:2rem auto;padding:2rem;background:white;border-radius:12px;box-shadow:0 4px 6px rgba(0,0,0,.1)}.ingredient-input__header{text-align:center;margin-bottom:2rem}.ingredient-input__header h2{color:#333;margin-bottom:.5rem;font-size:1.5rem}.ingredient-input__header p{color:#666;font-size:1.1rem}.ingredient-input__form{position:relative;margin-bottom:1.5rem}.ingredient-input__field{display:flex;gap:.5rem;margin-bottom:.5rem}.ingredient-input__text{flex:1 1;padding:.75rem;border:2px solid #ddd;border-radius:8px;font-size:1rem;outline:none;transition:border-color .2s}.ingredient-input__text:focus{border-color:#007bff}.ingredient-input__add-btn{padding:1rem 2rem;background:#007bff;color:white;border:none;border-radius:8px;font-size:1.1rem;cursor:pointer;transition:background-color .2s}.ingredient-input__add-btn:hover:not(:disabled){background:#0056b3}.ingredient-input__add-btn:disabled{background:#ccc;cursor:not-allowed}.ingredient-input__suggestions{position:absolute;top:100%;left:0;right:0;background:white;border:1px solid #ddd;border-radius:8px;box-shadow:0 4px 6px rgba(0,0,0,.1);z-index:10}.ingredient-input__suggestion{display:block;width:100%;padding:.75rem;border:none;background:none;text-align:left;cursor:pointer;transition:background-color .2s}.ingredient-input__suggestion:hover{background:#f8f9fa}.ingredient-input__tags{display:flex;flex-wrap:wrap;gap:.5rem;margin-bottom:1.5rem}.ingredient-tag{display:flex;align-items:center;background:#e9ecef;border-radius:20px;padding:.5rem .75rem;gap:.5rem}.ingredient-tag__text{font-size:.9rem;color:#333}.ingredient-tag__remove{background:none;border:none;color:#666;cursor:pointer;font-size:1.2rem;line-height:1;padding:0;width:20px;height:20px;display:flex;align-items:center;justify-content:center;border-radius:50%;transition:background-color .2s}.ingredient-tag__remove:hover{background:#dc3545;color:white}.ingredient-input__actions{display:flex;gap:1rem;justify-content:center}.ingredient-input__generate-btn{padding:1rem 2rem;background:#28a745;color:white;border:none;border-radius:8px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:background-color .2s}.ingredient-input__generate-btn:hover:not(:disabled){background:#218838}.ingredient-input__generate-btn:disabled{background:#ccc;cursor:not-allowed}.ingredient-input__clear-btn{padding:1rem 1.5rem;background:#6c757d;color:white;border:none;border-radius:8px;font-size:1rem;cursor:pointer;transition:background-color .2s}.ingredient-input__clear-btn:hover{background:#545b62}.ingredient-input__login-prompt{text-align:center;padding:2rem;background:#f8f9fa;border-radius:8px;margin:1rem 0}.ingredient-input__login-prompt p{margin:.5rem 0;color:#666}.ingredient-input__login-prompt p:first-child{font-size:1.2rem;font-weight:600;color:#333}.loading-screen{position:fixed;top:0;left:0;right:0;bottom:0;background-color:rgba(0,0,0,.8);display:flex;align-items:center;justify-content:center;z-index:9999;animation:fadeIn .3s ease-in}.loading-screen.fade-out{animation:fadeOut .5s ease-out forwards}.loading-screen__content{text-align:center;color:white}.chef-hat-icon{margin:0 auto 20px;width:80px;height:80px;position:relative;animation:bounce 2s ease-in-out infinite}.chef-hat{width:60px;height:50px;background:white;border-radius:30px 30px 0 0;position:relative;margin:0 auto;animation:chefHatPulse 1.5s ease-in-out infinite}.chef-hat:before{content:"";position:absolute;top:-8px;left:50%;transform:translateX(-50%);width:70px;height:15px;background:white;border-radius:35px}.chef-hat:after{content:"👨‍🍳";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);font-size:24px}@keyframes bounce{0%,20%,50%,80%,to{transform:translateY(0)}40%{transform:translateY(-10px)}60%{transform:translateY(-5px)}}@keyframes chefHatPulse{0%,to{transform:scale(1)}50%{transform:scale(1.05)}}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes fadeOut{0%{opacity:1}to{opacity:0}}.loading-screen__message{font-size:1.5rem;font-weight:600;margin-bottom:10px;animation:messageSlide .5s ease-in-out}@keyframes messageSlide{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.loading-screen__submessage{font-size:1rem;opacity:.8}.featured-recipe{max-width:900px;margin:2rem auto}.featured-recipe__header{text-align:center;margin-bottom:2rem}.featured-recipe__header h2{font-size:1.75rem;color:#2a4865;margin-bottom:.5rem}.featured-recipe__header p{color:#666;font-size:1rem}.featured-recipe__card{margin:2rem auto;padding:2rem;background-color:white;border-radius:16px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.2);transition:transform .3s ease}.featured-recipe__card a{display:grid;grid-template-columns:1fr 1.5fr;grid-gap:0;gap:0;text-decoration:none;color:inherit}.featured-recipe__image{position:relative;height:300px}.featured-recipe__image img{width:100%;height:100%;object-fit:cover;border-radius:12px}.featured-recipe__content{padding:2rem;background:white;display:flex;flex-direction:column;justify-content:center}.featured-recipe__content h3{font-size:1.5rem;color:#333;margin-bottom:1rem;font-weight:400}.featured-recipe__description{color:#666;line-height:1.6;margin-bottom:1.5rem;font-size:1.1rem}.featured-recipe__meta{display:flex;gap:1rem;margin-bottom:1.5rem;flex-wrap:wrap}.featured-recipe__meta span{background:#f0f0f0;padding:.5rem 1rem;border-radius:8px;font-size:.875rem;color:#333}.featured-recipe__cta{align-self:flex-start;background:#007bff;color:white;border:none;padding:1rem 2rem;border-radius:8px;font-size:1.1rem;font-weight:600;cursor:pointer;transition:background .3s ease}.featured-recipe__cta:hover{background:#0056b3}@media (max-width:1024px){.recipes{grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}}@media (max-width:768px){.featured-recipe__card a{grid-template-columns:1fr}.featured-recipe__image{height:200px}}@media (max-width:640px){.recipes{grid-template-columns:1fr;gap:16px;padding:0 16px}.image-cover{aspect-ratio:4/3}.recipe__details{padding:16px;& h2{font-size:1.125rem}}}@media (max-width:480px){.recipes{gap:12px}.recipe__details{padding:12px}}