:root {
  --tea: #8f8868;
  --wheat: #976c54;
  --antique: #b5a38d;
  --cocoa: #1a1c19;
  --swamp: #342415;
  --dream: #e0d6c2;
}
/* Font Styles */
/* Layout Mixins */
body {
  background-color: #1a1c19;
  color: var(--tea);
  max-width: 1200px;
  margin: auto;
  padding: 2rem;
}
h1, h2, h3, h4, h5 {
  font-family: "Spectral", serif;
  font-weight: 900;
  letter-spacing: 1px;
  color: var(--dream);
}
p, a, a:visited {
  font-family: "Karla", sans-serif;
  font-weight: 300;
  color: var(--dream);
}
a {
  text-decoration: none;
}
/* Layout */
.wp-block-columns {
  flex-wrap: wrap !important;
  gap: 2em;
}
.blob-group:not(:has(.base)) {
  height: 200px;
  width: 200px;
  position: relative;
}
.blob-group:not(:has(.base)) .blob {
  height: auto;
  width: 100px;
  border: 1px solid var(--cocoa);
  position: absolute;
  border-radius: 20px;
  transition: transform 300ms ease-in-out;
}
.blob-group:not(:has(.base)) .blob:nth-of-type(1) {
  left: 0;
}
.blob-group:not(:has(.base)) .blob:nth-of-type(1):hover {
  transform: translate(-20px, -20px);
}
.blob-group:not(:has(.base)) .blob:nth-of-type(2) {
  right: 0;
}
.blob-group:not(:has(.base)) .blob:nth-of-type(2):hover {
  transform: translate(20px, -20px);
}
.blob-group:not(:has(.base)) .blob:nth-of-type(3) {
  left: 0;
  bottom: 0;
}
.blob-group:not(:has(.base)) .blob:nth-of-type(3):hover {
  transform: translate(-20px, 20px);
}
.blob-group:not(:has(.base)) .blob:nth-of-type(4) {
  right: 0;
  bottom: 0;
}
.blob-group:not(:has(.base)) .blob:nth-of-type(4):hover {
  transform: translate(20px, 20px);
}
.blob-group:not(:has(.base)) .blob:nth-of-type(5) {
  right: 25%;
  bottom: 25%;
  border-width: 2px;
  transform: rotate(45deg);
}
.blob-group:not(:has(.base)) .blob:nth-of-type(5):hover {
  transform: rotate(135deg);
}
.blob-group:not(:has(.base)) .title {
  display: none;
  position: absolute;
}
.blob {
  aspect-ratio: 1;
  height: 100%;
  width: 250px;
  border-radius: 30px;
}
.blob-group:has(.base) {
  display: flex;
  flex-direction: row;
  gap: 1em;
  width: 200px;
  margin-bottom: 1em;
}
.blob.base {
  border-radius: 100%;
}
/* Card */
.is-style-card {
  display: flex;
  flex-direction: column;
  background-color: var(--swamp);
  border-radius: 30px;
  margin: 1em 0;
  padding: 2rem;
}
.is-style-card .row {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  gap: 5rem;
}
.card-link {
  padding: 1.5em 0;
}
.card-link a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  border-top: 1px solid var(--antique);
  font-size: 1.2em;
  padding-top: 0.5em;
  text-transform: uppercase;
}
.card-link a span {
  font-size: 1.5em;
}
.card-link a:hover {
  color: var(--wheat);
}
p.is-style-plate a {
  font-family: "Karla", sans-serif;
  font-weight: 300;
  font-weight: 200;
  text-transform: uppercase;
  letter-spacing: 2px;
  border: 1px solid var(--tea);
  border-radius: 30px;
  color: var(--tea);
  padding: 5px 10px;
  transition: all 100ms ease-in-out;
}
p.is-style-plate a:hover {
  border-width: 2px;
  font-weight: 400;
  letter-spacing: 2.5px;
}
/* Define WP Editor Applied Colors */
.has-tea-background-color {
  background-color: var(--tea);
}
.has-tea-color {
  color: var(--tea);
}
.has-wheat-background-color {
  background-color: var(--wheat);
}
.has-wheat-color {
  color: var(--wheat);
}
.has-antique-background-color {
  background-color: var(--antique);
}
.has-antique-color {
  color: var(--antique);
}
.has-cocoa-background-color {
  background-color: var(--cocoa);
}
.has-cocoa-color {
  color: var(--cocoa);
}
.has-swamp-background-color {
  background-color: var(--swamp);
}
.has-swamp-color {
  color: var(--swamp);
}
.has-dream-background-color {
  background-color: var(--dream);
}
.has-dream-color {
  color: var(--dream);
}
