:root{--primary-dark:#1a252c;--secondary-dark:#36525b;--accent-green:#6e7e57;--accent-teal:#47695f;--light-bg:#f0ebeb;--light-text:#f0ebeb;--medium-gray:#757575;--scrollbar-thumb:#888;--scrollbar-track:#f1f1f1;--overlay:#0000004d}*{box-sizing:border-box;text-align:center;margin:0;padding:0;font-family:Nunito,sans-serif;font-size:20px}body{background-image:url(background.85e309a3.webp);background-position:50%;background-repeat:no-repeat;background-size:cover;justify-content:center;align-items:center;height:100vh;display:flex}body:before{content:"";background:var(--overlay);z-index:-1;width:100%;height:100%;position:absolute;top:0;left:0}#main--container{width:47%;height:44%;box-shadow:0 0 10px var(--overlay);z-index:1;background:linear-gradient(90deg,#3b596466,#717e5866);border-radius:2rem;flex-direction:column;justify-content:center;align-items:center;display:flex}.search--container{z-index:1;border-radius:10px;flex-direction:column;justify-content:center;align-items:center;width:92%;height:90%;display:flex}.header--container{z-index:1;flex-direction:column;justify-content:end;align-items:center;width:95%;height:50%;display:flex}.header--h1{color:var(--primary-dark);flex-direction:column;justify-content:end;align-items:center;font-size:1.3rem;display:flex}.input--container{z-index:1;flex-direction:column;justify-content:center;align-items:center;width:95%;height:50%;display:flex}#search--input{text-align:left;color:var(--medium-gray);border:.2rem solid var(--accent-green);background-color:#fffc;border-radius:2rem;outline:none;width:100%;height:29%;padding:.5rem .7rem;font-size:large}#results--container{flex-direction:row;justify-content:center;align-items:center;width:75%;height:70%;display:none;position:relative}#recommended--container{gap:3rem;width:95%;height:85%;margin-left:2%;margin-right:2%;display:flex}#recommended--recipes{background:var(--light-bg);border-radius:2rem;width:40%;margin-left:3%;position:relative}.recipe--list{border:var(--light-bg)1rem solid;direction:rtl;border-radius:2rem;width:99%;height:99%;max-height:100%;margin-top:3px;padding-right:3px;position:relative;overflow:hidden auto}.recipe--list *{direction:ltr}ul{list-style-type:none}::-webkit-scrollbar{width:10px}::-webkit-scrollbar-track{background:var(--scrollbar-track);border-radius:10px}::-webkit-scrollbar-thumb{background:var(--scrollbar-thumb);border-radius:10px}::-webkit-scrollbar-thumb:hover{background:#555}.recipe--item{background-color:var(--accent-teal);cursor:pointer;border-radius:.3rem;width:99%;margin-bottom:2%;transition:transform .3s,box-shadow .3s}.recipe--item:hover{transform:scale(1.05);box-shadow:0 8px 16px #0003}.recipe--imgContainer{text-align:center;flex-direction:row;align-items:center;display:flex;overflow:hidden}.recipe--img{width:25%;transition:transform .3s;display:flex}.recipe--item:hover .recipe--img{transform:scale(1.1)}.recipe--title{width:75%;color:var(--light-text);justify-content:center;padding:1%;font-size:.9rem;display:flex}.recipe--item:hover{opacity:1}#description--container{width:50%;color:var(--secondary-dark);background:#f0ebeb;border:1rem solid #f0ebeb;border-radius:2rem;position:relative;overflow-y:auto}.description--title{text-align:left;width:70%;margin:2% auto 4%}.description--text{grid-template-columns:repeat(1,1fr);gap:10px;width:70%;margin:0 auto 2rem;font-size:.9rem;display:grid}.description--text li{text-align:left;counter-increment:item;font-size:.8rem;font-weight:400;list-style-type:none}.description--text li:before{content:counter(item)") "}.description--list{grid-template-columns:repeat(2,1fr);gap:30px;width:70%;margin:0 auto 1rem;display:grid}.description--list li{text-align:left;font-size:.8rem;font-weight:400}#btn--back{cursor:pointer;color:#36525b;background:#f0ebeb;border:none;border-radius:2rem;justify-content:center;align-items:center;width:5%;height:100%;font-size:4rem;font-weight:700;line-height:1;transition:background-color .3s;display:flex}#btn--back:hover{color:#f0ebeb;background-color:#47695fe6}.spinner{z-index:10;position:absolute;top:50%;left:50%;transform:translate(-50%,-50%)}.spinner-inner{border:4px solid #f3f3f3;border-top-color:#3498db;border-radius:50%;width:40px;height:40px;animation:1s linear infinite spin}.error{text-align:center;width:100%;height:100%;color:var(--secondary-dark);justify-content:center;align-items:center;font-size:1.5rem;display:flex}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}
/*# sourceMappingURL=index.1840e244.css.map */