diff --git a/img/favicon.png b/img/favicon.png
deleted file mode 100644
index 5a0a7af..0000000
Binary files a/img/favicon.png and /dev/null differ
diff --git a/img/hi.md b/img/hi.md
deleted file mode 100644
index 8954bb9..0000000
--- a/img/hi.md
+++ /dev/null
@@ -1 +0,0 @@
-# hello
diff --git a/img/logo.png b/img/logo.png
index 308fc77..5a0a7af 100644
Binary files a/img/logo.png and b/img/logo.png differ
diff --git a/index.html b/index.html
index b11ea9e..9a6b134 100644
--- a/index.html
+++ b/index.html
@@ -5,8 +5,14 @@
     <meta http-equiv="X-UA-Compatible" content="IE=edge" />
     <meta name="viewport" content="width=device-width, initial-scale=1.0" />
     <title>Sarah Burguer</title>
-    <link rel="stylesheet" href="style.css" />
-    <link rel="shortcut icon" href="img/favicon.png" type="image/x-icon" />
+    <link rel="stylesheet" href="/styles/style.css" />
+    <link rel="shortcut icon" href="img/logo.png" type="image/x-icon" />
+    <link rel="preconnect" href="https://fonts.googleapis.com" />
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Agbalumo&family=Archivo+Narrow:wght@400;600&family=Inter:wght@300;400;500;600;700&display=swap"
+      rel="stylesheet"
+    />
     <script
       src="https://kit.fontawesome.com/a14430386d.js"
       crossorigin="anonymous"
@@ -14,101 +20,143 @@
   </head>
   <body>
     <header>
-      <div class="logo-container">
-        <img class="logo" src="img/logo.png" alt="" />
-        <h1>Sarah Burguer Artesanais</h1>
+      <div class="logo">
+        <img class="logo__img" src="img/logo.png" alt="" />
+        <h1 class="logo__title">Sarah Burguer Artesanais</h1>
+      </div>
+      <div class="icons">
+        <i class="fa-solid fa-location-dot"></i>
+        <p>Rua Duque de Caxias, 80</p>
       </div>
-      <ul class="icons">
-        <li>
-          <i class="fa-solid fa-location-dot"></i>
-          Rua Duque de Caixias, 80
-        </li>
-        <li>
-          <i class="fa-brands fa-whatsapp"></i>
-          (14) 90000-0000
-        </li>
-      </ul>
     </header>
     <main>
-      <h1 class="info">Todos os dias das 18h às 23h</h1>
-      <h2 id="situacao"></h2>
+      <h1 class="opening-hours">
+        Todos os dias das <span class="darker">18h às 23h</span>
+      </h1>
 
-      <div class="grid-container">
-        <div class="grid-children">
-          <h1 class="page-title">Simples</h1>
-          <div class="burguers">
-            <p class="burguer-nome">X-Burguer</p>
-            <p class="preco">R$10,00</p>
-            <p class="burguer-nome">X-Salada</p>
-            <p class="preco">R$13,00</p>
-            <p class="burguer-nome">X-Egg</p>
-            <p class="preco">R$14,00</p>
-            <p class="burguer-nome">X-Bacon</p>
-            <p class="preco">R$15,00</p>
-            <p class="burguer-nome">Frango</p>
-            <p class="preco">R$11,00</p>
-            <p class="burguer-nome">Picanha</p>
-            <p class="preco">R$20,00</p>
-          </div>
+      <div class="main-content">
+        <section class="menu">
+          <section class="menu__section">
+            <h1 class="menu__section-title">Simples</h1>
+            <div class="menu__items">
+              <div class="menu__item">
+                <p class="menu__item-name">X-Burguer</p>
+                <p class="menu__item-price">R$ 10,00</p>
+              </div>
+              <div class="menu__item">
+                <p class="menu__item-name">X-Salada</p>
+                <p class="menu__item-price">R$ 13,00</p>
+              </div>
+              <div class="menu__item">
+                <p class="menu__item-name">X-Egg</p>
+                <p class="menu__item-price">R$ 14,00</p>
+              </div>
+              <div class="menu__item">
+                <p class="menu__item-name">X-Bacon</p>
+                <p class="menu__item-price">R$ 15,00</p>
+              </div>
+              <div class="menu__item">
+                <p class="menu__item-name">Frango</p>
+                <p class="menu__item-price">R$ 11,00</p>
+              </div>
+              <div class="menu__item">
+                <p class="menu__item-name">Picanha</p>
+                <p class="menu__item-price">R$ 20,00</p>
+              </div>
+            </div>
+          </section>
 
