@import url('https://fonts.googleapis.com/css2?family=Chelsea+Market&family=Comfortaa:wght@300..700&family=Concert+One&family=Darumadrop+One&family=DynaPuff:wght@400..700&family=Fascinate&family=Finger+Paint&family=Francois+One&family=Funnel+Sans:ital,wght@0,300..800;1,300..800&family=Inconsolata:wght@200..900&family=Joti+One&family=Lacquer&family=Lexend+Deca:wght@100..900&family=Montserrat+Alternates:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&family=Montserrat:ital,wght@0,100..900;1,100..900&family=National+Park:wght@200..800&family=Permanent+Marker&family=Pixelify+Sans:wght@400..700&family=Rock+Salt&family=Schoolbell&family=Sedgwick+Ave+Display&family=Varela+Round&display=swap');

:root{--bg:#eae0bc;
    --card:#dadbbb;
    --muted:#b4996a;
    --accent:#bc8c7d;
    --glass: #ffffff;
    --green-one: #6d8642;
    --green-two: #063427;
    --green-one-change: #4f563a;
    --green-two-change: #0f4f3d;
    --secondary-green: #7a8460;
    --card-bottom:#e0d4bd;
    --header: #e6e4d9;
    --nav-brand: #958e63;
    --heading: #000;
    --caption:#355135;
    --standard-text: #282424;
    --primary-hover: #478e39;
     --qa-hover: #f1f3e7;
     --secondary-navbar: #f4f7ed;
     --reverso: #503737;
     --shadow: #526432;

}
body.dark-mode{--bg:#eae0bc;
    --card:#55553d;
    --muted:#aa9d85;
    --accent:#826861;
    --glass: #ffffff;
    --green-one: #1a2302;
    --green-two: #031f17;
        --green-one-change: #414a22;
    --green-two-change: #0f4f3d;
    --secondary-green: #adbd8b;
    --card-bottom:#524a3a;
    --header: #535c2f;
    --nav-brand: #fff;
    --heading:#fff;
    --caption:#384436;
    --standard-text:#dee7dc;
    --primary-hover: #586d8b;
    --qa-hover: #1f210f;
      --secondary-navbar: #a6a791;
       --reverso: #fff;
       --shadow: #5b6a3b;
}



.caption {
   margin-top:-20px;
   padding:7px;
   color:var(--bg);
    background-color:var(--caption)!important
}

.subheading-heading {
    opacity:0.75
}

.welcome-message {
    color:var(--secondary-navbar)
}
    *{
        box-sizing:border-box
    }

@keyframes fadein {
  0% {opacity:0;}
  100% {opacity: 1}
}

@keyframes stretchout {
  0% {transform:scale(0.5);opacity:0;}
  100% {transform:scale(1);opacity:1}
}


@keyframes headeranimation {
  0% {opacity:0;}
  100% {opacity:1}
}


.header-with-animation {
     animation-name: headeranimation;
    animation-iteration-count: 1;
    animation-duration: 2s;
}
.container {
    animation-name: stretchout;
    animation-iteration-count: 1;
    animation-duration: 2s;
}
/* The element to apply the animation to */

    html,body{
        margin:0;
        color:var(--standard-text);
        background:linear-gradient(180deg, var(--green-one) 0%, var(--green-two) 60%);
        background-size:cover;
        font-family:"comfortaa" !important;

    }
.nav-buttons {
    background-color:var(--muted) !important;
    color:var(--header);
    margin-left:10px;
    padding:7.5px;
    border-radius:20px;
    text-decoration:none;
    transition: all 0.3s ease;
    border: 1px solid #ffffff00
}

.nav-buttons:hover {
    background-color:var(--accent) !important;
    color:var(--reverso);
    border: 1px solid var(--reverso)
}
.qa {
    transition: all 0.3s ease;
}
.qa:hover {
    background-color:var(--qa-hover);
}

