@import url("https://fonts.googleapis.com/css2?family=League+Spartan:wght@100..900&display=swap");
:root {
   --White: hsl(0, 100%, 100%);
   --Grey_500: hsl(0, 0%, 63%);
   --Grey_800: hsl(0, 0%, 27%);
   --Black: hsl(0, 0%, 0%);
}

* {
   font-family: "League Spartan", sans-serif;
   padding: 0;
   margin: 0;
   box-sizing: border-box;
   list-style: none;
   text-decoration: none;
}

/* NEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEWNEW */
body {
   min-height: 100vh;
}

header {
   background-image: url("../images/mobile-image-hero-1.jpg");
   background-repeat: no-repeat;
   background-size: 100% 100%;
   height: 17rem;
   width: 100%;
   display: flex;
   padding: 2rem 0 0 2rem;
}
.nav_mobile {
   display: flex;
   justify-content: center;
   height: 1rem;
}

.topnav_open {
   height: 1rem;
   margin-right: 100px;
   @media (width>=376px) {
      display: none;
   }
}
.homepage {
   padding: 0.1rem;
   margin: 0;
   width: 50px;
   height: 16px;
   margin-right: 20px;
}

.topnav_menu {
   @media (width <376px) {
      display: none;
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      z-index: 1;
      padding: 1rem;
      background-color: var(--White);
   }
}

button {
   background: none;
   border: none;
   padding: 0;
   cursor: pointer;
   @media (width >= 376px) {
      display: none;
   }
}
.topnav_close {
   margin: 0 50px 0 15px;
}

.topnav_links {
   display: flex;
   gap: 1rem;
   align-items: center;
   padding: 0;
}

.topnav_link {
   color: var(--Black);
   font-weight: 500;
   padding: 3px;
   transition: border-color 0.3s ease;
   border-bottom: 2px solid transparent;
   @media (width>376px) {
      color: var(--White);
   }
}
.topnav_link:hover {
   border-color: var(--White);
}
.one {
   position: relative;
}

/* two */
.two {
   padding: 2rem;
}
.two h2 {
   font-size: 2rem;
   margin-bottom: 1rem;
}
.two .para {
   color: #595959;
   font-weight: 500;
   margin-bottom: 1.2rem;
   line-height: 1.5;
}
.shop {
   display: flex;
   align-items: baseline;
   height: 1rem;
   margin-bottom: 1rem;
}
.shop p {
   color: var(--Black);
   font-weight: 500;
   text-transform: uppercase;
   letter-spacing: 10px;
   margin: 0 1rem 1.5rem 0;
   cursor: pointer;
}
.shop p:hover {
   color: var(--Grey_500);
}
.shop img {
   cursor: pointer;
}

.buttons {
   display: flex;
   @media (width < 376px) {
      position: absolute;
      top: 216px;
      right: 0;
   }
}
.buttons button {
   border: none;
   height: 3.5rem;
   width: 3.5rem;
   background-color: var(--Black);
   cursor: pointer;
   display: flex;
   align-items: center;
   justify-content: center;
}
.buttons button:hover {
   background-color: var(--Grey_500);
}

.img_about {
   @media (width <376px) {
      width: 100%;
   }
}

.four {
   padding: 2rem;
}
.four h3 {
   font-size: 1.5rem;
   margin-bottom: 1rem;
}
.four p {
   color: #595959;
   font-weight: 300;
   margin-bottom: 1rem;
   line-height: 1.5;
}

@media (min-width: 1000px) {
   body {
      min-height: 100vh;
   }
   header {
      background-image: url("../images/desktop-image-hero-1.jpg");
      background-repeat: no-repeat;
      background-size: 100% 100%;
      height: 30rem;
      display: flex;
      padding: 3rem;
   }
   .grid {
      display: grid;
      grid-template-columns: repeat(3, 1fr);
      min-height: 100vh;
   }
   /* one */
   .one {
      grid-column: span 2;
      height: auto;
   }
   .two {
      padding: 4rem;
      position: relative;
   }
   .buttons {
      position: absolute;
      bottom: 0;
      left: 0;
      display: flex;
   }
   .buttons button {
      border: none;
      background-color: var(--Black);
      cursor: pointer;
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 1rem;
   }
   .buttons button:hover {
      background-color: var(--Grey_500);
   }
   .buttons button img {
      height: 100%;
      width: 100%;
   }
   /* three */
   .three {
      height: 100%;
      width: 100%;
   }
   /* four */
   .four {
      padding: 4rem;
   }
   /* five  */
   .five {
      height: 100%;
      width: 100%;
   }
}