-          <h1 class="page-title">Especiais</h1>
-          <div class="burguers">
-            <p class="burguer-nome">Vegano</p>
-            <p class="preco">R$12,00</p>
-            <p class="burguer-nome">Duplo Bacon</p>
-            <p class="preco">R$20,00</p>
-            <p class="burguer-nome">Duplo Salada</p>
-            <p class="preco">R$18,00</p>
-            <p class="burguer-nome">Duplo Picanha</p>
-            <p class="preco">R$30,00</p>
-          </div>
+          <section class="menu__section">
+            <h1 class="menu__section-title">Especiais</h1>
+            <div class="menu__items">
+              <div class="menu__item">
+                <p class="menu__item-name">Vegano</p>
+                <p class="menu__item-price">R$ 12,00</p>
+              </div>
+              <div class="menu__item">
+                <p class="menu__item-name">Duplo Bacon</p>
+                <p class="menu__item-price">R$ 20,00</p>
+              </div>
+              <div class="menu__item">
+                <p class="menu__item-name">Duplo Salada</p>
+                <p class="menu__item-price">R$ 18,00</p>
+              </div>
+              <div class="menu__item">
+                <p class="menu__item-name">Duplo Picanha</p>
+                <p class="menu__item-price">R$ 30,00</p>
+              </div>
+            </div>
+          </section>
 
-          <h1 class="page-title">Bebidas</h1>
-          <div class="bebidas">
-            <p class="bebidas-nome">Refrigerante 1L</p>
-            <p class="preco">R$6,00</p>
-            <p class="bebidas-nome">Refrigerante 2L</p>
-            <p class="preco">R$10,00</p>
-            <p class="bebidas-nome">Suco de Laranja Natural 500ml</p>
-            <p class="preco">R$7,00</p>
-            <p class="bebidas-nome">Água (com e sem gás)</p>
-            <p class="preco">R$4,00</p>
-          </div>
-        </div>
+          <section class="menu__section">
+            <h1 class="menu__section-title">Bebidas</h1>
+            <div class="menu__items">
+              <div class="menu__item">
+                <p class="menu__item-name">Refrigerante 1L</p>
+                <p class="menu__item-price">R$ 6,00</p>
+              </div>
+              <div class="menu__item">
+                <p class="menu__item-name">Refrigerante 2L</p>
+                <p class="menu__item-price">R$ 10,00</p>
+              </div>
+              <div class="menu__item">
+                <p class="menu__item-name">Suco de Laranja 500ml</p>
+                <p class="menu__item-price">R$ 7,00</p>
+              </div>
+              <div class="menu__item">
+                <p class="menu__item-name">Água (com e sem gás)</p>
+                <p class="menu__item-price">R$ 4,00</p>
+              </div>
+            </div>
+          </section>
+        </section>
 
-        <div class="grid-imgs">
+        <section class="burguer-images">
           <img
-            class="imagem"
+            class="burguer-img"
             src="https://www.sabornamesa.com.br/media/k2/items/cache/b9ad772005653afce4d4bd46c2efe842_XL.jpg"
             alt=""
           />
           <img
-            class="imagem"
+            class="burguer-img"
             src="https://assets.unileversolutions.com/recipes-v2/230446.jpg"
             alt=""
           />
           <img
-            class="imagem"
+            class="burguer-img"
             src="https://static.onecms.io/wp-content/uploads/sites/24/2020/01/22/gma_sl_1624-2000.jpg"
             alt=""
           />
-        </div>
-      </div>
-
-      <footer>
-        <section class="socials">
-          <a href="https://www.instagram.com/" target="_blank"
-            ><i class="fa-brands fa-instagram"></i
-          ></a>
-          <a href="https://www.facebook.com/" target="_blank"
-            ><i class="fa-brands fa-facebook"></i
-          ></a>
-          <a href="https://web.telegram.org/z/" target="_blank"
-            ><i class="fa-brands fa-telegram"></i
-          ></a>
+          <img
+            class="burguer-img"
+            src="https://www.lepingue.com.br/admin/uploads/images/galeria/duplo-bacon_ca3908e0d94d46afac3781d82ce01f0a__800x600__0x0.jpg"
+            alt=""
+          />
         </section>
