@font-face { font-family: 'Hundergad'; src: url('./fonts/hundergad.otf'); }
@font-face { font-family: 'Thorn and Thistle'; src: url('./fonts/thorn-and-thistle.otf'); }

@property --skin-on-skin { syntax: '<color>'; inherits: false; initial-value: #f7e3e3; }
@property --pretty-in-pink { syntax: '<color>'; inherits: false; initial-value: #f5bbd5; }
@property --ms-scarlet { syntax: '<color>'; inherits: false; initial-value: #dd3f2e; }
@property --moaning-maroon { syntax: '<color>'; inherits: false; initial-value: #3e131a; }
@property --touch-me-teal { syntax: '<color>'; inherits: false; initial-value: #549588; }
@property --intimate-emerald { syntax: '<color>'; inherits: false; initial-value: #112822; }

.starburst {
  aspect-ratio: 1;
  clip-path: polygon(100% 50%,78.98% 57.76%,93.3% 75%,71.21% 71.21%,75% 93.3%,57.76% 78.98%,50% 100%,42.24% 78.98%,25% 93.3%,28.79% 71.21%,6.7% 75%,21.02% 57.76%,0% 50%,21.02% 42.24%,6.7% 25%,28.79% 28.79%,25% 6.7%,42.24% 21.02%,50% 0%,57.76% 21.02%,75% 6.7%,71.21% 28.79%,93.3% 25%,78.98% 42.24%);
}

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

a:hover { text-decoration: underline; }

blockquote {
  border-inline-start: 4px dotted var(--touch-me-teal);
  font-family: 'Thorn and Thistle', sans-serif;
  margin: 0;
  padding: 0 36px;

  ul { list-style: "-"; }
}

body {
  background-color: var(--skin-on-skin);
  color: var(--moaning-maroon);
  font-family: 'DM Sans', sans-serif;
  font-size: 20px;
  margin: 0;
  padding: 0;
}

br { margin: 24px 0; }

hr {
  color: var(--ms-scarlet);
  margin: 24px auto;
  width: 50%;
}

h1 {
  color: var(--moaning-maroon);
  font-family: 'Hundergad', sans-serif;
  font-size: 4em;
  font-weight: 400;
  margin: 60px 0 60px;
}

h2 {
  font-family: 'Thorn and Thistle', sans-serif;
  font-size: 56px;
  font-weight: 400;
  margin: 0 0 28px;
}

h3 {
  font-family: 'Thorn and Thistle', sans-serif;
  font-size: 36px;
  font-weight: 400;
  margin: 0;
}

h4 {
  font-family: 'Thorn and Thistle', sans-serif;
  font-size: 24px;
  font-weight: 400;
  margin: 0;
}

img {
  border: 0;
  width: 100%;
}

li {
  line-height: 1.5;
  margin-bottom: 6px;
}

p {
  line-height: 1.5;
  margin: 12px 0;
}

small {
  font-family: 'DM Sans', sans-serif;
  font-size: 16px;
}

.centered { text-align: center; }
.foreground { position: relative; }
.grow-one { flex-grow: 1 }
.grow-two { flex-grow: 2 }
.row { display: flex; }

.column {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.main {
  background-color: var(--skin-on-skin);
  margin: 48px;
}


.break {
  margin: 24px auto;
  max-width: 160px;
  width: 50%;
}

.contact {
  margin: 0 24px 48px;
  padding: 36px;

  br { margin: 12px 0; }
  li { list-style: none; }

  .image {
    left: 35%;
    width: 100px;
    margin-top: 340px;
  }
}

.pleasureville {
  margin: auto;
  margin-bottom: 60px;
  max-width: 600px;
  width:100%;
}

.sure-to-please {
  margin: auto;
  margin-top: 60px;
  max-width: 600px;
  width:100%;
}

.sticker {
  position: absolute;
  z-index: 0;
}

.teal-emerald {
  background-color: var(--touch-me-teal);
  border:8px dotted var(--intimate-emerald);
  color: var(--skin-on-skin);
}

.maroon-pink {
  background-color: var(--moaning-maroon);
  border:8px dotted var(--pretty-in-pink);
  color: var(--skin-on-skin);
}