:root {
  --primary: #b99470;
  --secondary: #deac80;
  --tertiary: #f7dcb9;
  --shadow: #5c5d62;
  --light-bg: #ffffff;
  font-size: 16pt;
  font-family: "Gill Sans", sans-serif;
}

body {
  background-color: var(--shadow);
  display: flex;
  flex-direction: column;
  min-width: 400px;
}

header {
  align-items: center;
  display: flex;
  justify-content: center;
}

nav {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  & section {
    margin: 0.5vh 1vw;

    & a {
      color: var(--primary);
    }

    & a.active {
      color: var(--tertiary);
    }
  }
}

#produtos {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  justify-content: center;
}

article.produto {
  background-color: var(--light-bg);
  padding: 0.5vh 0.5vw;
  margin: 1vh 1vw;
  display: flex;
  flex-direction: column;
  align-items: center;

  & figure {
    margin: 0.5vh 0.5vw;

    & img {
      margin: unset;
    }
  }

  & section {
    width: 100%;

    & p {
      margin: unset;
    }

    & .nome {
      font-weight: bold;
      text-align: center;
    }

    & .descricao {
      text-align: center;
    }

    & .valor {
      justify-content: end;
      display: flex;
      align-items: baseline;

      & span {
        font-size: 2em;
        font-weight: bold;
      }
    }
  }
}

footer {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  border-top-style: solid;
  border-top-width: 1px;
  border-top-color: var(--primary);

  & * {
    margin: 8px 8px;
  }

  & a {
    display: flex;
    align-items: center;
    color: var(--primary);
    text-decoration: none;
  }

  & :hover {
    color: var(--secondary);
  }

  & p {
    color: var(--secondary);
    font-size: 0.8em;
  }
}

@media (width > 768px) {
  nav {
    flex-direction: row;
  }
}

@media (width > 1024px) {
  #produtos {
    flex-direction: row;
    padding: unset;
  }

  article.produto {
    max-width: 45%;
  }
}

@media (width > 1440px) {
  #produtos article.produto {
    max-width: 30%;
  }
}

@media (width > 1920px) {
  #produtos article.produto {
    max-width: 15%;
  }
}