@import"https://fonts.googleapis.com/css2?family=Rubik:wght@400;500;600;700;800;900&display=swap";@import"https://fonts.googleapis.com/css2?family=McLaren&display=swap";#root,.details{display:-ms-grid}.load,.nav,body{display:-webkit-box;display:-ms-flexbox}.nav-form input,body{color:var(--clr-grey-2)}.btn,.nav-bookmarks{gap:1rem;cursor:pointer}.btn,.recipes-list figure img{-webkit-transition:.2s;-o-transition:.2s}.bookmark-el a,.btn--direction:link,.btn--direction:visited{text-decoration:none}.banner figure h2,.details-title{text-transform:uppercase;text-shadow:var(--text-shadow)}.bookmark-close,.btn,.details-btn,.nav-bookmarks,.nav-logo{cursor:pointer}.bookmark-list,.directions,.recipes-container{-webkit-box-orient:vertical;-webkit-box-direction:normal}:root{--clr-background:linear-gradient(90deg, rgba(100,92,84,1) 46%, rgba(75,69,63,1) 71%);--clr-background-light:#6f6a65;--font-primary:"Rubik",sans-serif;--font-logo:"McLaren",sans-serif;--clr-main:#d68706;--clr-main-1:#b96018;--clr-white:#ffffff;--clr-light-1:#e5e1dd;--clr-light-2:#cecbc7;--clr-dark-grey:#4b453f;--clr-black:#000;--clr-dark-1:#333;--clr-grey-2:#555555;--clr-grey-3:#eeeeee;--text-shadow:.2rem .2rem .4rem rgba(0, 0, 0, .2)}*,:after,:before{margin:0;padding:0;-webkit-box-sizing:inherit;box-sizing:inherit}html{-webkit-box-sizing:border-box;box-sizing:border-box;font-size:62.5%}@media screen and (max-width:56.25em){html{font-size:56.25%}}@media screen and (max-width:43.75em){html{font-size:50%}}body{font-family:var(--font-primary);display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;font-size:1.6rem;font-weight:400;min-height:100vh;background:var(--clr-background);line-height:1.5}#root{-webkit-box-shadow:.3rem .3rem 2rem rgba(10,14,17,.2);box-shadow:.3rem .3rem 2rem #0a0e1133;height:95vh;width:100rem;border-radius:.5rem;display:grid;-ms-grid-rows:-webkit-min-content 1fr -webkit-min-content;-ms-grid-rows:min-content 1fr min-content;grid-template-rows:-webkit-min-content 1fr -webkit-min-content;grid-template-rows:min-content 1fr min-content}@media screen and (max-width:68.75em){#root{height:100vh;width:100%}}.load{display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;margin-top:2rem;color:#fff}.nav{background:var(--clr-light-1);padding:0 0 0 2rem;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;margin-bottom:1px}.banner figure h2,.btn{background:-webkit-gradient(linear,left top,right top,from(#d68706),to(#b96018));background:-o-linear-gradient(left,#d68706 0,#b96018 100%)}.nav-bookmarks,.nav-results{padding:3rem 2rem}.nav-logo{font-family:var(--font-logo);color:var(--clr-dark-1);font-style:italic}.btn,.recipes{color:var(--clr-white)}.nav-form{display:-webkit-box;display:-ms-flexbox;display:flex;width:40%;-webkit-box-shadow:2px 2px 5px rgba(5,12,25,.3);box-shadow:2px 2px 5px #050c194d;border-radius:10rem}.nav-bookmarks,.nav-menu{display:-webkit-box;display:-ms-flexbox;-webkit-box-align:center}.nav-form input{width:100%;margin-right:-3rem;border:none;background:var(--clr-white);padding:1rem 2rem;font-family:inherit;font-size:inherit;border-radius:10rem}.bookmark-el h4,.nav-bookmarks .fa-bookmark{color:var(--clr-main)}.nav-form input:focus{outline:0}.nav-menu{display:flex;-ms-flex-align:center;align-items:center}.bookmark-el a:active,.bookmark-el a:hover,.nav-bookmarks:hover,.nav-results:hover{background:var(--clr-light-2)}.nav-bookmarks{display:flex;-ms-flex-align:center;align-items:center}.btn{background:linear-gradient(90deg,#d68706 0,#b96018 100%);display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;padding:1.3rem 3.2rem;border:none;border-radius:10rem;font-size:1.5rem;font-weight:500;z-index:5;transition:.2s}.btn:hover{-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}.bookmark{position:absolute;width:30rem;padding:4rem 0 2rem;background-color:var(--clr-light-1);right:0;z-index:10}.bookmark-close{position:absolute;text-align:right;display:block;font-weight:600;margin:0 0 2rem;right:2rem;top:.6rem}.banner figure h2,.directions,.footer,.ingredients h2,.recipes-text{text-align:center}.bookmark-el a,.bookmark-list,.recipes-results{display:-webkit-box;display:-ms-flexbox}.bookmark-text{padding:0 2rem;font-size:1.6rem}.bookmark-list{list-style:none;display:flex;-ms-flex-direction:column;flex-direction:column}.bookmark-el a{padding:1rem 3rem;display:flex;gap:2rem}.bookmark-el a figure{width:5rem;height:5rem}.bookmark-el a figure img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;border-radius:50%}.bookmark-el h4{font-size:1.6rem}.bookmark-el p{color:var(--clr-grey-2);text-transform:uppercase;font-size:1.2rem}.main{position:relative;font-size:1.8rem}.recipes{padding:2rem;background:var(--clr-background-light);height:100%}.recipes-results{list-style:none;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-ms-flex-wrap:wrap;flex-wrap:wrap;gap:2rem}.recipes-container,.servings{display:-webkit-box;display:-ms-flexbox}.recipes-list:hover img{-webkit-filter:brightness(50%);filter:brightness(50%);-webkit-transform:scale(1.1);-ms-transform:scale(1.1);transform:scale(1.1)}.recipes-list figure{border-radius:.7rem;width:18rem;height:22rem;position:relative;overflow:hidden;-webkit-box-shadow:5px 5px 5px 0 rgba(29,30,27,.3);box-shadow:5px 5px 5px #1d1e1b4d;-webkit-box-shadow:5px 5px 5px rgba(75,69,63,.3);box-shadow:5px 5px 5px #4b453f4d;border:1px solid #e0dedd}.recipes-list figure img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover;transition:.2s;-webkit-filter:brightness(85%);filter:brightness(85%)}.recipes-list figure figcaption{position:absolute;bottom:3rem;left:50%;-webkit-transform:translateX(-50%);-ms-transform:translateX(-50%);transform:translate(-50%);text-align:center}.recipes-list figure figcaption h4{color:var(--clr-main);color:#fff;text-shadow:.4rem .4rem 1rem rgba(0,0,0,.6)}.recipes-list figure figcaption p{font-size:1.4rem;color:var(--clr-main);color:#f5e2c3;text-shadow:.2rem .2rem 1rem rgba(0,0,0,.4);font-weight:500}.recipes-container{display:flex;-ms-flex-direction:column;flex-direction:column;height:100%}.recipes-btns{position:relative;width:100%;padding:5rem 0;margin-top:auto}.recipes-btns button{position:absolute;bottom:2rem}.footer{color:#e0dedd;padding:3rem 0;background:#5a534c}.footer a:link,.footer a:visited{color:#e0dedd;text-decoration:none}.footer a:active,.footer a:hover{text-decoration:underline}.details{position:relative;color:var(--clr-white);padding:2rem;background:var(--clr-background-light);height:100%;display:grid;justify-items:center;-ms-grid-columns:1fr;grid-template-columns:1fr;-ms-grid-rows:-webkit-min-content 1fr;-ms-grid-rows:min-content 1fr;grid-template-rows:-webkit-min-content 1fr;grid-template-rows:min-content 1fr}.details>:first-child{-ms-grid-row:1;-ms-grid-column:1}.details>:nth-child(2){-ms-grid-row:2;-ms-grid-column:1}.details-container{max-width:70rem;display:-ms-grid;display:grid;-ms-grid-rows:-webkit-min-content 1fr -webkit-min-content;-ms-grid-rows:min-content 1fr min-content;grid-template-rows:-webkit-min-content 1fr -webkit-min-content;grid-template-rows:min-content 1fr min-content;justify-items:center}.details-title{margin-bottom:2rem;color:var(--clr-main)}.details-btn{position:absolute;left:2rem;top:2rem;font-size:2.4rem;background:0 0;border:none;color:var(--clr-white)}.details-btn:after{color:var(--clr-main);content:"Back";position:absolute;z-index:10;top:-2rem;left:0;font-size:1.5rem;opacity:0;visibility:hidden}.details-btn:hover:after{opacity:1;visibility:visible}.banner{width:90%}.banner figure{position:relative;width:100%;height:40rem}.banner figure img{width:100%;height:100%;-o-object-fit:cover;object-fit:cover}.banner figure h2{position:absolute;background:linear-gradient(90deg,#d68706 0,#b96018 100%);-webkit-box-shadow:5px 5px 5px 0 rgba(25,28,23,.3);box-shadow:5px 5px 5px #191c174d;padding:2rem;bottom:0;left:50%;-webkit-transform:translateX(-50%) skewX(10deg);-ms-transform:translateX(-50%) skewX(10deg);transform:translate(-50%) skew(10deg)}@media screen and (max-width:46.875em){.banner h2{font-size:2.4rem}}@media screen and (max-width:37.5em){.nav{-ms-flex-wrap:wrap;flex-wrap:wrap;padding-bottom:2rem}.nav-form{-webkit-box-ordinal-group:2;-ms-flex-order:1;order:1;width:100%;margin-right:2rem}.banner h2{font-size:2rem}}@media screen and (max-width:31.875em){html{font-size:43.75%}.banner h2{font-size:1.8rem;width:60%;text-align:center}}.servings{padding:5rem 0;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between;width:100%;font-size:1.8rem}.servings--descrpt,.servings--descrpt P:last-child span,.servings--descrpt p{display:-webkit-box;display:-ms-flexbox}.servings--descrpt{width:60%;display:flex;-webkit-box-pack:justify;-ms-flex-pack:justify;justify-content:space-between}.servings--descrpt .fa-clock,.servings--descrpt .fa-people-arrows{color:var(--clr-main);stroke:var(--clr-main)}.servings--descrpt p{display:flex;gap:1rem;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.servings--descrpt P:last-child span{font-size:1.4rem;color:var(--clr-main);border:2px solid var(--clr-main);border-radius:50%;width:2rem;height:2rem;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;padding:1rem;cursor:pointer;-webkit-transition:.2s;-o-transition:.2s;transition:.2s}.servings--descrpt P:last-child span:hover{-webkit-transform:translateY(-1px);-ms-transform:translateY(-1px);transform:translateY(-1px)}@media screen and (max-width:37.5em){.servings{width:80%}.servings--descrpt{width:70%}}@media screen and (max-width:28.125em){.servings{-ms-flex-wrap:wrap;flex-wrap:wrap;gap:2rem}.servings--descrpt{width:100%}.servings button{display:block;margin:0 auto}}.ingredients{width:100%;padding:2rem 0}.ingredients h2{color:var(--clr-main)}.ingredients-list{display:-ms-grid;display:grid;-ms-grid-columns:1fr 2rem 1fr;grid-template-columns:repeat(2,1fr);grid-gap:2rem}.ingredients-el{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center;gap:1.5rem}.ingredients-el span{color:var(--clr-main);-ms-flex-item-align:start;align-self:flex-start}@media screen and (max-width:37.5em){.ingredients-list{display:-ms-grid;display:grid;-ms-grid-columns:1fr;grid-template-columns:1fr;justify-items:center}}.directions{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;width:100%;padding:5rem 0 3rem}.directions p{margin-bottom:3rem}