-        <img class="logo footer-logo" src="img/logo.png" alt="" />
-      </footer>
+      </div>
     </main>
+
+    <footer>
+      <section class="socials">
+        <a href="https://www.instagram.com/" target="_blank"
+          ><i class="fa-brands fa-instagram"></i
+        ></a>
+        <a href="https://www.facebook.com/" target="_blank"
+          ><i class="fa-brands fa-facebook"></i
+        ></a>
+        <a href="https://web.telegram.org/z/" target="_blank"
+          ><i class="fa-brands fa-telegram"></i
+        ></a>
+        <a href="https://www.whatsapp.com/?lang=pt_br" target="_blank"
+          ><i class="fa-brands fa-whatsapp"></i
+        ></a>
+      </section>
+      <p>
+        Desenvolvido por
+        <a href="https://github.com/oliveirasarah" target="_blank"
+          >Sarah Oliveira</a
+        >
+      </p>
+    </footer>
   </body>
 </html>
diff --git a/style.css b/style.css
deleted file mode 100644
index 7bf8cc4..0000000
--- a/style.css
+++ /dev/null
@@ -1,177 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Kumbh+Sans&family=Montserrat+Alternates:wght@200;400&display=swap");
-* {
-  padding: 0;
-  margin: 0;
-  -webkit-box-sizing: border-box;
-          box-sizing: border-box;
-  font-family: "Kumbh Sans", sans-serif;
-}
-
-body {
-  background-color: #0a0908;
-  color: #fcfcfc;
-  width: 70%;
-  margin: 0 auto;
-}
-
-header {
-  color: #fcfcfc;
-  padding: 1.3em;
-  letter-spacing: 0.2em;
-  border-bottom: 3px #fcfcfc solid;
-  margin-bottom: 1em;
-}
-
-header h1 {
-  grid-area: h1;
-  -ms-flex-item-align: center;
-      -ms-grid-row-align: center;
-      align-self: center;
-  margin-top: 0.5rem;
-  margin-left: 1em;
-  font-family: "Montserrat Alternates", sans-serif;
-  text-align: center;
-  text-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
-  justify-items: center;
-  color: #fa8334;
-}
-
-.grid-container {
-  display: -ms-grid;
-  display: grid;
-  -ms-grid-columns: (1fr)[2];
-      grid-template-columns: repeat(2, 1fr);
-  padding: 4em;
-  justify-items: center;
-}
-
-.burguers,
-.bebidas {
-  display: -ms-grid;
-  display: grid;
-  -ms-grid-columns: (1fr)[2];
-      grid-template-columns: repeat(2, 1fr);
-  gap: 1em;
-  -webkit-box-pack: space-evenly;
-      -ms-flex-pack: space-evenly;
-          justify-content: space-evenly;
-}
-
-.burguer-nome,
-.preco,
-.bebidas-nome {
-  font-size: 1.2rem;
-}
-
-.imagem {
-  width: 400px;
-  justify-items: center;
-}
-
-.info {
-  color: #fa8334;
-  text-align: center;
-}
-
-#situacao {
-  text-align: center;
-}
-
-.page-title {
-  font-size: 2rem;
-  padding: 1em 1em 1em 0;
-  color: #fa8334;
-  letter-spacing: 0.1em;
-}
-
-.logo-container {
-  padding: 1em;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-}
-
-.logo {
-  width: 200px;
-  -ms-grid-column-align: end;
-      justify-self: end;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-}
-
-.icon {
-  width: 50px;
-  margin-top: 1rem;
-}
-
-li {
-  padding: 0.5em;
-  list-style-type: none;
-}
-
-a {
-  text-decoration: none;
-  padding: 0.8em 1em;
-  color: #fcfcfc;
-}
-
-a:hover {
-  color: #fa8334;
-}
-
-.entrega {
-  padding: 0.6em;
-}
-
-.fa-brands {
-  font-size: 2rem;
-}
-
-.fa-solid {
-  font-size: 1.3rem;
-}
-
-.fa-whatsapp {
-  color: #0dc143;
-  font-size: 1.3rem;
-}
-
-footer {
-  border-top: 3px #fcfcfc solid;
-  color: #fcfcfc;
-  display: -webkit-box;
-  display: -ms-flexbox;
-  display: flex;
-  -webkit-box-pack: justify;
-      -ms-flex-pack: justify;
-          justify-content: space-between;
-  -webkit-box-align: center;
-      -ms-flex-align: center;
-          align-items: center;
-  padding: 2em;
-}
-
-.footer-logo {
-  width: 100px;
-}
-
-@media only screen and (max-width: 1400px) {
-  body {
-    width: 100%;
-    margin: auto;
-  }
-}
-
-@media only screen and (max-width: 865px) {
-  .burguer-nome,
-  .preco,
-  .bebidas-nome {
-    font-size: 1rem;
-  }
-  .imagem {
-    width: 300px;
-    margin: 2em;
-  }
-}
-/*# sourceMappingURL=style.css.map */
\ No newline at end of file
diff --git a/style.css.map b/style.css.map
deleted file mode 100644
index 1bcd5d4..0000000
--- a/style.css.map
+++ /dev/null
@@ -1,9 +0,0 @@
-{
-    "version": 3,
-    "mappings": "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",
-    "sources": [
-        "style.scss"
-    ],
-    "names": [],
-    "file": "style.css"
-}
\ No newline at end of file
diff --git a/style.scss b/style.scss
deleted file mode 100644
index 8bf1f37..0000000
--- a/style.scss
+++ /dev/null
@@ -1,165 +0,0 @@
-@import url("https://fonts.googleapis.com/css2?family=Kumbh+Sans&family=Montserrat+Alternates:wght@200;400&display=swap");
-
-// Variables
-$black: #0a0908;
-$white: #fcfcfc;
-$orange: #fa8334;
-$montserrat: "Montserrat Alternates", sans-serif;
-$kumbh: "Kumbh Sans", sans-serif;
-
-* {
-  padding: 0;
-  margin: 0;
-  box-sizing: border-box;
-  font-family: $kumbh;
-}
-
-body {
-  background-color: $black;
-  color: $white;
-  width: 70%;
-  margin: 0 auto;
-}
-
-header {
-  color: $white;
-  padding: 1.3em;
-  letter-spacing: 0.2em;
-  border-bottom: 3px $white solid;
-  margin-bottom: 1em;
-
-  h1 {
-    grid-area: h1;
-    align-self: center;
-    margin-top: 0.5rem;
-    margin-left: 1em;
-    font-family: $montserrat;
-    text-align: center;
-    text-shadow: 5px 5px 15px rgba(0, 0, 0, 0.2);
-    justify-items: center;
-    color: $orange;
-  }
-}
-
-.grid-container {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  padding: 4em;
-  justify-items: center;
-}
-
-.burguers,
-.bebidas {
-  display: grid;
-  grid-template-columns: repeat(2, 1fr);
-  gap: 1em;
-  justify-content: space-evenly;
-}
-
-.burguer-nome,
-.preco,
-.bebidas-nome {
-  font-size: 1.2rem;
-}
-
-.imagem {
-  width: 400px;
-  justify-items: center;
-}
-
-.info {
-  color: $orange;
-  text-align: center;
-}
-
-#situacao {
-  text-align: center;
-}
-
-.page-title {
-  font-size: 2rem;
-  padding: 1em 1em 1em 0;
-  color: $orange;
-  letter-spacing: 0.1em;
-}
-
-.logo-container {
-  padding: 1em;
-  display: flex;
-}
-
-.logo {
-  width: 200px;
-  justify-self: end;
-  align-items: center;
-}
-
-.icon {
-  width: 50px;
-  margin-top: 1rem;
-}
-
-li {
-  padding: 0.5em;
-  list-style-type: none;
-}
-
-a {
-  text-decoration: none;
-  padding: 0.8em 1em;
-  color: $white;
-}
-a:hover {
-  color: $orange;
-}
-
-.entrega {
-  padding: 0.6em;
-}
-
-.fa-brands {
-  font-size: 2rem;
-}
-
-.fa-solid {
-  font-size: 1.3rem;
-}
-
-.fa-whatsapp {
-  color: #0dc143;
-  font-size: 1.3rem;
-}
-
-footer {
-  border-top: 3px $white solid;
-  color: $white;
-  display: flex;
-  justify-content: space-between;
-  align-items: center;
-  padding: 2em;
-}
-
-.footer-logo {
-  width: 100px;
-  // margin: 1em;
-}
-
-@media only screen and (max-width: 1400px) {
-  body {
-    width: 100%;
-    margin: auto;
-  }
-}
-
-@media only screen and (max-width: 865px) {
-  .burguer-nome,
-  .preco,
-  .bebidas-nome {
-    font-size: 1rem;
-  }
-
-  .imagem {
-    width: 300px;
-    margin: 2em;
-  }
-}
diff --git a/styles/style.css b/styles/style.css
new file mode 100644
index 0000000..79e84a1
--- /dev/null
+++ b/styles/style.css
@@ -0,0 +1,193 @@
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  font-family: "Inter", sans-serif;
+}
+
+body {
+  background-image: linear-gradient(to right bottom, #f7f7f7, #f5f5f5, #f2f2f2, #f0f0f0, #eeeeee);
+  color: #574141;
+}
+
+header {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  background-color: #ef6069;
+  color: #fcfcfc;
+  padding: 1.5rem;
+  border-bottom: 3px #fcfcfc solid;
+  margin-bottom: 2rem;
+}
+header .icons {
+  display: flex;
+  gap: 10px;
+  align-items: center;
+  list-style-type: none;
+  color: #fcfcfc;
+  font-weight: 500;
+}
+header .icons i {
+  font-size: 1.2rem;
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+}
+.logo__title {
+  font-size: 1.5rem;
+  font-weight: 500;
+  font-family: "Agbalumo", system-ui;
+  text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+  justify-items: center;
+  color: #fcfcfc;
+}
+.logo__img {
+  width: 60px;
+  height: 60px;
+}
+
+.opening-hours {
+  text-transform: uppercase;
+  font-family: "Archivo Narrow", sans-serif;
+  font-size: 1.8rem;
+  font-weight: 500;
+  color: #ef6069;
+  text-align: center;
+}
+
+.main-content {
+  display: grid;
+  grid-template-columns: 1fr;
+  justify-items: center;
+  gap: 2rem;
+  padding: 1rem;
+}
+
+.menu {
+  width: 100%;
+}
+.menu__section {
+  margin-bottom: 2rem;
+}
+.menu__section-title {
+  font-family: "Archivo Narrow", sans-serif;
+  font-size: 2rem;
+  padding: 1rem;
+  color: #fcfcfc;
+  background-color: #ef6069;
+  border-bottom: #a5111a 2px solid;
+  border-radius: 10px;
+  margin-bottom: 1rem;
+}
+.menu__items {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.menu__item {
+  display: flex;
+  justify-content: space-between;
+}
+.menu__item-name, .menu__item-price {
+  font-size: 1.2rem;
+}
+.menu__item-name {
+  font-weight: 500;
+}
+
+.burguer-images {
+  display: grid;
+  gap: 1rem;
+}
+
+.burguer-img {
+  border-radius: 10px;
+  max-width: 400px;
+  max-height: 400px;
+  width: 100%;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  justify-items: center;
+}
+
+a {
+  color: #fcfcfc;
+  transition: 0.3s ease;
+}
+a:hover {
+  color: #ddd;
+}
+
+.fa-brands {
+  font-size: 2rem;
+}
+
+.fa-solid {
+  font-size: 1.3rem;
+}
+
+footer {
+  background-color: #ef6069;
+  color: #fcfcfc;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: center;
+  padding: 1.5rem;
+}
+
+.socials {
+  display: flex;
+  gap: 1rem;
+}
+
+.darker {
+  color: #ed4953;
+  font-weight: 600;
+}
+
+::-webkit-scrollbar {
+  width: 7px;
+  background-color: hsl(0, 0%, 89%);
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: #ef6069;
+}
+
+@media screen and (min-width: 640px) {
+  .logo__title {
+    font-size: 1.8rem;
+  }
+  .main-content {
+    padding: 2rem;
+  }
+}
+@media screen and (min-width: 768px) {
+  footer {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+@media screen and (min-width: 1024px) {
+  header {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 3rem;
+  }
+  .main-content {
+    padding: 3rem;
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media screen and (min-width: 1280px) {
+  .burguer-images {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}/*# sourceMappingURL=style.css.map */
\ No newline at end of file
diff --git a/styles/style.css.map b/styles/style.css.map
new file mode 100644
index 0000000..7f3fe11
--- /dev/null
+++ b/styles/style.css.map
@@ -0,0 +1 @@
+{"version":3,"sources":["style.scss","style.css"],"names":[],"mappings":"AAOA;EACE,UAAA;EACA,SAAA;EACA,sBAAA;EACA,gCANU;ACAZ;;ADSA;EACE,+FAAA;EAQA,cApBK;ACOP;;ADgBA;EACE,aAAA;EACA,sBAAA;EACA,SAAA;EACA,yBA5BO;EA6BP,cA9BM;EA+BN,eAAA;EACA,gCAAA;EACA,mBAAA;ACbF;ADeE;EACE,aAAA;EACA,SAAA;EACA,mBAAA;EACA,qBAAA;EAEA,cAzCI;EA0CJ,gBAAA;ACdJ;ADgBI;EACE,iBAAA;ACdN;;ADmBA;EACE,aAAA;EACA,mBAAA;EACA,SAAA;AChBF;ADkBE;EACE,iBAAA;EACA,gBAAA;EACA,kCAvDS;EAwDT,4CAAA;EACA,qBAAA;EACA,cA7DI;AC6CR;ADmBE;EACE,WAAA;EACA,YAAA;ACjBJ;;ADqBA;EACE,yBAAA;EACA,yCAAA;EACA,iBAAA;EACA,gBAAA;EACA,cA1EO;EA2EP,kBAAA;AClBF;;ADqBA;EACE,aAAA;EACA,0BAAA;EACA,qBAAA;EACA,SAAA;EACA,aAAA;AClBF;;ADqBA;EACE,WAAA;AClBF;ADoBE;EACE,mBAAA;AClBJ;ADqBE;EACE,yCAAA;EACA,eAAA;EACA,aAAA;EACA,cAlGI;EAmGJ,yBAlGK;EAmGL,gCAAA;EACA,mBAAA;EACA,mBAAA;ACnBJ;ADsBE;EACE,aAAA;EACA,sBAAA;EACA,SAAA;ACpBJ;ADuBE;EACE,aAAA;EACA,8BAAA;ACrBJ;ADwBE;EAEE,iBAAA;ACvBJ;AD0BE;EACE,gBAAA;ACxBJ;;AD4BA;EACE,aAAA;EACA,SAAA;ACzBF;;AD4BA;EACE,mBAAA;EACA,gBAAA;EACA,iBAAA;EACA,WAAA;EACA,YAAA;EACA,oBAAA;KAAA,iBAAA;EACA,qBAAA;ACzBF;;AD4BA;EACE,cA9IM;EA+IN,qBAAA;ACzBF;AD2BE;EACE,WAAA;ACzBJ;;AD6BA;EACE,eAAA;AC1BF;;AD6BA;EACE,iBAAA;AC1BF;;AD6BA;EACE,yBA9JO;EA+JP,cAhKM;EAiKN,aAAA;EACA,sBAAA;EACA,SAAA;EACA,mBAAA;EACA,eAAA;AC1BF;;AD6BA;EACE,aAAA;EACA,SAAA;AC1BF;;AD6BA;EACE,cAAA;EACA,gBAAA;AC1BF;;AD6BA;EACE,UAAA;EACA,iCAAA;AC1BF;;AD6BA;EACE,yBAvLO;AC6JT;;AD6BA;EACE;IACE,iBAAA;EC1BF;ED4BA;IACE,aAAA;EC1BF;AACF;AD6BA;EACE;IACE,mBAAA;IACA,8BAAA;EC3BF;AACF;AD8BA;EACE;IACE,mBAAA;IACA,8BAAA;IACA,mBAAA;IACA,aAAA;EC5BF;ED+BA;IACE,aAAA;IACA,qCAAA;EC7BF;AACF;AD+BA;EACE;IACE,qCAAA;EC7BF;AACF","file":"style.css"}
\ No newline at end of file
diff --git a/styles/style.scss b/styles/style.scss
new file mode 100644
index 0000000..5a7229f
--- /dev/null
+++ b/styles/style.scss
@@ -0,0 +1,222 @@
+// Variables
+$light: #fcfcfc;
+$accent: #ef6069;
+$dark: #574141;
+$font-title: "Agbalumo", system-ui;
+$font-sans: "Inter", sans-serif;
+
+* {
+  padding: 0;
+  margin: 0;
+  box-sizing: border-box;
+  font-family: $font-sans;
+}
+
+body {
+  background-image: linear-gradient(
+    to right bottom,
+    #f7f7f7,
+    #f5f5f5,
+    #f2f2f2,
+    #f0f0f0,
+    #eeeeee
+  );
+  color: $dark;
+}
+
+header {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  background-color: $accent;
+  color: $light;
+  padding: 1.5rem;
+  border-bottom: 3px $light solid;
+  margin-bottom: 2rem;
+
+  .icons {
+    display: flex;
+    gap: 10px;
+    align-items: center;
+    list-style-type: none;
+
+    color: $light;
+    font-weight: 500;
+
+    i {
+      font-size: 1.2rem;
+    }
+  }
+}
+
+.logo {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+
+  &__title {
+    font-size: 1.5rem;
+    font-weight: 500;
+    font-family: $font-title;
+    text-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+    justify-items: center;
+    color: $light;
+  }
+
+  &__img {
+    width: 60px;
+    height: 60px;
+  }
+}
+
+.opening-hours {
+  text-transform: uppercase;
+  font-family: "Archivo Narrow", sans-serif;
+  font-size: 1.8rem;
+  font-weight: 500;
+  color: $accent;
+  text-align: center;
+}
+
+.main-content {
+  display: grid;
+  grid-template-columns: 1fr;
+  justify-items: center;
+  gap: 2rem;
+  padding: 1rem;
+}
+
+.menu {
+  width: 100%;
+
+  &__section {
+    margin-bottom: 2rem;
+  }
+
+  &__section-title {
+    font-family: "Archivo Narrow", sans-serif;
+    font-size: 2rem;
+    padding: 1rem;
+    color: $light;
+    background-color: $accent;
+    border-bottom: darken($accent, 30%) 2px solid;
+    border-radius: 10px;
+    margin-bottom: 1rem;
+  }
+
+  &__items {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+  }
+
+  &__item {
+    display: flex;
+    justify-content: space-between;
+  }
+
+  &__item-name,
+  &__item-price {
+    font-size: 1.2rem;
+  }
+
+  &__item-name {
+    font-weight: 500;
+  }
+}
+
+.burguer-images {
+  display: grid;
+  gap: 1rem;
+}
+
+.burguer-img {
+  border-radius: 10px;
+  max-width: 400px;
+  max-height: 400px;
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+  justify-items: center;
+}
+
+a {
+  color: $light;
+  transition: 0.3s ease;
+
+  &:hover {
+    color: #ddd;
+  }
+}
+
+.fa-brands {
+  font-size: 2rem;
+}
+
+.fa-solid {
+  font-size: 1.3rem;
+}
+
+footer {
+  background-color: $accent;
+  color: $light;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  align-items: center;
+  padding: 1.5rem;
+}
+
+.socials {
+  display: flex;
+  gap: 1rem;
+}
+
+.darker {
+  color: darken($accent, 5%);
+  font-weight: 600;
+}
+
+::-webkit-scrollbar {
+  width: 7px;
+  background-color: hsl(0, 0%, 89%);
+}
+
+::-webkit-scrollbar-thumb {
+  background-color: $accent;
+}
+
+@media screen and (min-width: 640px) {
+  .logo__title {
+    font-size: 1.8rem;
+  }
+  .main-content {
+    padding: 2rem;
+  }
+}
+
+@media screen and (min-width: 768px) {
+  footer {
+    flex-direction: row;
+    justify-content: space-between;
+  }
+}
+
+@media screen and (min-width: 1024px) {
+  header {
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    padding: 3rem;
+  }
+
+  .main-content {
+    padding: 3rem;
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
+@media screen and (min-width: 1280px) {
+  .burguer-images {
+    grid-template-columns: repeat(2, 1fr);
+  }
+}
