:root{--font-heading:"Fraunces", Georgia, serif;--font-body:"Josefin Sans", Arial, sans-serif}body{font-family:var(--font-body);color:#302b27;background-color:#f5efe3;margin:0}h1,h2,h3,h4,h5,h6{font-family:var(--font-heading)}button,input,textarea,select{font-family:inherit}*{box-sizing:border-box}.body{--sidebar-width:clamp(150px, 16vw, 210px);flex-direction:column;height:100vh;display:flex;overflow:hidden}.page-layout{flex-direction:row;flex:1;align-items:stretch;min-height:0;display:flex}.side-nav{flex-direction:column;flex:0 0 var(--sidebar-width);width:var(--sidebar-width);background-color:#eee6d8;align-items:stretch;gap:20px;padding:clamp(10px,1.5vw,18px);display:flex;overflow-y:auto}.main-feed-container{flex:1;min-width:0;padding:0 30px;overflow-y:auto}.feed-header{flex-direction:column;display:flex}.feed-header h1{margin:.25rem 0;font-size:100px}.feed-header h2{margin-bottom:25px}.profile-picture{background-color:#ffebcd;border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;width:45px;height:45px;display:flex}#featured-recipe-text{color:#000}.feed-divider{border:none;border-top:1px solid #000;grid-column:1/-1;width:100%;margin:25px 0}.content{grid-template-columns:1fr 1fr 1fr;gap:30px;display:grid}#featured-post{text-align:center;border:2px solid #c9770c;border-radius:12px;grid-column:1/-1;max-width:700px;margin:0 auto;overflow:hidden}#featured-post img{aspect-ratio:4/3;object-fit:cover;width:100%;display:block}#description{margin:15px;font-size:19px;font-weight:700}.post-grid{text-align:center;grid-column:1/-1;grid-template-columns:1fr 1fr;gap:15px;padding:20px;display:grid}.recipeInfo{background-color:#fff;padding:20px;display:block}.recipeInfo h3{margin:10px;font-size:30px;font-weight:700}.recipeInfo p{color:gray;margin:15px;font-size:17px;font-weight:400}.post{text-align:center;background-color:#fff;border:2px solid #000;border-radius:12px;overflow:hidden}.post img{aspect-ratio:16/9;object-fit:cover;width:100%;display:block}.country-filter{flex-direction:row;justify-content:flex-start;align-items:center;gap:10px;width:100%;display:flex}footer{text-align:center;background-color:#f0b05c;border:2px solid #c9770c}.post-container{color:#302b27;width:100%;max-width:400px;font-family:var(--font-body);background-color:#fffcf6;border:2px solid #c9770c;border-radius:16px;flex-direction:column;transition:transform .2s,box-shadow .2s;display:flex;overflow:hidden;box-shadow:0 4px 14px #302b2714}.post-container img{aspect-ratio:4/3;object-fit:cover;width:100%;display:block}.post-data{background-color:#fffcf6;flex-direction:row;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;display:flex}.post-data p{color:#756c62;margin:0;font-size:14px;font-weight:500}#username{font-size:17px}.likes{align-items:center;gap:8px;display:flex}.likes p{color:#302b27;margin:0;font-weight:600}@keyframes pop{0%{transform:scale(1)}50%{transform:scale(1.3)}to{transform:scale(1)}}.nav{background-color:#fffcf6;justify-content:center;align-items:center;padding:12px;display:flex}.nav div{background-color:#f0b05c;border:2px solid #c9770c}.nav ul{align-items:center;gap:16px;margin:0;list-style-type:none;display:flex}.nav button{background-color:#f0b05c;border:2px solid #c9770c;border-radius:24px;width:45px;height:45px;padding:0 4px;font-size:16px}.nav ul button{background-color:#f0b05c;border:2px solid #c9770c;border-radius:16px;width:86px;height:40px;margin:0 12px;padding:12px;font-size:16px}.top-bar{background-color:#fffcf6;justify-content:center;align-items:center;width:45%;margin:auto;padding:8px 16px;display:flex}.search-container{background-color:#fff;border:2px solid #c9770c;border-radius:16px;align-items:center;gap:8px;width:100%;max-width:480px;padding:8px 14px;transition:box-shadow .15s;display:flex}.search-container:focus-within{box-shadow:0 0 0 3px #f0b05c80}.search-icon{color:#c9770c;font-size:20px;line-height:1}.search-container input{background:0 0;border:none;outline:none;flex:1;min-width:0;font-size:16px}.search-container input::placeholder{color:#c9770c}.side-menu{box-sizing:border-box;scrollbar-width:thin;scrollbar-color:#d8cdbd transparent;color:#39352f;background-color:#fffcf6;flex-direction:column;gap:18px;width:285px;min-width:285px;padding:24px 18px;display:flex;overflow-y:auto}.side-menu-header{padding:4px 6px 8px}.side-menu-eyebrow{letter-spacing:2px;color:#a28b6b;margin-bottom:9px;font-size:10px;font-weight:800;display:block}.side-menu-header h2{letter-spacing:-.8px;color:#39352f;margin:0 0 8px;font-size:25px;font-weight:750}.side-menu-header p{color:#8c8378;margin:0;font-size:13px;line-height:1.6}.side-menu hr{border:none;border-top:1px solid #eae3d8;width:100%;margin:0}.side-menu-section{flex-direction:column;gap:12px;display:flex}.side-menu-section-heading{justify-content:space-between;align-items:center;padding:0 6px;display:flex}.side-menu-section-heading h3{color:#39352f;margin:0;font-size:15px;font-weight:750}.side-menu-section-heading>span{letter-spacing:1.2px;color:#b19b7d;font-size:9px;font-weight:800}.side-menu-list{flex-direction:column;gap:4px;margin:0;padding:0;list-style:none;display:flex}.side-menu-list li{width:100%}.side-menu-button{color:#635b51;text-align:left;cursor:pointer;background-color:#0000;border:none;border-radius:10px;align-items:center;width:100%;padding:10px 12px;font-size:14px;font-weight:550;transition:background-color .2s,color .2s,transform .2s;display:flex}.side-menu-button:hover{color:#39352f;background-color:#ebe3d6;transform:translate(3px)}.side-menu-button.active{color:#765b39;background-color:#e9dfcf;font-weight:750}.side-menu-icon{align-items:center;width:29px;font-size:17px;display:flex}.side-menu-arrow{color:#b5a58f;opacity:0;margin-left:auto;font-size:20px;transition:opacity .2s}.side-menu-button:hover .side-menu-arrow,.side-menu-button.active .side-menu-arrow{opacity:1}.side-menu-tags{flex-wrap:wrap;gap:7px;padding:0 5px;display:flex}.side-menu-tags button{color:#83735e;cursor:pointer;background-color:#f8f3ea;border:1px solid #e7ddcf;border-radius:20px;padding:7px 10px;font-size:11px;font-weight:600;transition:all .2s}.side-menu-tags button:hover{color:#5d4930;background-color:#e9dfcf;border-color:#d8c6ad}.side-menu-featured{background-color:#f3ede2;border:1px solid #e8dece;border-radius:14px;padding:16px}.featured-label{letter-spacing:1.5px;color:#a28b6b;font-size:9px;font-weight:800}.featured-dish-icon{background-color:#e9dfcf;border-radius:12px;justify-content:center;align-items:center;width:48px;height:48px;margin:12px 0 8px;font-size:27px;display:flex}.side-menu-featured h3{color:#39352f;margin:0 0 7px;font-size:18px}.side-menu-featured p{color:#81776a;margin:0 0 13px;font-size:12px;line-height:1.6}.side-menu-featured button{color:#97754c;cursor:pointer;background:0 0;border:none;padding:0;font-size:12px;font-weight:750;transition:color .2s}.side-menu-featured button:hover{color:#604322}.side-menu-community{text-align:center;background-color:#f0b05c;border:2px solid #c9770c;border-radius:14px;padding:17px}.community-icon{margin-bottom:8px;font-size:27px}.side-menu-community h3{color:#443b30;margin:0 0 7px;font-size:16px}.side-menu-community p{color:#26221c;margin:0 0 14px;font-size:12px;line-height:1.6}.side-menu-community button{cursor:pointer;background-color:#f0b05c;border:none;border-radius:9px;width:100%;padding:11px;font-size:12px;font-weight:750;transition:background-color .2s}.side-menu-footer{text-align:center;padding:8px 0 2px}.side-menu-footer span{letter-spacing:1.3px;color:#b4a795;font-size:9px;font-weight:750}@media (width<=768px){.side-menu{width:100%;min-width:0;max-height:80vh}}.recipe-container{width:96%;max-width:1200px;margin:50px auto}.informationLine{background-color:#fffcf6;border:1px solid #f5f5f5;border-radius:12px;grid-template-columns:1fr 1fr;align-items:center;margin-top:15px;padding:15px 20px;display:grid}#userNameID{color:#302b27;justify-self:start;font-size:18px}.likes{cursor:pointer;box-shadow:none;background:0 0;border:none;justify-self:end;gap:10px;margin:20px;font-size:20px}.back-button{color:#302b27;cursor:pointer;background:0 0;border:none;margin-bottom:15px;padding:8px 0;font-size:16px;transition:color .2s}.back-button:hover{color:#c65a3a}.save-button{cursor:pointer;box-shadow:none;z-index:2;border:none;border-radius:12px;justify-self:end;align-items:end;margin:20px;font-size:50px;display:flex;position:absolute}.postImage{text-align:center;background-color:ivory;border:2px solid beige;border-radius:12px;overflow:hidden}.postImage img{aspect-ratio:16/9;object-fit:cover;background-color:ivory;width:100%;display:block}.descriptionOfPost{color:#302b27;background-color:#fffcf6;border:1px solid #e5d9c9;border-radius:16px;margin-top:20px;padding:32px}.descriptionOfPost h1{color:#302b27;margin:0 0 15px;font-size:35px}.descriptionOfPost p{color:#302b27;margin:0;font-size:17px;line-height:1.6}.recipeDetails{border-top:1px solid #e5d9c9;margin-top:25px;padding-top:20px}.recipeDetails h2{color:#302b27;margin:0 0 15px;font-size:24px}.detailsLayout{grid-template-columns:repeat(2,1fr);gap:15px;margin-top:15px;margin-bottom:20px;display:grid}.detailLayoutItem{background-color:#f5efe3;border:1px solid #e5d9c9;border-radius:12px;padding:15px}.detailLayoutItem span{color:#756c62;margin-bottom:6px;font-size:13px;display:block}.detailLayoutItem strong{color:#302b27;font-size:18px}.instructions li{margin-top:30px}.heart-btn{cursor:pointer;-webkit-user-select:none;user-select:none;background-color:#0000;border-radius:50%;justify-content:center;align-items:center;width:40px;height:40px;transition:background-color .2s,transform .1s;display:inline-flex;position:relative}.heart-btn input{opacity:0;width:1px;height:1px;position:absolute}.heart-icon{fill:#0000;stroke:#c65a3a;stroke-width:2px;width:26px;height:26px;transition:fill .3s,stroke .3s,transform .3s}.heart-btn input:checked+.heart-icon{fill:#c65a3a;stroke:#c65a3a;animation:.4s ease-in-out pop}.heart-btn:hover{background-color:#c65a3a1a}.heart-btn input:focus-visible+.heart-icon{outline-offset:4px;border-radius:50%;outline:2px solid #c65a3a}.language-select{background:#fff;border:1px solid #ddd;border-radius:8px;padding:6px 10px;font-size:14px;position:absolute;top:12px;right:12px}
