@import url('https://fonts.googleapis.com/css2?family=Monoton&family=Rubik+Bubbles&family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

@keyframes FadeIn {
          from {
                    opacity: 0;
          }

          to {
                    opacity: 1;
          }

}

@keyframes GetIn {
          from {
                    transform: translateX(700px);
          }

          to {
                    transform: translateX(0px);
          }

}


[data-theme="dark"] {
          --bg: #141414;
          --text: #ffff;
          --gray: #a5a5a5;
          --orange: #fc731e;
          --orangeDark: #ff6200;

}

[data-theme="light"] {
          --bg: #e3e3e3;
          --gray: #626262;
          --text: #000000;
          --orange: #f77625;
          --orangeDark: #ff6200;
}

* {
          margin: 0px;
          padding: 0px;
}

body {
          background: var(--bg);
          color: var(--text);
          animation: FadeIn 1s;
          overflow: hidden;
}

header {
          width: 100dvw;
          position: fixed;
          display: flex;
          align-items: center;
          justify-content: center;

}

header nav {
          width: 90dvw;
          padding: 10px;
          box-sizing: border-box;
          display: flex;
          align-items: center;
          justify-content: space-between;
}

#logo {
          width: 5vw;
}

header ul {
          list-style: none;
          display: flex;

}

header ul a {
          text-transform: uppercase;
          text-decoration: none;
          color: var(--text);
          font-family: "Rubik";
          padding: 0px 1.2em;
          transition: 200ms;
}

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

#themeBtn {
          width: 40px;
          height: 40px;
          background: none;
          border: none;
          display: flex;
          align-items: center;
          justify-content: center;
}

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

main {
          height: 90dvh;
          padding-left: 150px;
          padding-top: 120px;
          box-sizing: border-box;
}

h1 {
          font-size: min(9vw, 100px);
          text-transform: uppercase;
          font-family: "Monoton";
          filter: drop-shadow(2px 2px 300px var(--text));
}

#burger {
          position: absolute;
          right: 0px;
          top: 30px;
          z-index: -9;
          width: 38vw;
          filter: drop-shadow(2px 2px 300px var(--text));
          animation: GetIn 2s;
}

#order_button_container {
          margin-top: 30px;
          width: 34%;
          display: flex;
          align-items: center;
          justify-content: space-between;

}

.INBtn {
          width: 220px;
          height: 115px;
          border-radius: 15px;
          border: solid var(--orange) 2px;
          background: none;
          color: var(--text);
          font-size: 1.5em;
          filter: drop-shadow(2px 2px 20px var(--gray));
          text-transform: uppercase;
          font-family: "Rubik Bubbles";
          transition: 200ms;
}

.INBtn:hover {
          background: linear-gradient(135deg, var(--orange), var(--orangeDark));
          filter: drop-shadow(2px 2px 10px var(--orange));
          transition: 200ms;
}

#ordermenu_container {
          margin-top: 70px;
          width: fit-content;
          display: flex;
          gap: 40px;
}

.ordermenu_child {
          filter: drop-shadow(2px 2px 100px var(--gray));
          display: flex;
          align-items: center;
          justify-content: center;
          border: 2px solid var(--gray);
          border-radius: 15px;
}

.ordermenu_img {
          width: 9vw;
          transition: 200ms;
}

.ordermenu_child:hover {
          border: 2px solid var(--orange);
          transition: 200ms;
}

.ordermenu_child:hover .ordermenu_img {
          transform: translateY(-40px);
          transition: 200ms;
          scale: 1.1;
}

@media screen and (max-width: 768px) {
          main {
                    padding: 0px;
          }

          header {
                    position: relative;
          }

          #logo {
                    width: 50px;
          }

          header nav {
                    padding: 0px;
                    width: 95dvw;
          }

          header ul a {
                    padding: 10px;
          }

          h1 {
                    text-align: center;
          }

          #burger {
                    position: relative;
                    width: 100dvw;
                    top: -70px;

          }

          #order_button_container {
                    margin-top: 0px;
                    width: 100%;
                    transform: translateY(-150px);
                    justify-content: space-evenly;

          }

          .INBtn {
                    width: 40dvw;
                    height: 10dvh;
          }

          #ordermenu_container {
                    margin-top: 0px;
                    width: fit-content;
                    display: flex;
                    gap: 10px;
                    transform: translateY(-100px);
          }

          .ordermenu_img {
                    width: 22.2vw;
                    transition: 200ms;
          }
}