*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  min-height: 100dvh;
}

html {
  font-size: 100%;
}

body {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 16px;
  margin: 0;
  background-image: url(img/crochet_pastel_seamless_web.png);
  background-repeat: repeat;
  background-size: cover;
  text-align: center;
}

img {
  max-width: 100%;
  height: auto;
}

img.shop-icon {
  border-radius: 8px;
  height: 2rem;
}

h1,
h2,
h3,
h4,
h5,
h6,
.fraunces-bold {
  margin: 0 0 32px 0;
  color: #251b16;
  font-family: "Fraunces", serif;
  font-optical-sizing: auto;
  font-weight: bold;
  font-style: normal;
  font-variation-settings: "SOFT" 50, "WONK" 0;
  text-wrap: pretty;
}

h1 {
  color: #F6B7B1;
  font-size: 2.986rem;
  text-shadow:
    2px   0     #fff,
    -2px  0     #fff,
    0     2px   #fff,
    0     -2px  #fff,
    1px   1px   #fff,
    -1px  -1px  #fff,
    1px   -1px  #fff,
    -1px  1px   #fff,
    0     4px   #251b16;
}

h2 {
  font-size: 2.488rem;
}

h3 {
  font-size: 2.074rem;
}

h4 {
  font-size: 1.728rem;
}

h5 {
  font-size: 1.44rem;
}

.h6 {
  font-size: 1.2rem;
}

p {
  margin: 0 0 16px 0;
  color: #251b16;
  font-family: "Fraunces", serif;
  font-optical-sizing: auto;
  font-weight: normal;
  font-style: normal;
  font-variation-settings: "SOFT" 50, "WONK" 0;
  font-size: 1rem;
}

p.lead {
  font-size: 1.2rem;
  font-weight: bold;
}

ul {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 16px;
  padding: 0;
  margin: 0;
  list-style: none;
}

ul>li {
  padding: 0;
  text-align: center;
}

.crochet-button {
  z-index: 1;
  position: relative;
  display: flex;
  justify-content: start;
  align-items: center;
  gap: 16px;
  padding: 20px 40px;
  font-size: 1.44rem;
  color: #bf8e70;
  background-color: #f7ead7;
  background-clip: padding-box;
  border: 4px dotted #f7ead7;
  box-shadow: 0 0 16px 0 rgba(0, 0, 0, 0.1);
  text-decoration: none;
  border-radius: 12px;
}