body {
        background-color: #f0f0f0;
        margin: 0;
        padding: 0;
      }
      @media screen and (max-width: 480px) {
        .header {
          display: flex;
          flex-direction: column;
          gap: 1.5rem;
          justify-content: center;
          background-color: white;
          padding: 0.5rem;
        }
        #logo {
          width: 35%;
          height: auto;
          align-self: center;
        }
        #logo img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        #search {
          display: grid;
          grid-template-columns: 3fr 1fr;
          gap: 0.5rem;
          justify-content: space-between;
        }
        #search input[type="search"] {
          width: 95%;
          border-radius: 5%;
          margin-left: 0.5rem;
          height: 3.7vh;
          font-size: 1rem;
        }
        #search input[type="submit"] {
          width: 100%;
          border-radius: 5%;
          height: 3.7vh;
          font-size: 1rem;
          align-self: flex-start;
        }
        #login {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 1rem;
          justify-content: space-between;
          align-items: center;
        }
        .button {
          width: 17vw;
          height: 4.5vh;
          background-color: #2a55e5;
          color: white;
          border-radius: 0.3rem;
          font-size: 1rem;
          margin-left: 3.5rem;
        }
        .menu {
          display: grid;
          grid-template-columns: 1fr 1fr;
          gap: 1rem;
          justify-items: center;
          margin-top: 1.2rem;
          background-color: white;
          padding: 0.5rem;
        }
        .category {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 0.5rem;
          padding: 0;
          margin: 0;
        }
        .icon {
          width: 20vw;
          height: 13vh;
        }
        .icon img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        .category a {
          color: black;
          text-decoration: none;
          font-size: 1.1rem;
        }
        .img1 {
          width: 100vw;
          height: auto;
          margin-top: 1.5rem;
          margin-bottom: 1rem;
        }
        .img1 a img {
          width: 100%;
          width: 100%;
          object-fit: cover;
        }
        .img2 {
          margin-top: 0;
          width: 100vw;
          height: auto;
          margin-bottom: 0.5rem;
        }
        .img2 a img {
          width: 100%;
          width: 100%;
          object-fit: cover;
        }
        .top-deals {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          background-color: white;
          margin-top: 1rem;
          padding-bottom: 1.5rem;
        }
        .top-deals h3 {
          font-size: 1.5rem;
        }
        .items {
          display: grid;
          grid-template-columns: 1fr 1fr;
          grid-template-rows: 3;
          gap: 1rem;
          justify-items: center;
        }
        .items .sub-items {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
        .items .sub-items > div {
          width: 40vw;
          height: 25vh;
        }
        .items .sub-items div a img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 1rem;
        }
        .items .sub-items > a {
          color: black;
          text-decoration: none;
          font-size: 1rem;
          margin-top: 0.3rem;
        }
        .images{
            display: flex;
            flex-direction: column;
            gap: 0;
        }
        footer {
          background-color: black;
          margin-top: 1.5rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;
          height: auto;
        }
        footer div > p {
          color: white;
          font-size: 1rem;
        }
        footer .footer-content{
          display: grid;
          grid-template-columns: 1fr;
          justify-content: center;
          gap: 0;
        }
        footer .footer-content div > h3 {
          color: #7a8787;
          width: 100%;
          text-align: center;
          font-size: 1.5rem;
          margin-left: 0.5rem;
        }
        footer .footer-content div ul {
          display: flex;
          flex-direction: column;
          justify-content: center;
          justify-items: center;
          gap: 1rem;
        }
        footer .footer-content div ul li {
          list-style-type: none;
          width: 100%;
          text-align: center;
        }
        footer .footer-content div ul li a {
          color: rgb(218, 200, 200);
          text-decoration: none;
          font-size: 0.8rem;
          margin-right: 1rem;
        }
      }
      @media screen and (min-width:768px) {
        .header {
          display: flex;
          flex-direction: row;
          gap: 1.5rem;
          justify-content: space-evenly;
          background-color: white;
          padding: 0.5rem;
          padding-top: 0.5rem;
        }
        #search input[type="search"] {
          border-radius: 0.5rem;
          margin-left: 0.5rem;
          font-size: 1rem;
          padding: 0.5rem 2rem 0.5rem 0.5rem;
          background-color: #eaf1f4;
        }
        #search input[type="submit"] {
          margin-left: 0.5rem;
          font-size: 1rem;
          border: 0.1px solid yellow;
          background-color: #fc9e00;
          color: white;
          padding: 0.5rem;
          border-radius: 10%;
        }
        .button{
            padding: 0.5rem;
            background-color: #2a55e5;
            color: #f0f0f0;
            margin: 0 1rem;
            border-radius: 10%;
            align-self: flex-start;
        }
        .menu {
          display: flex;
          flex-direction: row;
          gap: 1rem;
          justify-content: space-evenly;
          flex-wrap: wrap;
          margin-top: 1.2rem;
          background-color: white;
        }
        .category {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
          gap: 0.5rem;
          padding: 0;
          margin: 0;
          margin-bottom: 0.2rem;
        }
        .icon {
          width: 8vw;
          height: 13vh;
        }
        .icon img {
          width: 100%;
          height: 100%;
          object-fit: cover;
        }
        .category a {
          color: black;
          text-decoration: none;
          font-size: 1.1rem;
        }
        .img1 {
          width: 100%;
          height: auto;
          margin-top: 1.5rem;
          margin-bottom: 1rem;
        }
        .img1 a img {
          width: 100%;
          width: 100%;
          object-fit: cover;
        }
        .images{
            display: grid;
            grid-template-columns: 1fr 1fr 1fr;
            gap: 0.2rem;
        }
        .images .img2{
            width: 100%;
        }
        .images .img2 img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        .top-deals {
          display: flex;
          flex-direction: column;
          justify-content: space-evenly;
          align-items: center;
          background-color: white;
          margin-top: 1rem;
          padding-bottom: 1.5rem;
        }
        .items {
          display: flex;
          flex-direction: row;
          grid-template-rows: 3;
          gap: 1rem;
          justify-content: space-evenly;
          justify-items: center;
        }
        .items .sub-items {
          display: flex;
          flex-direction: column;
          justify-content: center;
          align-items: center;
        }
        .items .sub-items > div {
          width: 14vw;
          height: 21vh;
        }
        .items .sub-items div a img {
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: 1rem;
        }
        .items .sub-items > a {
          color: black;
          text-decoration: none;
          font-size: 1rem;
          margin-top: 0.5rem;
        }
        footer {
          background-color: black;
          margin-top: 1.5rem;
          display: flex;
          flex-direction: column;
          align-items: center;
          width: 100%;
          height: auto;
        }
        footer div > p {
          color: white;
          font-size: 1rem;
        }
        footer .footer-content{
          display: grid;
          grid-template-columns: 1fr 1fr 1fr 1fr;
          justify-content: space-evenly;
          gap: 3rem;
        }
        footer .footer-content div > h3 {
          color: #7a8787;
          width: 100%;
          text-align: center;
          font-size: 1.7rem;
          margin-left: 0.5rem;
        }
        footer .footer-content div ul {
          display: flex;
          flex-direction: column;
          justify-content: center;
          justify-items: center;
          gap: 1rem;
        }
        footer .footer-content div ul li {
          list-style-type: none;
          width: 100%;
          text-align: center;
        }
        footer .footer-content div ul li a {
          color: rgb(218, 200, 200);
          text-decoration: none;
          font-size: 1rem;
          margin-right: 1rem;
        }
      }