@tailwind base;@tailwind components;@tailwind utilities;:root{--clr-primary-1:#063251;--clr-primary-2:#104e7a;--clr-primary-3:#1a6aa2;--clr-primary-4:#2d87c8;--clr-primary-5:#49a6e9;--clr-primary-6:#6ebef7;--clr-primary-7:#8bcbf9;--clr-primary-8:#a5d5f8;--clr-primary-9:#c5e5fc;--clr-primary-10:#ebf7ff;--clr-grey-1:#102a42;--clr-grey-2:#243a52;--clr-grey-3:#324d67;--clr-grey-4:#48647f;--clr-grey-5:#617d98;--clr-grey-6:#829ab0;--clr-grey-7:#9eb2c7;--clr-grey-8:#bcccdc;--clr-grey-9:#dae2ec;--clr-grey-10:#f1f5f8;--clr-white:#fff;--clr-gold:#c59d5f;--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,0.1);--dark-shadow:0 5px 15px rgba(0,0,0,0.2);--max-width:1170px;--fixed-width:620px}.App{text-align:center}.App-logo{height:40vmin;pointer-events:none}@media (prefers-reduced-motion:no-preference){.App-logo{animation:App-logo-spin 20s linear infinite}}.App-header{background-color:#282c34;min-height:100vh;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:calc(10px + 2vmin);color:#fff}.App-link{color:#61dafb}@keyframes App-logo-spin{0%{transform:rotate(0deg)}to{transform:rotate(1turn)}}.no-recipe-container{height:90vh;display:flex;align-items:center;justify-content:center}.recepies{display:grid;margin:0 auto;grid-template-columns:repeat(auto-fit,minmax(15rem,35rem));grid-gap:3rem;gap:3rem;justify-content:center}.header .header-info{word-break:break-word;background:#fff;border-radius:0;overflow:hidden;box-shadow:0 3px 10px rgba(0,0,0,.089);transform:translateY(-40px);margin:auto;display:flex;flex-direction:column;flex-wrap:nowrap;align-items:center;justify-content:flex-start}.header .header-info .title{text-align:center;width:80%;margin-top:10px}.header .header-info .title h1{font-weight:700;font-size:30px}.header .header-info .details{display:flex;flex-direction:row;align-items:center;justify-content:center;width:100%;border-top:1px solid #e0e0e0;border-bottom:1px solid #e0e0e0}.header .header-info .details .left{border-right:1px solid #e0e0e0}.header .header-info .details .left,.header .header-info .details .right{display:flex;align-items:center;justify-content:center;flex-direction:column;width:50%;padding:10px;box-sizing:border-box}.header .header-info .actions{width:90%}.header .header-info .actions .view-recipe{background:#ddab61}.header .header-info .actions .view-recipe:hover{color:#fff}.header .header-info .actions .view-recipe .link-btn{color:#000;text-decoration:none;transition:.5s}.header .header-info .actions .save-recipe,.header .header-info .actions .view-recipe{display:flex;align-items:center;justify-content:center;transition:all .5s;margin:20px 0;padding:10px;box-sizing:border-box;border-radius:10px}.header .header-info .actions .save-recipe .icon,.header .header-info .actions .view-recipe .icon{margin-right:10px;width:30px;height:30px}.header .header-info .actions .save-recipe{background:#e00e32;color:#fff}@media screen and (max-width:700px){.recipes .header .img{height:300px;background-size:cover;background-position:50%}.recipes .header .header-info{width:90%}.recipes .header .header-info .actions{transition:all .5s}.recipes .header .header-info .actions .view-recipe:hover{background-color:#cf8d2a;cursor:pointer}.single-recepie .header .img{height:300px;margin:auto;background-size:cover;background-position:top}.single-recepie .header .header-info{width:90%}}@media screen and (min-width:700px) and (max-width:999px){.recipes .header .img{height:300px;width:80%;margin:auto;background-size:cover}.recipes .header .header-info{width:60%}.single-recepie .header .img{height:400px;margin:auto;background-size:cover;background-position:top}.single-recepie .header .header-info{width:60%}.single-recepie .header .header-info .details .left,.single-recepie .header .header-info .details .right{align-items:center;justify-content:center}}@media screen and (min-width:1000px){.recipes .header .img{height:400px;background-size:cover;background-position:50%}.recipes .header .header-info .actions{transition:all .5s}.recipes .header .header-info .actions .view-recipe:hover{background-color:#cf8d2a;cursor:pointer}.single-recepie .header .img{height:500px;width:70%;margin:auto;background-size:cover;background-position:top}.single-recepie .header .img img{height:100%}.single-recepie .header .header-info{width:40%}}.section{width:100%;scroll-behavior:smooth;padding-top:20px}.menu .page-header{position:fixed;top:0;left:0;width:100%;background:#fff;padding:10px;box-sizing:border-box;z-index:10;box-shadow:0 3px 10px rgba(0,0,0,.089)}.menu .page-header .div-menu{display:flex;align-items:center;justify-content:center;flex-direction:row}.menu .page-header .div-menu .filter{position:absolute;left:10px}.menu .page-header .div-menu .filter:hover{cursor:pointer}.menu .page-header .div-menu .filter input{border:2px solid #000}.menu .page-header .div-menu .filter .icon{width:40px;height:40px;width:100%}.menu .page-header .div-filter{margin-top:10px;display:flex;align-items:center;justify-content:center}.menu .page-header .div-filter input{padding:5px}.underline{width:80px;height:4px;margin-top:5px;background-color:#ddab61}.filter-btn{background:transparent;font-size:1rem;text-transform:capitalize;letter-spacing:1px;padding:.375rem .75rem;border:2px solid #ddab61;cursor:pointer;transition:all .3s linear;border-radius:0;margin:0 .5rem 20px}.active-btn,.filter-btn:hover{background:#ddab61;color:#fff}@media screen and (min-width:1000px){.recipes{padding:20px;display:grid;grid-template-columns:repeat(3,1fr);grid-column-gap:3em;grid-row-gap:3em}}.filters-container{display:flex;align-items:center;justify-content:center;flex-direction:column;transition:all .5s;overflow:hidden}.filters-container .line{display:flex;align-items:flex-start;justify-content:space-around;margin-bottom:10px;width:400px}.filters-container .line .filters-group{margin:10px}.filters-container .line .filters-group .title{color:#cf8d2a;font-size:25px}.filters-container .line .filters-group .filter{display:flex;align-items:center;justify-content:flex-start;margin:5px 0;text-transform:capitalize;cursor:pointer}.filters-container .line .filters-group .filter .cx-box{display:inline-block;width:22px;height:22px;border-radius:2px;border:2px solid #000;display:grid;place-content:center}.filters-container .line .filters-group .filter .cx-box:before{content:"";width:.9em;height:.9em;transform:scale(0);transition:transform .12s ease-in-out;box-shadow:inset 1em 1em #639}.filters-container .line .filters-group .filter .cx-box.checked:before{transform:scale(1)}.filters-container .line .filters-group .filter label{margin-left:10px;font-size:20px;cursor:pointer}.filters-container .line.button{height:30px}.filters-container .line.button .btn-reset{width:150px;display:flex;align-items:center;justify-content:center;height:35px;border-radius:5px;background-color:#ddab61;color:#000;transition:all .5s}.filters-container .line.button .btn-reset:hover{cursor:pointer;background-color:#cf8d2a}.filters-container .random-recipe{padding:5px 15px;border-radius:5px;background:#ddab61;transition:.3s;margin-bottom:10px}.filters-container .random-recipe .span{text-decoration:none;color:#000}.filters-container .random-recipe:hover{background:#cf8d2a;cursor:pointer}@media screen and (max-width:700px){.filters-container{display:flex;align-items:flex-start;width:200px}.filters-container,.filters-container .line{justify-content:center;flex-direction:column}.filters-container .line{width:100%;align-items:stretch;margin-bottom:5px}.filters-container .line.button{align-items:center}}.recipe-page .page-header{display:flex;align-items:center;justify-content:center;flex-direction:column;margin-bottom:30px}.recipe-page .underline{margin-bottom:20px}.content .ingredients{background:#fff}.content .ingredients .line{display:flex;align-items:flex-start;justify-content:flex-start;padding:10px;box-sizing:border-box}.content .ingredients .line:hover{cursor:pointer}.content .ingredients .line .checkbox{min-width:20px;min-height:20px;margin-right:15px}.content .ingredients .line .ingredient{width:100%}.content .ingredients .line .ingredient.crossed{text-decoration:line-through}.content .ingredients,.content .intructions{width:100%;background:#fff;padding:20px;box-sizing:border-box}.content .intructions .step{display:flex;align-items:flex-start;justify-content:space-between;margin:20px 0;padding:15px;box-sizing:border-box;box-shadow:0 3px 10px rgba(0,0,0,.089)}.content .intructions .step .number{width:10%;color:#e8523d;font-size:20px;font-weight:600;text-shadow:1px 1px 2px rgba(0,0,0,.24)}.content .intructions .step .intruction{width:85%}.instructions{margin-top:50px;padding:20px;box-sizing:border-box;background:#fff;border-radius:0;overflow:hidden;box-shadow:0 3px 10px rgba(0,0,0,.089)}.division-lable{margin-bottom:30px;display:flex;align-items:center;flex-direction:row}.division-lable h3{font-size:30px;margin-right:20px;color:#607d98}.items-list{margin-bottom:50px}.items-list li{font-size:20px;margin:20px}.page-title{display:flex;align-items:center;justify-content:center;flex-direction:column}@media screen and (max-width:999px){.single-recepie .content .intructions{margin-top:30px}}@media screen and (min-width:1000px){.single-recepie .content{display:flex;align-items:flex-start;justify-content:space-around}.single-recepie .content .ingredients{width:30%}.single-recepie .content .intructions{width:40%;margin-top:0}}.recepie-img{height:100%;background-position:0;border:5px solid #ddab61;border-radius:5px;display:flex;justify-content:center;align-items:center;overflow:hidden}.recepie-img img{min-width:100%;min-height:100%;object-fit:cover}.navigation{padding:10px;box-sizing:border-box;border-radius:10px;box-shadow:0 3px 10px rgba(0,0,0,.089);background:rgba(255,244,244,.185);display:flex;align-items:center;justify-content:center}.navigation .link-btn{margin-left:10px;font-size:20px;color:#000;text-decoration:none}*{padding:0;box-sizing:border-box;-webkit-user-select:none;user-select:none}*,body{margin:0}body{font-family:-apple-system,BlinkMacSystemFont,"Segoe UI","Roboto","Oxygen","Ubuntu","Cantarell","Fira Sans","Droid Sans","Helvetica Neue",sans-serif;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}#root{background:#f1f5f8;min-height:100vh}code{font-family:source-code-pro,Menlo,Monaco,Consolas,"Courier New",monospace}.spacer{height:60px}.div-visible{height:100%}.div-invisible{height:0}.random-recipe-container{height:100vh;display:flex;align-items:center;justify-content:flex-start;flex-direction:column}.random-recipe-container .header-btn{width:100%;padding:7px;background-color:#ddab61}.random-recipe-container .numberOfRecipesHeader{margin-top:10px;width:100%;display:flex;align-items:center;justify-content:flex-start;flex-direction:column}.random-recipe-container .numberOfRecipesHeader .numberOfRecipes{text-align:center}.random-recipe-container .numberOfRecipesHeader .numberOfRecipes .line{text-align:center;display:flex;align-items:center;justify-content:center;margin-bottom:10px}.random-recipe-container .numberOfRecipesHeader .numberOfRecipes .line button{-webkit-appearance:none;appearance:none;background-color:initial;border:1px solid #1a1a1a;border-radius:5px;box-sizing:border-box;color:#3b3b3b;cursor:pointer;display:inline-block;font-family:Roobert,-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif,"Apple Color Emoji","Segoe UI Emoji","Segoe UI Symbol";font-size:16px;font-weight:600;line-height:normal;outline:none;padding:5px 20px;text-align:center;text-decoration:none;transition:all .3s cubic-bezier(.23,1,.32,1);user-select:none;-webkit-user-select:none;touch-action:manipulation;will-change:transform}.random-recipe-container .numberOfRecipesHeader .numberOfRecipes .line button:disabled{pointer-events:none}.random-recipe-container .numberOfRecipesHeader .numberOfRecipes .line button:hover{color:#fff;background-color:#1a1a1a;box-shadow:0 8px 15px rgba(0,0,0,.25);transform:translateY(-2px)}.random-recipe-container .numberOfRecipesHeader .numberOfRecipes .line button:active{box-shadow:none;transform:translateY(0)}.random-recipe-container .numberOfRecipesHeader .numberOfRecipes .line span{font-size:30px;margin:0 10px}.random-recipe-container .numberOfRecipesHeader .numberOfRecipes .getRecipes{--color:#00a97f;padding:5px 10px;background-color:initial;border-radius:.3em;position:relative;overflow:hidden;cursor:pointer;transition:.5s;font-weight:400;font-size:17px;border:1px solid;font-family:inherit;text-transform:uppercase;color:#000;z-index:1}.random-recipe-container .numberOfRecipesHeader .numberOfRecipes .getRecipes:after,.random-recipe-container .numberOfRecipesHeader .numberOfRecipes .getRecipes:before{content:"";display:block;width:50px;height:50px;transform:translate(-50%,-50%);position:absolute;border-radius:50%;z-index:-1;background-color:var(--color);transition:1s ease}.random-recipe-container .numberOfRecipesHeader .numberOfRecipes .getRecipes:before{top:-1em;left:-1em}.random-recipe-container .numberOfRecipesHeader .numberOfRecipes .getRecipes:after{left:calc(100% + 1em);top:calc(100% + 1em)}.random-recipe-container .numberOfRecipesHeader .numberOfRecipes .getRecipes:hover:after,.random-recipe-container .numberOfRecipesHeader .numberOfRecipes .getRecipes:hover:before{height:410px;width:410px}.random-recipe-container .numberOfRecipesHeader .numberOfRecipes .getRecipes:hover{color:#0a191e}.random-recipe-container .numberOfRecipesHeader .numberOfRecipes .getRecipes:active{filter:brightness(.8)}
/*# sourceMappingURL=main.d72c39d1.chunk.css.map */