*,:after,:before{box-sizing:border-box;margin:0;padding:0}html{font-size:100%}:root{--white: #fff;--red-dark: #6e0202;--grey-300: #d1d5db;--grey-400: #9ca3af;--grey-500: #6b7280;--grey-700: #374151;--orange: #ffa500;--backgroundColor: var(--white);--borderRadius: .25rem;--text-color: var(--grey-500);--letterSpacing: 1px;--transition: .3s ease-in-out all;--shadow-1: 0 1px 3px rgba(0, 0, 0, .1), 0 1px 2px 0 rgba(0, 0, 0, .06);--shadow-2: 0 4px 6px -1px rgba(0, 0, 0, .1), 0 2px 4px -1px rgba(0, 0, 0, .06);--shadow-3: 0 10px 15px -3px rgba(0, 0, 0, .1), 0 4px 6px -2px rgba(0, 0, 0, .05);--shadow-4: 0 20px 25px -5px rgba(0, 0, 0, .1), 0 10px 10px -5px rgba(0, 0, 0, .04)}body{background:var(--white);font-family:Inter,sans-serif}h1{font-size:2.625rem;font-weight:800}h2{font-size:.875rem;font-weight:700}a{text-decoration:none}ul{list-style-type:none;padding:0}.link-button{color:var(--white);transition:var(--transition)}.link-button:hover{color:var(--orange)}img{width:100%;display:block;object-fit:cover}.btn{cursor:pointer;border:transparent;font-size:.875rem;font-weight:500;background:transparent;border-radius:var(--borderRadius);letter-spacing:var(--letterSpacing);padding:.4rem .8rem;transition:var(--transition);text-transform:capitalize;display:inline-block}.btn:hover{background:var(--grey-700);box-shadow:var(--shadow-3)}.loading-section{display:flex;align-items:center;justify-content:center;height:50vh;margin:0}.loading-container{position:relative;width:100px;height:100px}.loading-circle{position:absolute;width:100%;height:100%;border:8px solid var(--grey-500);border-top:8px solid transparent;border-radius:50%;animation:spin 1s linear infinite}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.wrapper{padding:78px 42px}.header{position:relative;background:#1a1a1ab3;color:var(--white)}.header-content:before{content:"";position:absolute;top:0;left:0;width:100%;height:100%;background:url(/assets/bg2-SPdmTYU-.jpg) center/cover no-repeat;z-index:-1}.header-content{display:flex;justify-content:space-between;align-items:center;max-width:1120px;margin:0 auto}.search-container{width:467px;max-width:80%;margin:-20px auto;z-index:1;position:relative}.search-container form{display:flex;flex-wrap:wrap;gap:.2em}.search-container .form-input{width:100%;padding:.8rem 1rem;border:1px solid var(--grey-300);outline:none;border-radius:var(--borderRadius)}::placeholder{font-family:inherit;font-size:.875rem;font-weight:500;color:var(--grey-500)}button.btn{margin-top:.5rem;background:var(--grey-400);color:var(--white)}.section,.section-center,.favorites-container{padding:3rem 0;padding-inline:2rem;max-width:1120px;margin:0 auto}.section-center,.favorites-container{display:grid;gap:2rem}@media (min-width: 776px){.section-center,.favorites-container{grid-template-columns:repeat(2,1fr)}}@media (min-width: 992px){.section-center,.favorites-container{grid-template-columns:repeat(3,1fr)}}.meal-section{margin-top:2rem}.meal{background:var(--white);color:var(--textColor);border-radius:var(--borderRadius);box-shadow:var(--shadow-2);transition:var(--transition)}.meal:hover{box-shadow:var(--shadow-4)}.meal img{height:15rem;border-top-left-radius:var(--borderRadius);border-top-right-radius:var(--borderRadius);cursor:pointer}.meal h5{padding:0;margin:0}.meal footer{padding:1rem 1.5rem;display:flex;align-items:center;justify-content:space-around;flex-wrap:wrap}.meal button.like-btn{background:transparent;color:var(--black)}.meal button.like-btn:hover{color:var(--red-dark)}.modal-overlay{position:fixed;top:0;left:0;height:100%;width:100%;background:#000000d9;display:grid;place-items:center;transition:var(--transition);z-index:100}.modal-container{width:80%;background:var(--white);max-width:800px;height:80vh;overflow:scroll;border-radius:var(--borderRadius)}.modal-img{height:15rem;border-top-left-radius:var(--borderRadius);border-top-right-radius:var(--borderRadius)}.modal-content{padding:1rem 1.5rem}.modal-content p{margin-top:1rem;text-align:justify;color:var(--grey-600);line-height:1.4}.modal-content a{display:block;color:var(--primary-500);margin-block:1rem;text-decoration:underline;transition:var(--transition)}.modal-content a:hover{color:var(--black)}.btn.close-btn{background:var(--red-dark);color:var(--white)}.favorites{margin-top:2rem}.favorite-item{margin-top:1rem}