@import url('https://fonts.googleapis.com/css2?family=Monoton&family=Rubik+Bubbles&display=swap');

[data-theme="dark"] {
          --bg: #141414;
          --Container: black;
          --subContainer: #1a1a1a;

          --text: #e5e7eb;
          --orange: #f98322;
          --orangeDark: #ff6a00;
          --gray: #ffffff96;
          --lightShade: #121628;
          --darkShade: #04060a;

}

[data-theme="light"] {
          --bg: #e0e0e0;
          --Container: white;
          --subContainer: #c6c6c6;
          --text: black;
          --orange: #f98322;
          --orangeDark: #ff6a00;
          --gray: #b3b0b096;
          --lightShade: #f1f1f1;
          --darkShade: #cbcbcb;

}

body {
          background: var(--bg);

}

header {
          position: absolute;
          width: 100vw;
          z-index: 9999;
          padding: 0 0;
          top: 10px;
          left: 0;
          height: 7vh;


}

#logo {
          width: min(100px, 20vw);
}

header nav {
          width: 90vw;
          margin: 0 auto;
          overflow: hidden;
          display: flex;
          flex-wrap: wrap;
          justify-content: space-between;
          align-items: center;
}

header ul {
          display: flex;
          list-style: none;
          align-items: center;
          padding: 0px;
          
}

header ul a {
          font-family: "Poppi", sans-serif;
          transition: 1s;
          text-decoration: none;
          color: var(--text);
          text-transform: uppercase;
          padding: 0 1.5rem;
          font-weight: 300;
          font-size: min(2vw, 1em);
}

header ul a:hover {
          transition: 200ms;
          color: var(--orange);
}

header ul a img {
          width: 10px;
}

#themeBtn {
          background-color: var(--bg);
          border: none;
          border-radius: 10px;
          transition: 100ms;
          width: 40px;
          height: 40px;
          transition: 300ms;
          display: flex;
          align-items: center;
          justify-content: center;
}

#themeBtn img {
          width: 40px;
          height: 40px;
}

#themeBtn:hover {
          transition: 300ms;
          background-color: var(--orange);
}

main {
          width: 100%;
          height: 100dvh;

}


#grid_contaner {
          width: 100%;
          height: 100dvh;
          display: flex;
          flex-wrap: wrap;
          padding: 70px;
          box-sizing: border-box;
          gap: 30px;
}

.grid_child {
          border-radius: 15px;
          background: var(--Container);
          text-align: center;
          padding: 20px;
          transition: 300ms;

}

.grid_child:hover {
          transition: 300ms;
          transform: translateY(-10px);
          filter: drop-shadow(0px 0px 10px #f9832252);
}

.burgerImg {
          margin-bottom: 20px;
          filter: drop-shadow(0px 0px 50px #f983228c);
          width: 170px;
}

h1 {
          font-family: "Poppi", sans-serif;
          font-size: 20px;
          color: var(--text);
          margin-bottom: 10px;
          letter-spacing: 0px;
          font-weight: 900;
}

p {
          margin-bottom: 10px;
          color: var(--text);
          font-family: "Poppi", sans-serif;
          font: 12px;
          opacity: 0.6;
          font-weight: 600;
}

h3 {
          font-weight: 600;
          margin-bottom: 10px;
          font-family: "Poppi", sans-serif;
          color: var(--orange);
}

.Orderbtn {
          padding: 10px 5px;
          font-weight: 1000;
          color: var(--text);
          height: 11%;
          width: 41%;
          border-radius: 8px;
          background: linear-gradient(135deg, var(--orange), var(--orangeDark));
          border: none;
}

a {
          text-decoration: none;
}

@media screen and (max-width:767px) {
          #grid_contaner {
                    margin-top: 20px;
                    padding: 10px;
                    align-items: center;
                    justify-content: center;
                    gap: 10px;
                    overflow: auto;
          }

          .grid_child {
                    width: 90vw;
                    height: 40vh;
                    text-align: center;
                    padding: 20px;
                    display: flex;
                    align-items: center;
                    justify-content: center;
                    place-items: center;


          }

          .grid_child img {
                    width: 50vw;
          }

          button {
                    width: 20vw;
                    height: 4vh;
          }

          header ul a {
                    padding: 10px;
                    font-size: 15px;
          }

          header nav {
                    width: 95vw;
                    margin: 0 auto;
                    overflow: visible;
                    display: flex;
                    flex-wrap: wrap;
                    justify-content: space-evenly;
                    align-items: center;
          }
}