@import url("https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,100..900;1,100..900&family=Nunito:ital,wght@0,200..1000;1,200..1000&family=Satisfy&display=swap");
/* font-family: "Montserrat", sans-serif; */
/* font-family: "Nunito", sans-serif; */
/* font-family: "Satisfy", cursive; */

* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

html {
  position: relative;
  scroll-behavior: smooth;
  font-size: 62.5%;
  width: 100%;
  height: 100%;
}

body {
  position: relative;
  width: 100%;
  height: 100%;
  font-family: "Montserrat", sans-serif;
  font-size: 1.4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  background-color: white;
  z-index: -99;
}
header,
nav,
main,
footer {
  width: 100%;
}
h1,
h2,
h3 {
  font-family: "Nunito", sans-serif;
  font-weight: bold;
  background: hsl(2, 76%, 48%);
  background: linear-gradient(
    180deg,
    hsl(2, 76%, 48%) 50%,
    hsl(60, 33%, 67%) 60%,
    hsl(146, 100%, 29%) 70%
  );
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
h1 {font-size: 4.8rem;}
h2 {font-size: 3.6rem;}
h3 {font-size: 2.4rem;}
h4 {font-size: 1.8rem;}
p {font-size: 1.6rem;}
a {text-decoration: none;}
img {max-height: 90dvh;}

.icon-text {
  height: 1.6rem;
}

.hero {
  position: relative;
  width: 100%;
  height: 100dvh;
  color: whitesmoke;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  & h1 {
    background: hsl(2, 76%, 48%);
    background: linear-gradient(
      180deg,
      hsl(2, 76%, 48%) 50%,
      hsl(60, 33%, 67%) 60%,
      hsl(146, 100%, 29%) 70%
    );
    background-clip: text;
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
  }
  &::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url("./assets/images/hero/melancia.png") no-repeat center center
      hsla(0, 0%, 0%, .5);
    background-blend-mode: color;
    background-size: cover;
    z-index: -1;
  }
  .hero-logo {
    position: absolute;
    top: 2rem;
    width: 50%;
  }
  .slogan {
    font-family: "Satisfy", cursive;
    font-size: 3.2rem;
    text-align: center;
  }
  .scroll-down {
    position: absolute;
    left: 50%;
    bottom: 2rem;
    translate: -50% 0;
    text-align: center;
    .scroll-down-watermelon {
      width: 2.5rem;
    }
    a {
      color: inherit;
    }
  }
}

.menu {
  position: sticky;
  top: 0;
  width: 100%;
  background: hsl(146, 100%, 92%);
  box-shadow: 0 0 10px 0px gray;
  z-index: 1;
  display: flex;
  justify-content: center;
  .menu-mobile {
    display: none;
    position: fixed;
    top: 3rem;
    right: 1rem;
  }
  input {
    position: absolute;
    top: 50%;
    right: 1rem;
    width: 2.8rem;
    height: 2.8rem;
    translate: -0.1rem -50%;
    &:checked ~ label > .menu-icon {
      background-color: transparent;
      &::before {
        top: 0;
        transform: rotate(225deg);
      }
      &::after {
        top: 0;
        transform: rotate(-225deg);
      }
    }
  }
  label {
    position: absolute;
    top: 50%;
    right: 1rem;
    width: 3rem;
    height: 3rem;
    translate: 0 -50%;
    background-color: hsl(146, 100%, 29%);
    border-radius: 5px;
    .menu-icon {
      transition: transform 1s ease-in-out;
      position: absolute;
      top: 50%;
      left: 50%;
      translate: -50% -50%;
      width: 2rem;
      height: 1.6px;
      background-color: white;
      &,
      &::before,
      &::after {
        transition: all 0.4s ease-in-out;
      }
      &::before {
        content: "";
        position: absolute;
        top: -4.8px;
        width: 100%;
        height: 1.6px;
        background-color: white;
      }
      &::after {
        content: "";
        position: absolute;
        top: 5.6px;
        width: 100%;
        height: 1.6px;
        background-color: white;
      }
    }
  }
  .menu-content {
    display: flex;
    max-width: 1200px;
    width: 100%;
    padding: 0.5rem;
    background: hsl(146, 100%, 92%);
    color: darkgreen;
    justify-content: center;
    align-items: center;
  }
  .menu-logo {
    margin: 0 0.5rem;
    height: 2.5rem;
  }
  .menu-list {
    list-style: none;
    display: flex;
    gap: 1rem;
    width: 100%;
    justify-content: space-around;
    font-size: 1.5rem;
    font-weight: bold;
    text-transform: uppercase;
  }
}