.btn-primary {
    box-shadow:4px 4px #002411;
    transition: all 0.3s ease;
}
    .btn-primary:hover {
        background-color:var(--primary-hover);
        transform:translateX(3px) translateY(3px);
         box-shadow:2px 2px var(--shadow);
    }

    .wrap{
        max-width:1100px;
        margin:28px auto;
        padding:20px}

    header{
        display:flex;gap:16px;
        align-items:center;
        margin-bottom:18px;
        color:#fff;
    }

    input {
        color:var(--standard-text);
        background-color:#ffffff6a !important
    }

    header {
        background-color:var(--header);
        
        
    }

    nav {
        background-image:url(/assets/logo-translucent.png );
        background-position:left;
        background-size:500px;
        background-repeat: no-repeat;
        padding:20px;
        padding-top:10px;
    }

    .navbar-buttons {
        background-color:var(--secondary-navbar);
        margin-bottom:20px;
        padding:3px;
    }

    .navbar-buttons .btn {
        padding:2px;
        padding-left:7.5px;
        padding-right:7.5px;

    }
    h1{margin:0;
        font-size:20px}

    p.lead{margin:0;
        color:var(--muted);
        font-size:13px}

    .grid{display:grid;
        grid-template-columns:380px 1fr;gap:18px
    }

    .card{
        background:linear-gradient(180deg,var(--card), var(--card-bottom));
        border-radius:30px !important;
        padding:40px;
        box-shadow:0 6px 24px rgba(2,6,23,0.6);
        margin-bottom:20px;
    }

    label{
        display:block;
        font-size:12px;
        color:var(--muted);
        margin-bottom:6px
    }

    input,select,textarea{
        width:100%;
        padding:10px;
        border-radius:8px;
        border:1px solid rgba(255,255,255,0.04);
        background:transparent;
        color:inherit;
        font-size:14px
    }

    .row{
        display:flex;
        gap:8px
    }

    .small{
        width:120px
    }

    button{
        background:var(--accent);
        border:none;
        color:#072028;
        padding:10px 12px;
        border-radius:8px;
        font-weight:600;
        cursor:pointer
    }

    .btn-ghost{
        background:transparent;
        border:1px solid rgba(255,255,255,0.04);
        color:var(--muted)
    }

    .list{
        margin-top:10px;
        max-height:420px;
        overflow:auto
    }
    
    .item{
        display:flex;
        justify-content:space-between;
        padding:8px;
        border-radius:8px;
        margin-bottom:8px;
        background:var(--glass);
        align-items:center
    }

 .card-recipe{
    transition: all 0.3s ease-in-out;
}   
#fav-grid .card-recipe {
  width: 100%;
}

.cr-pantry {
     width: 100%;
}

#cr-ingredients label {
  background: #f5f5f5;
  padding: 6px 10px;
  border-radius: 8px;
  display: inline-block;
  cursor: pointer;
}


#cr-ingredients input {
  margin-right: 4px;
}

#fav-grid .card-recipe .fave-recipe-image{
  height:50px
}
.card-recipe:hover {
    transform: translateY(-7px);
    filter:drop-shadow(0px 2px 6px var(--shadow))
}
    .muted{
        color:var(--muted);
        font-size:13px
    }

    .recipes{display:grid;
        grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
        gap:10px
    }

    .recipe{padding:10px;
        border-radius:8px;
        background:linear-gradient(180deg,rgba(255,255,255,0.02), rgba(255,255,255,0.01));
    }
    .highlight{
        color:var(--accent);
        font-weight:700
    }

    footer{margin-top:16px;
        color:var(--muted);
        font-size:13px
    }

    /* responsive */
    @media (max-width:880px){
        .grid{grid-template-columns:1fr}.small{width:100px}
    }


    .nav-brand {
        color:var(--nav-brand) !important;
        font-weight:900;
        font-size:35px;
        text-decoration:none;
        padding-bottom:50px !important;
    
    }

    .link {
        background-color:var(--green-one);
        color:var(--bg);
        padding:5px;
        padding-right:7px;
        padding-left:7px;
        text-decoration:none;
        border-radius:20px;
        transition: all 0.3s ease;
    }
    
    .link:hover {
        background-color:var(--green-one-change);
        color:var(--bg);
        padding:5px;
         padding-right:7px;
        padding-left:7px;
        text-decoration:none;
        border-radius:20px;
        font-weight:bold;
        transform:scale(2)
    }

    .buttons-on-navbar{
        position:absolute;
        top:10px;
        right:10px;
    }

    .themetoggle {
        margin-left:10px;
        padding:7.5px;
    }

    .subheading {
        font-size:15px;
        
        color:var(--secondary-green);
        margin-top:-30px !important;
    }

    .chip {
        background-color: var(--accent);
    }

    .navbar-info {
        margin-left:-30px
    }

    /* width */
::-webkit-scrollbar {
  width: 10px;
}

/* Track */
::-webkit-scrollbar-track {
  background: var(--caption);
}

/* Handle */
::-webkit-scrollbar-thumb {
  background: var(--primary-hover);
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background: var(--primary-hover);
}