*,:before,:after{margin:0;padding:0;box-sizing:border-box}:root{--dark: #0B0C08;--light: #EDFD5D;--darkgrey: darkgrey;font-synthesis:none;text-rendering:optimizeLegibility;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}html,body{height:100vh}body{font-family:Arsenal,sans-serif;background-color:var(--dark)}.home{position:absolute;width:80vw;top:50%;left:50%;transform:translate(-50%,-50%);text-transform:uppercase;text-align:center;color:var(--light)}.home h1{font-size:9vw;font-weight:800}.home h2{font-size:7vw;font-weight:200}@media (max-width: 400px){.home h1{font-size:16vw;font-weight:800}.home h2{font-size:9vw;font-weight:200}}.about{position:absolute;width:80vw;top:50%;left:50%;transform:translate(-50%,-50%);text-transform:uppercase;text-align:center;color:var(--light)}.about h1{font-size:4vw;font-weight:800}.about p{font-size:2vw;font-weight:200}@media (max-width: 600px){.about h1{font-size:7vw;font-weight:800}.about p{font-size:4vw;font-weight:200}}.project-cardcontainer{width:80vw;display:flex;flex-direction:row;justify-content:center;flex-wrap:wrap;gap:40px 40px;padding-top:100px;margin:0 auto}.project-cardcontainer .cardlink,.project-cardcontainer .cardlink a{text-decoration:none;color:inherit;font-size:55px;font-weight:700}.project-cardcontainer .card{width:650px;height:350px;border-radius:14px;box-shadow:#000 0 5px 10px,#000 0 15px 14px;transition:transform .1s ease;transform-style:preserve-3d;display:flex;justify-content:center;flex-direction:column;text-align:center}.project-cardcontainer .cardcontent{position:relative;transition:transform .1s ease;transform-style:preserve-3d;pointer-events:none;z-index:1}.cardcontent h1{font-size:90%;color:var(--light)}.cardcontent p{font-size:60%;color:var(--light)}.project-cardcontainer .cardbg{position:absolute;z-index:0;object-fit:cover;width:100%;height:100%;transition:transform .2s ease;border-radius:14px;filter:blur(9px)}@media (max-width: 1800px){.project-cardcontainer{margin-top:100px;align-content:flex-start;flex-wrap:wrap}.project-cardcontainer .card{width:650px;height:350px}}@media (max-width: 1350px){.project-cardcontainer{min-width:620px;align-content:flex-start;margin-top:100px}.project-cardcontainer .card{width:650px;height:350px}}@media (max-width: 650px){.project-cardcontainer{min-width:300px;margin:0 auto;padding-top:40px}.project-cardcontainer .card{width:80vw;height:15vh}.project-cardcontainer h1{font-size:80%}.project-cardcontainer p{font-size:50%}}#RecipeApp{display:flex;flex-direction:column;height:100vh;overflow-x:hidden;scrollbar-width:thin;scrollbar-color:white}#RecipeApp::-webkit-scrollbar{width:8px}#RecipeApp::-webkit-scrollbar-track{background:transparent}#RecipeApp::-webkit-scrollbar-thumb{background-color:#0000004d;border-radius:4px}.recipeappnavbar{display:flex;justify-content:space-between;align-items:center;height:60px;width:100%;border-bottom:2px solid black;background-color:#fff}.recipeappnavbar .name{color:orange;font-size:clamp(1rem,3rem,4rem);text-align:start;height:100%;width:80px}.recipeappnavbar .inputfieldcontainer{width:calc(100vw - 60px);height:100%;display:flex;justify-content:center;align-items:center;margin:10px;padding:0 10px}.recipeappnavbar .searchformcontainer{position:relative;width:70%}.recipeappnavbar .listcontainer{width:30%;height:100%;display:flex;align-items:center;justify-content:space-evenly}.recipeappnavbar .loop{width:100%;padding:10px 40px 10px 10px;font-size:16px;border-radius:34px}.recipeappnavbar .inputbutton{position:absolute;right:15px;top:50%;transform:translateY(-50%);height:35px;width:35px;cursor:pointer;border-radius:30px}.recipeappnavbar ul{display:flex;align-items:center;justify-content:space-around;list-style:none;height:100%;width:1000%}.recipeappnavbar .navbarlink{all:unset;text-decoration:none;width:100%;font-size:24px;padding:5px;color:#000;border:none;cursor:pointer;background:none;display:flex;justify-content:center}@media (max-width: 1250px){.recipeappnavbar .searchformcontainer{width:50%}.recipeappnavbar .listcontainer{width:50%;height:100%}.recipeappnavbar .navbarlink{font-size:22px}}@media (max-width: 780px){.recipeappnavbar .searchformcontainer{width:40%}.recipeappnavbar .listcontainer{width:80%;height:100%}.recipeappnavbar .navbarlink{font-size:19px}.recipeappnavbar .name{min-width:80px;font-size:3rem}}@media (max-width: 500px){.recipeappnavbar .inputbutton,.recipeappnavbar .name{display:none}.recipeappnavbar .inputfieldcontainer{width:1000%}.recipeappnavbar .searchformcontainer{width:40%}.recipeappnavbar .listcontainer{width:70%;height:100%}.recipeappnavbar ul{gap:clamp(.4rem,.7rem,1.5rem)}.recipeappnavbar .navbarlink{font-size:16px}.recipeappnavbar .name{min-width:80px;font-size:3rem}}.homepage{display:flex;flex-direction:column;background-color:#fff;height:calc(100svh - 60px)}.homepage .imgheader{height:20svh;min-height:250px;position:relative;display:flex;align-items:center;justify-content:center}.homepage h1{position:relative;z-index:1;color:#fff;font-size:10.5rem;text-align:center;text-shadow:3px 3px 6px rgba(0,0,0,.9)}.homepage .imgplacement{height:100%;width:100%;object-fit:cover;position:absolute;top:0;left:0;z-index:0}.homepage .ideacontainer{flex:1;overflow-y:auto;display:flex;flex-direction:column}.homepage .listofrecipe{height:50%;min-height:250px}.homepage .title{height:40px;font-size:38px;font-weight:700;text-align:start;color:#000;padding-left:10px}.homepage .scroll-btn{position:absolute;background-color:#000000b3;color:#fff;border:none;border-radius:25px;padding:.3rem .5rem .5rem;cursor:pointer;font-size:2rem;z-index:1}.homepage .scrollcontainer{height:calc(100% - 40px);min-height:200px;position:relative;display:flex;align-items:center;width:100vw;overflow:hidden}.homepage h2,.homepage ul,.homepage p{color:#000}.homepage .mealcardscontainer,.homepage .dessertcardscontainer{min-height:200px;height:100%;display:flex;overflow-x:hidden;scroll-behavior:smooth;gap:.5rem;padding:.5rem .5rem .2rem;width:100%;z-index:0}.homepage .scroll-btn.left{left:10px}.homepage .scroll-btn.right{right:10px}.homepage .mealscard,.homepage .dessertcard{flex:0 0 auto;aspect-ratio:1 / 1;height:100%;min-height:100px;border-radius:14px;display:flex;justify-content:center;overflow:hidden;position:relative;box-sizing:border-box}.homepage .mealscard .bgdimg,.homepage .dessertcard .bgdimg{object-fit:cover;width:100%;height:100%;display:block}.imgcardcontainer .heartIcon{width:24px;height:24px}.imgcardcontainer{position:relative;width:100%}.imgcardcontainer .homefavbtn{position:absolute;top:8px;right:8px;background:none;border:none;font-size:1.5rem;cursor:pointer}.homepage .mealscard h2,.homepage .dessertcard h2{position:absolute;bottom:0;left:0;right:0;margin:0;color:#fff;background:#00000080;font-size:clamp(15px,1.6svh,24px);text-align:center;z-index:2}@media (max-width: 1200px){.homepage h1{font-size:8.5rem}}@media (max-width: 1000px){.homepage h1{font-size:7.5rem}}@media (max-width: 780px){.homepage{height:auto!important;overflow:visible!important}.homepage .imgheader{height:auto!important;overflow:visible!important;position:relative}.homepage .imgplacement{position:absolute!important;top:0;left:0;width:100%;height:100%;object-fit:cover;z-index:0}.homepage h1{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);z-index:1;font-size:5.5rem;color:#fff;text-shadow:3px 3px 6px rgba(0,0,0,.9)}.homepage .ideacontainer{flex-direction:row;justify-content:space-between;width:100%;height:100%}.homepage .scrollcontainer{min-width:100px}.homepage .listofrecipe{height:100%;width:50%;min-width:100px;font-size:.5rem}.homepage .listofrecipe .title{font-size:clamp(.5rem,3rem,3.5rem);display:flex;justify-content:center;flex-direction:column;text-align:center;padding:10px}.homepage .scrollcontainer{width:100%;height:auto;display:flex;flex-direction:column;overflow-y:auto;overflow-x:hidden}.homepage .scroll-btn{display:none}.homepage .mealcardscontainer,.homepage .dessertcardscontainer{width:100%;height:100%;flex:1;flex-direction:column;overflow-x:hidden;overflow-y:auto}.homepage .mealcardscontainer .mealscard,.homepage .dessertcardscontainer .dessertcard{flex:1;min-height:100px;aspect-ratio:1 / 1;border-radius:8px;display:flex;justify-content:center;padding:0 10px}.homepage .dessertcardscontainer h2,.homepage .mealcardscontainer h2{font-size:1rem}}@media (max-width: 500px){.homepage .listofrecipe .title{font-size:clamp(.5rem,1.5rem,3.5rem)}}.recipelistcontainer{display:grid;grid-template-columns:1fr 5fr;height:calc(100svh - 60px);background:#fff}.recipelistcontainer .sidecolumn{display:flex;flex-direction:column;justify-content:flex-start;border-right:2px solid black;overflow-y:auto}.recipelistcontainer .filterlgd{padding:10px 0 5px 10px}.recipelistcontainer .filtertext{font-size:clamp(8px,1.5svh,12px);color:#000;text-transform:uppercase}.recipelistcontainer .cardcolumn{overflow-y:auto}.recipelistcontainer .custom-checkbox{display:flex;align-items:flex-start;gap:6px;cursor:pointer;border-bottom:2px solid black;font-size:clamp(8px,1.5svh,12px);padding:clamp(5px,1svh,15px) 0 clamp(3px,.5svh,10px) clamp(10px,1vw,15px)}.recipelistcontainer .custom-checkbox input{display:none}.recipelistcontainer .checkmark{width:clamp(16px,2svh,24px);height:clamp(16px,2svh,24px);border:2px solid #888;background:#fff;position:relative;border-radius:4px}.recipelistcontainer .custom-checkbox:hover .checkmark{border-color:#000}.recipelistcontainer .custom-checkbox input:checked+.checkmark{background:#000;border-color:#444}.recipelistcontainer .custom-checkbox input:checked+.checkmark:after{content:"";position:absolute;left:7px;top:2px;width:5px;height:10px;border:solid white;border-width:0 2px 2px 0;transform:rotate(45deg)}.recipelistcontainer .custom-checkbox input:focus+.checkmark{outline:2px solid #2196f3;outline-offset:2px}.recipelistcontainer .listoffood{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));min-width:0;gap:10px;padding:10px;max-height:90svh}.recipelistcontainer .foodcard{border:2px solid black;border-radius:10px;aspect-ratio:1 / 1;flex:0 0 auto;width:100%;transition:transform .1s ease;display:flex;justify-content:center;overflow:hidden;position:relative;box-sizing:border-box}.recipelistcontainer .foodcard .img{object-fit:cover;width:100%;height:100%;display:block}.recipelistcontainer .foodcard h2{position:absolute;bottom:0;left:0;right:0;margin:0;color:#fff;background:#00000080;font-size:clamp(15px,1.6svh,24px);text-align:center;z-index:2}.recipelistcontainer .newrecipecard{border-radius:10px;aspect-ratio:1 / 1;transition:transform .1s ease;display:flex;align-items:center;justify-content:center;border:2px solid white}.recipelistcontainer .newrecipecard img{aspect-ratio:1 / 1;object-fit:cover;width:80%;cursor:pointer}.addrecipecontainer,.currentrecipecontainer{display:flex;position:fixed;top:0;left:0;width:100vw;height:100svh;background:#0009;z-index:1000;justify-content:center;align-items:center}@media (max-width: 1450px){.recipelistcontainer .listoffood{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}}@media (max-width: 780px){.recipelistcontainer .sidecolumn{overflow-y:auto;width:25vw}.recipelistcontainer .custom-checkbox{font-size:clamp(12px,1.5svh,9px);padding:clamp(5px,1svh,15px) 0 clamp(3px,.5svh,10px) clamp(5px,1vw,7px)}.recipelistcontainer{grid-template-rows:auto auto}.recipelistcontainer .listoffood{grid-template-columns:repeat(auto-fit,minmax(90px,1fr))}}.currentrecipe{width:60vw;min-width:600px;height:60svh;min-height:700px;border:3px solid black;background:#fff;border-radius:14px;padding:.8rem;display:flex;justify-content:space-between;align-items:center;flex-direction:column;background-color:var(--darkgrey)}.currentrecipecontainer h3{color:#000;height:10%;width:100%;text-transform:uppercase;font-size:clamp(1.2rem,2.5vw,2rem);font-weight:700;padding:1rem;display:flex;justify-content:center;align-items:center;text-align:center;word-wrap:break-word;overflow-wrap:break-word;white-space:normal;overflow:hidden}.currentrecipe .top{display:flex;justify-content:center;flex-direction:row;align-items:center;width:100%;height:92%;padding:0}.currentrecipe .bottom{width:100%;height:8%;display:flex;justify-content:space-around;flex-direction:row;align-items:center}.currentrecipe .leftside{display:flex;height:100%;justify-content:center;flex-direction:column;align-items:center;width:30%}.currentrecipe .rightside{display:flex;justify-content:center;flex-direction:column;align-items:center;text-align:center;width:70%;height:100%}.currentrecipecontainer .favoriteButton{position:relative;background:none;border:none;padding:0;cursor:pointer;z-index:1}.currentrecipecontainer .heartIcon{width:24px;height:24px;transition:transform .2s ease}.currentrecipecontainer .favoriteButton:hover .heartIcon{transform:scale(1.2)}.leftside .img-wrapper{position:relative;width:90%}.leftside .img-wrapper img{width:100%;border:2px solid black;border-radius:9px;z-index:0}.leftside .img-wrapper .favoriteButton{position:absolute;aspect-ratio:1 / 1;top:10px;right:10px;z-index:2;border-radius:50%}.recipe-ingredients{flex-grow:1;width:90%;display:flex;flex-direction:column;align-items:center;overflow-y:auto;border-radius:9px;border:6px solid black;background-color:#d3d3d3}.recipe-ingredients ul{width:100%;padding:0;margin:0;height:100%;display:flex;flex-direction:column;justify-content:center}.recipe-ingredients li{font-size:clamp(.8rem,1.3svh,2.2rem);list-style:none;text-align:left;word-wrap:break-word;display:flex;flex-direction:column;justify-content:center;flex:1;width:100%;padding:4px 0 4px 5px;border-bottom:2px solid black}.recipe-instruction{flex-grow:1;width:100%;margin-top:10px;display:flex;align-items:center;flex-direction:column;overflow-y:auto;border-radius:9px;border:6px solid black;background-color:#d3d3d3}.recipe-instruction .instructionlist{height:100%;width:100%;display:flex;flex-direction:column;justify-content:space-between}.recipe-instruction p{flex:1;width:100%;padding:15px;border-bottom:2px solid black;font-size:clamp(1rem,1.3svh,1.6rem)}.recipe-ingredients h4,.recipe-instruction h4{border-bottom:6px solid black;width:100%;text-align:center;color:#000;margin:0 0 .5rem;font-size:1.6rem;padding:1rem}.editbtn,.dltbtn{background-color:#8b0000;color:#fff;border:1px solid #ccc;padding:6px 12px;cursor:pointer;border-radius:6px;width:45%}@media (max-width: 780px){.currentrecipe{width:90vw;min-width:0;height:80svh;min-height:550px}.recipe-ingredients h4{width:100%;text-align:center;color:#000;margin:0 0 .5rem;font-size:.8rem;padding:.2rem}.recipe-ingredients li{font-size:clamp(.8rem,1.3svh,2.2rem)}}@media (max-width: 340px){.recipe-ingredients h4{font-size:.6rem}}.editrecipecontainer{display:flex;position:fixed;top:0;left:0;width:100vw;height:100svh;background:#0009;z-index:1000;justify-content:center;align-items:center;border:2px solid red}.editrecipecontainer .editrecipeform{width:60vw;height:60svh;min-width:200px;min-height:700px;border:3px solid black;background:#fff;border-radius:14px;padding:1rem;display:flex;justify-content:space-between;align-items:center;flex-direction:column;background-color:var(--darkgrey)}#editrecipetitle,#editingredients,#editinstructions{width:90%;border-radius:14px;padding:4px 4px 4px 7px;resize:none;overflow:auto;background-color:#d3d3d3}#editingredients,#editinstructions{height:30%;font-size:14px;margin-top:1rem}.editrecipeform button{background-color:#8b0000;color:#fff;border:1px solid #ccc;padding:6px 12px;cursor:pointer;border-radius:6px;width:45%}#editrecipetitle{height:35px;font-size:20px}.editrecipecontainer textarea:focus{outline:2px solid var(--dark);background-color:#f9f9f9}@media (max-width: 780px){.editrecipecontainer .editrecipeform{width:80vw;height:60svh}}.addrecipeform{width:60vw;min-width:700px;height:50svh;border:3px solid black;background:#fff;border-radius:12px;padding:.6rem;display:flex;justify-content:space-around;align-items:center;flex-direction:column;gap:10px}.recipelistcontainer .top-third-row{width:90%;height:10%;display:flex;justify-content:space-around;align-items:center;flex-direction:row;gap:15px}.recipelistcontainer .filenametext{font-size:.8rem;overflow:hidden;width:12svw}.recipelistcontainer .hidden{display:none}.recipelistcontainer .middle-third-row,.recipelistcontainer .bottom-third-row{width:90%;height:45%;display:flex;justify-content:flex-start;flex-direction:column;border:2px solid black}.recipelistcontainer .formtitle{border-bottom:2px solid black;background-color:#d3d3d3}.recipelistcontainer #addrecipetitle{width:70%;height:35px;font-size:20px;max-width:600px;padding:4px 4px 4px 7px;resize:none;overflow:auto;background-color:#d3d3d3}.recipelistcontainer .choicebtn{background-color:#f0f0f0;border:1px solid #ccc;padding:6px 12px;cursor:pointer}.recipelistcontainer .Uploadbtn{background-color:#f0f0f0;border:1px solid #ccc;padding:4x 12px;cursor:pointer}.recipelistcontainer .choicebtn.selected{background-color:#333;color:#fff;border-color:#333;transition:background-color .4s}.recipelistcontainer #addingredients,.recipelistcontainer #addinstructions{width:100%;height:100%;font-size:14px;resize:none;overflow:auto}.recipelistcontainer textarea:focus{outline:2px solid var(--dark);background-color:#f9f9f9}.recipelistcontainer .addrecipeform #submit{background-color:var(--darkgrey);padding:5px;margin:5px;border:none;border-radius:30px;width:60%;font-size:1.2rem}.recipelistcontainer .addrecipeform #submit:hover{cursor:pointer;transform:scale(1.01)}@media (max-width: 780px){.addrecipeform{width:80vw;height:70svh;min-width:0;padding:.4rem;gap:6px}.recipelistcontainer #addrecipetitle{width:70%;min-width:40%}.recipelistcontainer .top-third-row{width:98%;gap:10px;overflow:hidden}}.mainnavbar{display:flex;justify-content:space-between;align-items:center;height:100px;color:var(--light)}.mainnavbar-name{margin-left:25px;color:var(--darkgrey);font-size:44px}.mainnavbar-lead{gap:45px;display:flex;align-items:center;justify-content:space-evenly;list-style:none;height:100%;padding:9px;margin-right:55px}.mainnavbar-lead .navbarlink{display:inline-block;transition:transform .2s ease,border-bottom .1s ease;text-decoration:none;font-size:24px;color:var(--light)}.mainnavbar-lead .navbarlink:hover{border-bottom:2px solid var(--light);transform:translateY(4px) scale(1.02)}@media (max-width: 500px){.mainnavbar-lead{gap:4vw;padding:9px;margin:0 auto}.mainnavbar-lead .navbarlink{font-size:5vw}.mainnavbar-name{display:none}}@media (max-width: 400px){.mainnavbar-lead{gap:3vw;padding:9px;margin:0 auto}.mainnavbar-lead .navbarlink{font-size:7vw}.mainnavbar-name{display:none}}