:root {
  --orange: #ffa342;
  --brown: #592200;
}

@font-face {
  font-family: "Chelsea Market";
  src: local("Chelsea Market"),
    url("/fonts/chelsea-market.regular.ttf") format("truetype");
}

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

html,
body {
  padding: 0;
}

body {
  font-family: "Chelsea Market";
  background-image: url("/images/orange-paper-bg.png");
  background-size: auto;
  background-repeat: repeat;
  font-size: 20px;
  color: var(--brown);
}

a {
  text-decoration: none;
  color: var(--brown);
}

a p {
  background: var(--orange);
}

section {
  width: 70%;
  max-width: 1200px;
  margin: auto;
}

section .heading {
  line-height: 200%;
}

/*


*/

header {
  top: 0;
  left: 0;
  padding: 2rem;
  position: fixed;
  z-index: 10;
}

.main-heading {
  margin-bottom: 2rem;
  filter: drop-shadow(4px 4px 0px var(--brown));
}

.main-heading a {
  padding: 0.75rem 2rem;
  line-height: auto;
  background: var(--orange);
  clip-path: polygon(
    5% 2%,
    40% 0%,
    60% 10%,
    100% 0%,
    93% 100%,
    45% 93%,
    0% 98%
  );
}

header nav {
  display: inline-flex;
  flex-direction: column;
  gap: 1rem;
  align-items: start;
}

.nav-drop-shadow {
  filter: drop-shadow(2px 2px 0px var(--brown));
}

.nav-link {
  padding: 0.75rem 1rem;
  line-height: 1;
  background: var(--orange);
  color: var(--brown);
  text-decoration: none;
  display: inline-block;
}

.nav-link:hover {
  transform: translateY(-1px);
}

.nav-link.how-to-buy {
  clip-path: polygon(0 0, 50% 10%, 100% 3%, 95% 100%, 25% 95%, 4% 100%);
}

.nav-link.about-us {
  clip-path: polygon(3% 5%, 50% 1%, 100% 5%, 95% 100%, 65% 95%, 4% 100%);
}

.nav-link.blog {
  clip-path: polygon(2% 0%, 97% 5%, 95% 100%, 4% 90%);
}

.nav-link.webstylists {
  clip-path: polygon(0% 0%, 50% 5%, 95% 0%, 100% 100%, 45% 90%, 5% 98%);
}

/* 


*/

.jewelry-catalog {
  margin-top: 12rem;
}

.jewelry-catalog-list {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 2em;
  list-style: none;
}

.jewelry-catalog-item {
  position: relative;
  display: inline-grid;
  align-items: center;
  max-height: 300px;
}

.jewelry-catalog-item img {
  filter: drop-shadow(-16px 16px 2px #0000002a)
    drop-shadow(16px 12px 2px #592200aa);
}

.jewelry-catalog-item:hover img {
  animation: 2s steps(2, jump-both) infinite paper-wobble;
}

.jewelry-catalog-item:hover .name {
  transform: translateY(-2px) translateX(-2px);
  box-shadow: 4px 4px 0px var(--brown);
}

.jewelry-catalog-item img {
  object-fit: contain;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
}

.jewelry-catalog-item .name {
  text-align: center;
  background: var(--orange);
  padding: 0.25rem;
  font-size: 0.75em;
  box-shadow: 2px 2px 0px var(--brown);
}

/*



*/

section.paper {
  position: relative;
  margin-top: 8rem;
  margin-bottom: 8rem;
  padding: 7rem 6rem;
  background: tan;

  display: flex;
  flex-direction: column;
  gap: 4rem;

  z-index: 1;
}

.paper-drop-shadow {
  filter: drop-shadow(4px 4px 1px var(--brown));
}

section#about-us {
  clip-path: polygon(0% 1%, 100% 0%, 100% 97%, 40% 100%, 0% 98%);
}

section#how-to-buy {
  clip-path: polygon(0% 0%, 100% 1%, 95% 70%, 95% 100%, 0% 98%);
}

@keyframes paper-wobble {
  from {
    transform: rotate(-30deg);
  }

  to {
    transform: rotate(30deg);
  }
}

@media (max-width: 1000px) {
  .jewelry-catalog-list {
    grid-template-columns: repeat(3, 1fr);
  }
  section {
    width: 85%;
  }
}

@media (max-width: 860px) {
  .jewelry-catalog-list {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 640px) {
  .jewelry-catalog {
    margin-top: 24rem;
  }

  section {
    width: 95%;
  }

  section.paper {
    margin-top: 6rem;
    margin-bottom: 6rem;
    padding: 4rem 3rem;
    background: tan;

    display: flex;
    flex-direction: column;
    gap: 4rem;

    z-index: 1;
  }

  .jewelry-catalog-list {
    grid-template-columns: repeat(1, 1fr);
  }
}