main {
  background-color: hsl(30, 50%, 93%);
  padding: 0 0 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  section {
    max-width: 1200px;
    width: 100%;
    padding: 5rem 2rem 0;
    h2 {
      text-transform: uppercase;
    }
    /* &:last-child {margin-bottom: 2rem;} */
  }
  #historia {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    grid-template-rows: min-content;
    gap: 2rem;
    justify-items: center;
    align-items: center;
    h2 {
      justify-self: start;
      grid-column: span 2;
      order: -1;
    }
    p {
      margin-top: 1rem;
      line-height: 2.2rem;
    }
    img {
      width: 70%;
      aspect-ratio: 3/2;
      border-radius: 7px;
      object-fit: cover;
    }
    @media (max-width: 768px) {
      display: flex;
      flex-direction: column;
      h2 {align-self: flex-start;}
      p:nth-of-type(3), img:nth-of-type(2) {order: 1;}
      p:nth-of-type(4), img:nth-of-type(3) {order: 2;}
      p:nth-of-type(5), img:nth-of-type(4) {order: 3;}
      img:nth-of-type(5) {order: 4;}
    }
  }
  #galeria {
    ul {
      display: flex;
      flex-wrap: wrap;
      gap: 20px;
      width: 100%;
      li {
        max-width: calc(25% - 20px);
        aspect-ratio: 3/2;
        overflow: hidden;
        @media (max-width: 960px) {
          max-width: calc(33.333% - 20px);
        }
        @media (max-width: 768px) {
          max-width: calc(50% - 20px);
        }
        @media (max-width: 576px) {
          max-width: 100%;
        }
        border-radius: 7px;
        box-shadow: 0 0 4px 0 gray;
        background-color: black;
        img {
          display: block;
          width: 100%;
          aspect-ratio: 3/2;
          object-fit: cover;
          transition: all 0.33s ease-in-out;
          opacity: 0.85;
          &:hover {
            scale: 1.05;
            opacity: 1;
          }
        }
      }
    }
  }
  #produtos,
  #ofertas {
    p {
      margin-top: 2rem;
    }
  }
  #contato {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-auto-flow: dense;
    gap: 2rem;
    h2 {grid-column: span 2;}
    .contato__maps {
      width: 100%;
      iframe {
        width: 100%;
        aspect-ratio: 3/2;
        border-radius: 7px;
        box-shadow: 0px 2px 7px 0 darkgray;
      }
    }
    .contato__text {
      display: flex;
      flex-direction: column;
      gap: 1rem;
      address {
        margin-top: -.75rem;
        margin-left: 2rem;
      }
    }
  }
}

aside#top {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  z-index: 900;
  .top-blur {
    z-index: 901;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: hsla(0, 0%, 0%, 0.70);
    backdrop-filter: blur(3px);
  }
  input.top-element {
    z-index: 903;
    position: fixed;
    top: calc(5% + 1.1rem);
    right: calc(5% + 1.1rem);
    width: 2.8rem;
    height: 2.8rem;
    &:checked,
    &:checked ~ .top-element {
      display: none;
    }
  }
  label.top-element {
    z-index: 903;
    position: fixed;
    top: calc(5% + 1rem);
    right: calc(5% + 1rem);
    width: 3rem;
    height: 3rem;
    border-radius: 5px;
    background-color: hsl(2, 76%, 48%);
    box-shadow: 0 0 4px 1px gray;
    &::after,
    &::before {
      content: "";
      position: absolute;
      top: 50%;
      left: 50%;
      translate: -50% -50%;
      width: 80%;
      height: 2px;
      background-color: white;
    }
    &::after {
      rotate: -45deg;
    }
    &::before {
      rotate: 45deg;
    }
  }
  .top-content {
    z-index: 902;
    position: absolute;
    top: 50vh;
    left: 50vw;
    translate: -50% -50%;
    width: 90vw;
    height: 90vh;
    background-color: hsla(30, 50%, 93%, 0.8);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    border-radius: 7px;
    .top-content__image {
      max-width: calc(100% - 3rem);
      max-height: calc(100% - 3rem);
      height: 100%;
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
    }
    img {
      object-fit: contain;
      max-width: 100%;
      max-height: 100%;
      width: fit-content;
      height: fit-content;
      border-radius: 7px;
    }
  }  
}

footer {
  display: flex;
  min-height: 6rem;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  background-color: hsl(195, 47%, 21%);
  color: whitesmoke;
  z-index: 2;
  box-shadow: 0 0 10px 0px gray;
  a {
    color: hsl(60, 100%, 85%);
    &:hover {
      color: hsl(60, 100%, 50%);
    }
  }
}
/* Animations  */
@keyframes bounce-7 {
  0% {transform: scale(1, 1) translateY(0);}
  15% {transform: scale(1.1, 0.9) translateY(3px);}
  35% {transform: scale(0.9, 1.1) translateY(-20px);}
  45% {transform: scale(1.05, 0.95) translateY(0);}
  55% {transform: scale(0.95, 1.05) translateY(-15px);}
  63% {transform: scale(1, 1) translateY(0);}
  71% {transform: scale(0.97, 1.03) translateY(-7px);}
  77% {transform: scale(1, 1) translateY(0);}
}
.bounce-7 {
  animation-name: bounce-7;
  animation-timing-function: cubic-bezier(0.28, 0.84, 0.42, 1);
  animation-duration: 3s;
  animation-iteration-count: infinite;
}

@media (max-width: 768px) {
  h1 {font-size: 4rem;}
  h2 {font-size: 3rem;}
  h3 {font-size: 2rem;}
  h4 {font-size: 1.6rem;}
  p {font-size: 1.5rem;}
  main section {padding: 3rem !important;}
  .menu {
    position: fixed;
    top: 0;
    right: -10px;
    width: fit-content;
    .menu-mobile {
      display: block;
      z-index: 1;
    }
    .menu-content {
      position: absolute;
      box-shadow: 0 0 10px 0px gray;
      min-width: 22rem;
      transition: translate 0.5s ease-in-out;
      padding: 2rem 4rem 4rem;
      flex-direction: column;
      justify-content: start;
      align-content: baseline;
      left: 100%;
      height: 100dvh;
      gap: 2rem;
      .menu-logo {
        height: 3.5rem;
        translate: -1.5rem -0.5rem;
      }
      .menu-list {
        flex-direction: column;
        align-items: center;
        gap: 2rem;
      }
    }
    input:checked ~ .menu-content {
      translate: calc(-100% - 10px) 0;
    }
  }
  main {
    #contato{
      display: flex;
      flex-direction: column;
      .contato__maps {order: 1;}
    }
  }
}

aside#top {
  display:none;
}