:root{--font-family-header: "Noto Kufi Arabic", Avenir, Inter, system-ui, sans-serif, Arial;--font-family-body: "Nunito", Avenir, Inter, system-ui, sans-serif, Arial;--font-size-p: 1rem;--font-size-h3: 1.75rem;--font-size-h2: 3rem;--font-size-h1: 4rem;--font-size-btn: 1.125rem;--line-height-p: 150%;--color-dark: #242423;--color-light: #f6f8fb;--color-primary: #67b238;--color-secondary: #FA7921;--color-red: #e2122e;--color-dark-tint: color-mix(in srgb, var(--color-dark), white 35%);--color-light-tint: color-mix(in srgb, var(--color-light), white 35%);--color-primary-shade: color-mix(in srgb, var(--color-primary), black 25%);--color-primary-tint: color-mix(in srgb, var(--color-primary), white 80%);--color-secondary-tint: color-mix(in srgb, var(--color-secondary), white 15%);--color-red-tint: color-mix(in srgb, var(--color-red), white 35%);--footer-height: 4rem}*,*:before,*:after{box-sizing:border-box}*{margin:0;font:inherit}html{-moz-text-size-adjust:none;-webkit-text-size-adjust:none;text-size-adjust:none}ol,ul{list-style:none;padding:0}img{display:block;max-width:100%}a{color:inherit;text-decoration:inherit}button{background-color:inherit;color:inherit;border:inherit}button:hover{cursor:pointer}:root{font-family:var(--font-family-body)}body{font-size:var(--font-size-p);line-height:var(--line-height-p)}main{min-height:calc(100vh - var(--footer-height));background-color:var(--color-light);color:var(--color-dark)}footer{height:var(--footer-height);width:100%;display:flex;background-color:var(--color-primary-shade);color:var(--color-light)}h1,h2,h3{font-family:var(--font-family-header);line-height:175%}h1{font-size:var(--font-size-h1);font-weight:700;letter-spacing:-2%}h2{font-size:var(--font-size-h2);font-weight:700;letter-spacing:-1.5%}h3{font-size:var(--font-size-h3);font-weight:600;letter-spacing:-1.5%}input,textarea{border:1px solid var(--color-dark-tint);border-radius:.25rem;background-color:var(--color-light);padding-left:.5rem}input:focus,textarea:focus{background-color:var(--color-light-tint)}textarea{padding-top:.25rem}svg.lg{height:3rem;width:3rem}svg.md{height:1.25rem;width:1.25rem}svg.sm{height:1rem;width:1rem}.page{width:100%;padding-inline:17vw;padding-top:2rem;padding-bottom:4rem}.button{width:max-content;border-radius:2rem;display:flex;justify-content:center;align-items:center;padding-block:.5rem;padding-inline:1rem;font-weight:600;font-size:var(--font-size-btn);gap:.25rem;transition:all .1s ease-out}.button.small{font-size:var(--font-size-p);font-weight:400}.button.icon{height:2rem;width:3rem;padding:0}.button.icon>svg{margin:auto}.button.action{color:var(--color-light);border:1px solid var(--color-secondary);background-color:var(--color-secondary)}.button.action .colorable{stroke:var(--color-light)}.button.action:hover{color:var(--color-light-tint);border-color:var(--color-secondary-tint);background-color:var(--color-secondary-tint)}.button.action:hover .colorable{stroke:var(--color-light-tint)}.button.primary{color:var(--color-dark);border:1px solid var(--color-dark)}.button.primary .colorable{stroke:var(--color-dark)}.button.primary:hover{color:var(--color-dark-tint);border-color:var(--color-dark-tint);background-color:var(--color-light-tint)}.button.primary:hover .colorable{stroke:var(--color-dark-tint)}.button.red{color:var(--color-red);border:1px solid var(--color-red)}.button.red .colorable{stroke:var(--color-red)}.button.red:hover{color:var(--color-red-tint);border-color:var(--color-red-tint);background-color:var(--color-light-tint)}.button.red:hover .colorable{stroke:var(--color-red-tint)}.button.sort{border:none;justify-content:start;padding-inline:0;text-align:left;transition:none}.button.sort .fillable{fill:var(--color-dark)}.button.sort:hover{color:var(--color-dark-tint)}.button.sort:hover .fillable{fill:var(--color-dark-tint)}.accented{position:relative;border-left:4px solid var(--color-primary);padding-left:2rem}.accented.top:before{content:"";position:absolute;top:0;left:0;width:5%;border-bottom:4px solid var(--color-primary)}.separator{width:100%;border:.5px solid var(--color-primary)}.separator.title-row{border-width:1px}.modal-overlay{position:fixed;inset:0;z-index:10;display:flex;justify-content:center;align-items:center;background-color:#00000040}.modal{margin-top:-40vh;max-width:80vw;border-radius:2rem;box-shadow:0 0 20px #0003;background-color:var(--color-light);padding:2rem;display:flex;flex-direction:column;align-items:center;gap:1rem}.modal>span{display:flex;flex-direction:row;flex-wrap:wrap;gap:.5rem}.landing{display:flex;flex-direction:column}.landing>a{width:fit-content;margin-block:1rem}.hero{margin-block:2rem}.hero>h3{padding-left:4rem;padding-bottom:.5rem}footer>nav{width:100%;margin-block:auto;margin-inline:1.5rem}.footer-list{display:flex;flex-direction:row;justify-content:space-evenly}.footer-link:hover{text-decoration:underline}.recipe-list-sort>span{display:flex;flex-direction:row;width:calc(100% - 6.25rem)}.recipe-list-sort .button.sort{flex-basis:50%}.recipe-list-item>span{display:flex;flex-direction:row;align-items:center;gap:.5rem}.recipe-list-item .recipe-list-text{display:flex;flex-direction:row;gap:.5rem;width:100%;padding-block:.75em}.recipe-list-item .recipe-list-text.populated:hover{color:var(--color-dark-tint)}.recipe-list-item .recipe-list-text>span:nth-child(1){flex-basis:50%}.recipe-list-item .recipe-list-buttons{display:flex;flex-basis:fit-content;gap:.25rem;align-items:center}.recipe-list-item:last-child>.separator{display:none}.recipe-title{display:flex;flex-direction:row;flex-wrap:wrap;align-items:center;gap:2rem;margin-block:2rem}.recipe-title>h2{flex-grow:1;flex-basis:0;min-width:60%}.recipe-title>span{display:flex;flex-direction:row;gap:.5rem;flex-wrap:wrap}.recipe-body{margin-inline:2rem;display:flex;flex-direction:column;align-items:start;gap:1rem}.recipe-body>h3{margin-top:.5rem}.recipe-body>a{margin-top:1rem}:is(.view-ol,.view-ul)>li{margin-bottom:.5rem}.view-ol>li{list-style-type:decimal;margin-left:1.9rem}.view-ol>li:before{content:"";margin-left:.6rem}.view-ul>li{list-style-type:circle;margin-left:2rem}.view-ul>li:before{content:"";margin-left:.5rem}.recipe-form{display:flex;flex-direction:column;gap:2rem}.recipe-form.section{gap:1rem}.recipe-form-item{width:100%;display:flex;flex-direction:row;align-items:center;gap:1rem}.recipe-form-item>input{min-height:2rem;width:100%}.recipe-form-item>textarea{min-height:4rem;width:100%}.validated-input{width:100%;display:flex;flex-direction:column;align-items:start;gap:0}.validated-input>input{min-height:2rem;width:100%}.validated-input.invalid>input{border-color:var(--color-red)}.validated-input.invalid>p{color:var(--color-red)}.recipe-form-toggle>input{margin-right:.5rem}.recipe-form-buttons{display:flex;gap:.75rem}.recipe-form-buttons>button{min-width:12em}.recipe-link{position:relative;display:flex;width:18rem;border-radius:1rem;background-color:var(--color-primary-tint);padding-block:2rem;justify-content:center;align-items:center;outline:1px solid transparent;transition:all .1s ease-out}.recipe-link .fillable{fill:var(--color-primary)}.recipe-link .label{position:absolute;left:0;right:0;bottom:0;display:flex;align-items:center;border-radius:0 0 1rem 1rem;background-color:#ffffff80;padding:.5rem;font-size:var(--font-size-btn)}.recipe-link:hover{outline-color:var(--color-primary)}.x{transform:rotate(45deg)}.left-arrow{transform:rotate(270deg)}.up-right-arrow{transform:rotate(45deg)}.triangle-down{transform:rotate(180deg)}.hidden{display:none}@media(max-width:1280px){.page{padding-inline:4rem}}@media(max-width:720px){:root{--font-size-h1: 3.25rem;--font-size-h2: 2.5rem;--font-size-h3: 1.75rem;--font-size-p: 1rem;--font-size-btn: 1rem}.page{padding-inline:1rem}.recipe-title{gap:1rem}.recipe-body{margin-inline:1rem}.recipe-form-buttons{justify-content:space-around;flex-wrap:wrap}.recipe-form-buttons>button{flex-basis:48%}}