:root {
  --shadow-color: 0deg 0% 0%;
  --box-shadow: 0.3px 0.5px 0.7px hsl(var(--shadow-color) / 0.34),
    0.8px 1.6px 2px -0.8px hsl(var(--shadow-color) / 0.34),
    2.1px 4.1px 5.2px -1.7px hsl(var(--shadow-color) / 0.34),
    5px 10px 12.6px -2.5px hsl(var(--shadow-color) / 0.34);
  --clr-black: hsl(0, 0%, 15%);
  --clr-pink: hsl(358, 99%, 71%);
  --clr-white: hsl(0, 0%, 100%);
  --clr-blue: hsl(197, 77%, 58%);
  --clr-yellow: hsl(37, 100%, 65%);
  --clr-green: hsl(174, 79%, 43%);
  --clr-green2: hsl(144, 76%, 39%);
  --clr-purple: hsl(328, 31%, 68%);
  --clr-red: hsl(358, 99%, 60%);
  --clr-blackalt: hsl(191, 52%, 12%);
  --clr-maroon: hsl(327, 44%, 22%);
  --clr-pinkalt: hsl(334, 77%, 58%);
  --clr-whitealt: hsl(0, 0%, 80%);
  --clr-teal: hsl(177, 78%, 55%);
  --clr-teald: hsl(177, 78%, 15%);
  --clr-yellowalt: hsl(59, 100%, 75%);
  --ff-heading: "Josefin Sans", sans-serif;
  --ff-body: "Montserrat", sans-serif;
  --border-gradient: linear-gradient(
    to right,
    hsl(0, 0%, 20%),
    hsl(197, 77%, 58%),
    hsl(328, 31%, 68%),
    hsl(174, 79%, 43%),
    hsl(358, 99%, 71%),
    hsl(37, 100%, 73%),
    hsl(358, 99%, 71%),
    hsl(174, 79%, 43%),
    hsl(328, 31%, 68%),
    hsl(197, 77%, 58%),
    hsl(0, 0%, 20%)
  );
}

@keyframes scaleHover {
  0% {
    transform: none;
  }
  100% {
    transform: scale(1.1);
  }
}
@keyframes waves {
  0%, 100% {
    clip-path: polygon(100% 0%, 0% 0%, 0% 62%, 1% 61.96%, 2% 61.83%, 3% 61.63%, 4% 61.34%, 5% 60.97%, 6% 60.53%, 7% 60.02%, 8% 59.43%, 9% 58.78%, 10% 58.07%, 11% 57.3%, 12% 56.48%, 13% 55.62%, 14% 54.72%, 15% 53.78%, 16% 52.82%, 17% 51.84%, 18% 50.85%, 19% 49.85%, 20% 48.85%, 21% 47.86%, 22% 46.89%, 23% 45.93%, 24% 45.01%, 25% 44.12%, 26% 43.27%, 27% 42.46%, 28% 41.71%, 29% 41.02%, 30% 40.39%, 31% 39.82%, 32% 39.33%, 33% 38.91%, 34% 38.57%, 35% 38.3%, 36% 38.12%, 37% 38.02%, 38% 38%, 39% 38.07%, 40% 38.22%, 41% 38.45%, 42% 38.76%, 43% 39.15%, 44% 39.62%, 45% 40.15%, 46% 40.76%, 47% 41.43%, 48% 42.16%, 49% 42.94%, 50% 43.77%, 51% 44.65%, 52% 45.56%, 53% 46.5%, 54% 47.47%, 55% 48.46%, 56% 49.45%, 57% 50.45%, 58% 51.45%, 59% 52.43%, 60% 53.4%, 61% 54.35%, 62% 55.27%, 63% 56.15%, 64% 56.98%, 65% 57.77%, 66% 58.5%, 67% 59.18%, 68% 59.79%, 69% 60.33%, 70% 60.81%, 71% 61.2%, 72% 61.52%, 73% 61.76%, 74% 61.92%, 75% 61.99%, 76% 61.98%, 77% 61.89%, 78% 61.72%, 79% 61.46%, 80% 61.13%, 81% 60.72%, 82% 60.23%, 83% 59.67%, 84% 59.05%, 85% 58.36%, 86% 57.61%, 87% 56.82%, 88% 55.97%, 89% 55.08%, 90% 54.16%, 91% 53.21%, 92% 52.23%, 93% 51.25%, 94% 50.25%, 95% 49.25%, 96% 48.25%, 97% 47.27%, 98% 46.31%, 99% 45.37%, 100% 44.47%);
  }
  50% {
    clip-path: polygon(100% 0%, 0% 0%, 0% 75%, 1% 74.94%, 2% 74.75%, 3% 74.43%, 4% 73.99%, 5% 73.42%, 6% 72.74%, 7% 71.94%, 8% 71.03%, 9% 70.01%, 10% 68.89%, 11% 67.67%, 12% 66.37%, 13% 64.97%, 14% 63.51%, 15% 61.97%, 16% 60.37%, 17% 58.73%, 18% 57.03%, 19% 55.3%, 20% 53.54%, 21% 51.77%, 22% 49.98%, 23% 48.2%, 24% 46.43%, 25% 44.67%, 26% 42.94%, 27% 41.25%, 28% 39.6%, 29% 38%, 30% 36.47%, 31% 35%, 32% 33.61%, 33% 32.31%, 34% 31.09%, 35% 29.97%, 36% 28.95%, 37% 28.05%, 38% 27.25%, 39% 26.57%, 40% 26%, 41% 25.57%, 42% 25.25%, 43% 25.06%, 44% 25%, 45% 25.07%, 46% 25.26%, 47% 25.58%, 48% 26.02%, 49% 26.59%, 50% 27.27%, 51% 28.08%, 52% 28.99%, 53% 30.01%, 54% 31.13%, 55% 32.35%, 56% 33.66%, 57% 35.05%, 58% 36.52%, 59% 38.06%, 60% 39.65%, 61% 41.3%, 62% 43%, 63% 44.73%, 64% 46.49%, 65% 48.26%, 66% 50.05%, 67% 51.83%, 68% 53.61%, 69% 55.36%, 70% 57.09%, 71% 58.78%, 72% 60.43%, 73% 62.03%, 74% 63.56%, 75% 65.03%, 76% 66.41%, 77% 67.72%, 78% 68.93%, 79% 70.05%, 80% 71.06%, 81% 71.97%, 82% 72.77%, 83% 73.44%, 84% 74%, 85% 74.44%, 86% 74.75%, 87% 74.94%, 88% 75%, 89% 74.93%, 90% 74.74%, 91% 74.41%, 92% 73.97%, 93% 73.4%, 94% 72.71%, 95% 71.91%, 96% 70.99%, 97% 69.97%, 98% 68.85%, 99% 67.63%, 100% 66.32%);
  }
}
.btn {
  padding: 0.55rem 1rem;
  background-color: var(--clr-black);
  border-radius: 0.25rem;
}
.btn i {
  color: white;
}
.btn:hover i, .btn:focus i {
  color: var(--clr-pink);
}

.btns-accessibility {
  display: flex;
  padding: 0.5rem;
  position: absolute;
  bottom: -9rem;
  right: 0;
  background-color: var(var(--clr-green));
  border-top-left-radius: 0.5rem;
  border-bottom-left-radius: 0.5rem;
}
.btns-accessibility button {
  position: relative;
  background-color: transparent;
}
.btns-accessibility button span {
  display: none;
  padding: 0.25rem;
  position: absolute;
  left: -10rem;
  top: 1rem;
  text-align: right;
  background-color: var(--clr-pink);
  color: var(--clr-black);
  box-shadow: var(--box-shadow);
}
.btns-accessibility button span:after {
  content: "";
  position: absolute;
  right: -0.75rem;
  top: 0;
  width: 0;
  height: 0;
  border-top: 15px solid transparent;
  border-left: 12px solid var(--clr-pink);
  border-bottom: 15px solid transparent;
}
.btns-accessibility button:first-child {
  margin-bottom: 0.5rem;
}
.btns-accessibility button:hover, .btns-accessibility button:focus {
  color: var(--clr-black);
}
.btns-accessibility button:hover span, .btns-accessibility button:focus span {
  display: flex;
}
.btns-accessibility i {
  font-size: clamp(1rem, 6vw, 1.75rem);
}

button {
  background-color: var(--clr-black);
  border-radius: 0.25rem;
  border: none;
  max-width: 4rem;
  padding: 10px 20px;
  color: var(--clr-white);
}

.btn-no-padding {
  padding: 0.25rem;
}

html,
body {
  box-sizing: border-box;
  font-size: 18px;
}

body {
  margin: 0;
  display: flex;
  flex-direction: column;
  font-family: var(--ff-body);
  font-weight: 400;
  line-height: 2rem;
}

main {
  flex: 1 0 auto;
  overflow-x: hidden;
}

.site-header {
  display: grid;
  grid-template-columns: auto 1fr auto;
  grid-template-rows: 100%;
  align-items: center;
  position: sticky;
  top: 0;
  z-index: 10;
  padding: 1rem 2rem;
  border-bottom: 0.5rem solid;
  box-shadow: var(--box-shadow);
  border-image: var(--border-gradient) 10;
}
@media (max-width: 767px) {
  .site-header {
    display: flex;
    flex-direction: column;
  }
}
.site-header img {
  width: 4.25rem;
  margin-right: 1rem;
  border: none;
}
@media (max-width: 767px) {
  .site-header img {
    width: 3rem;
  }
}
.site-header a {
  display: inline-block;
  overflow: hidden;
  padding: 0.5rem 1rem;
  text-decoration: none;
  color: --clr-white;
}
.site-header .site-icon {
  display: flex;
  justify-content: center;
  align-items: center;
  grid-row: 1;
  grid-column: 1/2;
  font-size: clamp(1.75rem, 6vw, 2rem);
}
.site-header .site-icon svg {
  width: 2rem;
  height: 2rem;
}
.site-header nav {
  grid-row: 1;
  grid-column: 2/3;
  justify-self: flex-end;
}
.site-header nav ul {
  display: flex;
  align-items: flex-end;
  margin: 0;
  list-style: none;
}
.site-header nav ul li {
  margin-right: 1rem;
  margin-bottom: 0;
  font-weight: 700;
}
.site-header nav ul li a {
  padding: clamp(0.556rem, 0.398rem + 0.97vw, 1rem);
  overflow: hidden;
}
.site-header nav ul li a::before, .site-header nav ul li a::after {
  content: "";
  width: 100%;
  height: 0.2rem;
  display: block;
  background: var(--clr-pink);
}
.site-header nav ul li a::before {
  content: "";
  bottom: 0;
  transform: translateX(-200%);
}
.site-header nav ul li a::after {
  content: "";
  top: 0;
  transform: translateX(200%);
}
.site-header nav ul li a:hover::before, .site-header nav ul li a:hover::after {
  transform: translateX(0);
  transition: all 0.6s ease-in-out;
}

footer {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  padding: 1rem;
  text-align: center;
}
footer p {
  margin: 0 0 0.5rem 0;
}
@media (max-width: 767px) {
  footer {
    flex-direction: column;
    align-items: center;
  }
}

.social-media-list {
  display: flex;
  list-style-type: none;
  margin: 0;
  padding-left: 0;
}
.social-media-list svg {
  height: 2.75rem;
  fill: var(--clr-blue);
}
.social-media-list li {
  margin-bottom: 0;
}
.social-media-list li:not(:last-child) {
  margin-right: 1rem;
}
.social-media-list li a:hover svg, .social-media-list li a:focus svg {
  fill: var(--clr-pink);
}

.banner {
  min-height: 12rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  position: relative;
  padding: clamp(1rem, 0.614rem + 2.18vw, 2rem);
  text-align: center;
  overflow-x: hidden;
}

.layout {
  display: flex;
  flex-direction: column;
  align-items: center;
}
.layout .inner {
  max-width: 1900px;
  width: 95vw;
  padding: clamp(1rem, 0.636rem + 1.82vw, 2rem);
}

.layout-post {
  padding: clamp(1rem, 0.636rem + 1.82vw, 2rem);
}

.layout-subpage article {
  display: flex;
  flex-direction: column;
}
.layout-subpage article:only-child {
  max-width: 20rem;
}

.layout-home .article-wrapper {
  margin: 1rem;
  justify-content: center;
}

.row {
  display: flex;
}
.row pre {
  margin-left: 2rem;
}
@media (max-width: 767px) {
  .row {
    display: flex;
    flex-direction: column;
  }
}

.list-ui {
  display: flex;
  list-style-type: none !important;
  padding-left: 0.5rem;
}
.list-ui li {
  padding: 0.25rem;
}
.list-ui li:not(:nth-child(1)) {
  margin-left: 1rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  color: var(--clr-teal);
  font-family: var(--ff-heading);
  line-height: 1;
  margin: 1rem 0 0 0;
}
h1 ~ p,
h2 ~ p,
h3 ~ p,
h4 ~ p,
h5 ~ p,
h6 ~ p {
  margin-top: 0.25rem;
}

h1 {
  font-size: clamp(2.5rem, 6vw, 3.5rem);
}

h2 {
  font-size: clamp(2.25rem, 6vw, 3rem);
}

h3 {
  font-size: clamp(2rem, 6vw, 2.25rem);
}

h4 {
  font-size: clamp(1.75rem, 6vw, 2rem);
}

h5 {
  font-size: clamp(1.5rem, 6vw, 1.5rem);
}

h6 {
  font-size: clamp(1.25rem, 6vw, 1.25rem);
}

a {
  font-weight: 700;
}

ul,
ol {
  margin-bottom: 2rem;
}
ul.taglist,
ol.taglist {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  list-style-type: none;
  padding-left: 0;
}
ul li,
ol li {
  margin-bottom: 1rem;
}
ul li > ul,
ul li ol,
ol li > ul,
ol li ol {
  margin-top: 1rem;
}
ul li > pre,
ol li > pre {
  margin-top: 0.75rem;
}

dl dt {
  font-weight: 700;
}

.list-columns {
  width: 100%;
}
@media (min-width: 767px) {
  .list-columns {
    width: 45rem;
    height: 15rem;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
  }
}

p {
  margin-bottom: 1.75rem;
}

.table, table {
  margin-bottom: 1rem;
  border-collapse: collapse;
}
.table thead, table thead {
  background-color: var(--clr-green);
  color: var(--clr-black);
}
.table th,
.table td, table th,
table td {
  padding: 0.5rem;
  border: solid var(--clr-black) 2px;
}
.table tbody, table tbody {
  background-color: var(--clr-white);
  color: var(--clr-black);
}

.table-checked tr td:not(:first-child) {
  text-align: center;
}

.table-complex {
  border-collapse: collapse;
  margin-bottom: 1rem;
}
.table-complex th {
  background-color: var(--clr-green);
  color: var(--clr-black);
}
.table-complex th, .table-complex td {
  border: 0.2rem solid var(--clr-black);
  padding: 0.25rem;
}

.table-colgroup {
  margin-bottom: 1rem;
}
.table-colgroup thead {
  background-color: transparent !important;
}
.table-colgroup td {
  color: --clr-white;
}
.table-colgroup .theader {
  background-color: var(--clr-green);
}

.callout {
  padding: 1rem;
  margin: 1rem 0;
  background-color: hsl(328deg, 31%, 75%);
  border-radius: 0.25rem;
  box-shadow: var(--box-shadow);
  color: var(--clr-black);
}

.example {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  padding: 1rem;
  margin-bottom: 1rem;
  background-color: var(--clr-white);
  border-radius: 0.25rem;
  box-shadow: var(--box-shadow);
  color: var(--clr-black);
}
.example img {
  max-width: 10rem;
  border: 0;
}
.example pre {
  padding: 0.5rem;
  background-color: hsl(0deg, 0%, 8%);
  color: var(--clr-white);
}
.example pre code {
  background-color: hsl(0deg, 0%, 8%);
}
.example a,
.example p > a {
  color: hsl(328deg, 31%, 20%);
}
.example a:hover, .example a:focus,
.example p > a:hover,
.example p > a:focus {
  color: hsl(197deg, 77%, 35%);
  text-decoration: underline !important;
}
.example a.no-underline-border,
.example p > a.no-underline-border {
  text-decoration: none;
  padding: 0.25rem;
}
.example a.no-underline-border:hover, .example a.no-underline-border:focus,
.example p > a.no-underline-border:hover,
.example p > a.no-underline-border:focus {
  border: 1px solid hsl(197deg, 77%, 35%);
}
.example a.low-contrast-link,
.example p > a.low-contrast-link {
  color: var(--clr-yellow);
  padding: 0.25rem;
}
.example a.low-contrast-link:hover, .example a.low-contrast-link:focus,
.example p > a.low-contrast-link:hover,
.example p > a.low-contrast-link:focus {
  border: 1px solid hsl(37deg, 100%, 73%);
}
.example h2,
.example h3,
.example h4,
.example h5,
.example h6 {
  color: var(--clr-teald);
}
.example h2 {
  font-size: 2.25rem;
}
.example h3 {
  color: hsl(177deg, 55%, 25%);
  margin-top: 0;
  font-size: 2rem;
}
.example .table th,
.example .table td {
  border: 0.15rem solid var(--clr-black);
}

#heading-bad-example {
  color: var(--clr-teald);
  font-size: 2.25rem;
  font-weight: 700;
  font-family: var(--ff-heading);
  margin-bottom: 1rem;
}

.low-contrast {
  padding: 0.5rem;
  background-color: var(--clr-yellow);
  border-radius: 0.25rem;
  color: var(--clr-pink);
}

.low-contrast-radio label {
  display: inline-block;
}
.low-contrast-radio input[type=radio] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  padding: 0.5rem;
  position: relative;
  border-radius: 50%;
  border: 1px solid hsl(0deg, 0%, 70%);
}
.low-contrast-radio input[type=radio]:before {
  content: "";
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  left: 0.25rem;
  top: 0.25rem;
  background-color: var(--clr-white);
  border-radius: 50%;
}
.low-contrast-radio input[type=radio]:checked:before {
  background-color: hsl(0deg, 0%, 70%);
}

.example-wrapper {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: center;
  margin-top: 2rem;
}
.example-wrapper .example {
  width: 30%;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.example-wrapper .example img {
  max-width: 100%;
  max-height: 12rem;
  margin-bottom: 1rem;
}
@media (max-width: 1200px) {
  .example-wrapper .example {
    width: 100%;
  }
}

.iframe-wrapper {
  width: 90vw;
  max-width: 55rem;
}
.iframe-wrapper iframe {
  width: 100%;
  height: 100%;
  aspect-ratio: 16/9;
}

.float-right {
  float: right;
  margin-left: 2rem;
}

.skip-content {
  width: 26em;
  display: block;
  position: absolute;
  left: -1000em;
  top: 0;
  padding: 5px;
  background: #333;
  color: #fff;
  font-weight: bold;
  text-decoration: none;
}

.skip-content:focus {
  left: 0;
  z-index: 5000;
  color: var(--clr-black) !important;
  background-color: var(--clr-pink);
  border: --clr-blue solid 0.1rem;
  border-top-right-radius: 0.25rem;
  border-bottom-right-radius: 0.25rem;
  text-decoration: underline;
}

.visually-hidden {
  position: absolute;
  clip: rect(0 0 0 0);
  border: 0;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  padding: 0;
  width: 1px;
  white-space: nowrap;
}

.checked {
  color: var(--clr-green) 2;
}

.unchecked {
  color: --clr-red;
}

.theme-dark {
  background-color: var(--clr-black);
  color: var(--clr-white);
}
.theme-dark .site-header {
  background-color: var(--clr-black);
  color: var(--clr-white);
}
.theme-dark .site-header a:visited {
  color: var(--clr-white);
}
.theme-dark .site-header a.active {
  color: var(--clr-yellow);
}
.theme-dark .site-header a:hover, .theme-dark .site-header a:focus {
  color: var(--clr-yellow);
}
.theme-dark .banner {
  background: hsl(0deg, 0%, 25%);
}
.theme-dark article a,
.theme-dark article a:visited {
  color: var(--clr-black);
}
.theme-dark article a p,
.theme-dark article a:visited p {
  font-weight: 400;
}
.theme-dark article a:hover, .theme-dark article a:focus,
.theme-dark article a:visited:hover,
.theme-dark article a:visited:focus {
  color: var(--clr-black);
}
.theme-dark article a.post-tag,
.theme-dark article a:visited.post-tag {
  color: var(--clr-yellow);
}
.theme-dark article a.post-tag:hover, .theme-dark article a.post-tag:focus,
.theme-dark article a:visited.post-tag:hover,
.theme-dark article a:visited.post-tag:focus {
  color: var(--clr-pink);
}
.theme-dark a,
.theme-dark a:visited {
  color: var(--clr-yellow);
}
.theme-dark a:hover, .theme-dark a:focus,
.theme-dark a:visited:hover,
.theme-dark a:visited:focus {
  color: var(--clr-pink);
}
.theme-dark .btn-bad {
  color: var(--clr-blackalt);
  font-size: 1.25rem;
  text-decoration: none;
}
.theme-dark .btn-good {
  color: hsl(327deg, 44%, 22%);
  border: 1px solid hsl(327deg, 44%, 22%);
  border-radius: 0.25rem;
  padding: 0.25rem;
  text-decoration: none;
}
.theme-dark .example a {
  color: var(--clr-pinkalt);
}

.theme-light {
  background-color: var(--clr-white);
  color: var(--clr-black);
}
.theme-light .site-header {
  background-color: var(--clr-white);
  color: var(--clr-black);
}
.theme-light .site-header a:visited {
  color: var(--clr-black);
}
.theme-light .site-header a:hover, .theme-light .site-header a:focus {
  color: var(--clr-pink);
}
.theme-light .banner {
  background: var(--clr-whitealt);
}
.theme-light .example {
  background-color: var(--clr-black);
  color: var(--clr-white);
}
.theme-light .example pre,
.theme-light .example code {
  background-color: var(--clr-white);
  color: var(--clr-black);
}
.theme-light a,
.theme-light a:visited {
  color: var(--clr-pinkalt);
}
.theme-light a:hover, .theme-light a:focus,
.theme-light a:visited:hover,
.theme-light a:visited:focus {
  color: var(--c);
}
.theme-light .theme {
  background-color: var(--clr-pink);
  color: var(--clr-black);
}
.theme-light .theme:hover, .theme-light .theme:focus {
  opacity: 0.98;
}
.theme-light button span {
  background-color: var(--clr-black);
  color: var(--clr-white);
}
.theme-light button span:after {
  border-left-color: var(--clr-black);
}
.theme-light.font-lg button span:after {
  right: -1rem;
  border-top: 19.75px solid transparent;
  border-left: 16px solid var(--clr-black);
  border-bottom: 19.75px solid transparent;
}

.font-lg {
  line-height: 1rem;
}
.font-lg h1 {
  font-size: clamp(3.5rem, 6vw, 4.5rem);
}
.font-lg h2 {
  font-size: clamp(3.25rem, 6vw, 4rem);
}
.font-lg h3 {
  font-size: clamp(3rem, 6vw, 3.5rem);
}
.font-lg h4 {
  font-size: clamp(2.75rem, 6vw, 3rem);
}
.font-lg h5 {
  font-size: clamp(2.5rem, 6vw, 2.5rem);
}
.font-lg h6 {
  font-size: clamp(2.25rem, 6vw, 2.25rem);
}
.font-lg p {
  font-size: clamp(2rem, 6vw, 2.25rem);
}
.font-lg ul,
.font-lg ol {
  font-size: clamp(2rem, 6vw, 2rem);
}
.font-lg article h2 {
  font-size: clamp(2.75rem, 6vw, 2.5rem);
}
.font-lg article p {
  font-size: clamp(2rem, 6vw, 2.25rem);
}
.font-lg article time {
  font-size: clamp(1.75rem, 6vw, 1.75rem);
}
.font-lg article .taglist a {
  font-size: clamp(1.5rem, 6vw, 1.5rem);
}
.font-lg article .tags h2 {
  font-size: clamp(2.25rem, 6vw, 2.5rem);
}
.font-lg article .tags h3 {
  font-size: clamp(1.5rem, 6vw, 1.75rem);
}
.font-lg article pre {
  font-size: clamp(1.75rem, 6vw, 2rem);
}
.font-lg .social-media-list svg {
  height: 4rem;
}
.font-lg nav a {
  font-size: clamp(2rem, 6vw, 2rem);
}
.font-lg button {
  max-width: 8rem;
}
.font-lg button i {
  font-size: clamp(2rem, 6vw, 2rem);
}
.font-lg button span {
  padding: 0.3rem;
  left: -13rem;
  font-size: clamp(1.5rem, 6vw, 1.5rem);
}
.font-lg button span:after {
  right: -1rem;
  border-top: 19.75px solid transparent;
  border-left: 16px solid var(--clr-pink);
  border-bottom: 19.75px solid transparent;
}
.font-lg button.font-size {
  background-color: var(--clr-pink);
  color: var(--clr-black);
}
.font-lg button.font-size:hover, .font-lg button.font-size:focus {
  opacity: 0.98;
}

img {
  max-width: 20rem;
  height: auto;
}

figure {
  margin: 0;
  position: relative;
}
figure figcaption {
  width: 100%;
  padding: 0.25rem;
  position: absolute;
  bottom: 0.25rem;
  background-color: rgba(var(--clr-black), 0.9);
  text-align: center;
  font-size: clamp(0.25rem, 1vw, 0.25rem);
  font-style: italic;
}

input[type=radio] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 1rem;
  height: 1rem;
  padding: 0.5rem;
  position: relative;
  border-radius: 50%;
  border: 1px solid var(--clr-black);
}
input[type=radio]:before {
  content: "";
  position: absolute;
  width: 0.5rem;
  height: 0.5rem;
  left: 0.25rem;
  top: 0.25rem;
  background-color: --clr-white;
  border-radius: 50%;
}
input[type=radio]:checked:before {
  background-color: var(--clr-black);
}

.breadcrumbs {
  width: 100%;
  margin: 0 auto;
}
.breadcrumbs ul {
  display: flex;
  flex-wrap: wrap;
  padding-left: 0;
}
.breadcrumbs li {
  list-style: none;
  margin-bottom: 2rem;
}

.breadcrumb {
  display: flex;
  background: var(--clr-pinkalt);
  position: relative;
  color: var(--clr-black);
  font-weight: 700;
}
.breadcrumb:first-of-type {
  padding: 0.75rem 1.5rem 0.75rem;
  border-top-left-radius: 0.25rem;
  border-bottom-left-radius: 0.25rem;
}
.breadcrumb:not(:first-of-type) {
  padding: 0.75rem 3rem;
  border-radius: 0.25rem;
}
.breadcrumb:not(.breadcrumb-current) {
  position: relative;
}
.breadcrumb:not(.breadcrumb-current)::before {
  content: "";
  position: absolute;
  top: 0;
  right: -0.75rem;
  border-bottom: 1.75rem solid transparent;
  border-left: 1.75rem solid var(--clr-pinkalt);
  border-top: 1.75rem solid transparent;
  z-index: 2;
}
.breadcrumb:not(.breadcrumb-current)::after {
  content: "";
  position: absolute;
  top: -1rem;
  right: -1.75rem;
  border-bottom: 2.75rem solid transparent;
  border-left: 2.75rem solid var(--clr-black);
  border-top: 2.75rem solid transparent;
  z-index: 1;
}
.breadcrumb:not(.breadcrumb-current):hover, .breadcrumb:not(.breadcrumb-current):focus {
  background-color: var(--clr-yellow);
}
.breadcrumb:not(.breadcrumb-current):hover::before, .breadcrumb:not(.breadcrumb-current):focus::before {
  border-left-color: var(--clr-yellow);
}
.breadcrumb.breadcrumb-current {
  background: var(--clr-blue);
}
.breadcrumb a,
.breadcrumb a:visited {
  color: var(--clr-black);
  text-decoration: none;
}
.breadcrumb a:hover, .breadcrumb a:focus,
.breadcrumb a:visited:hover,
.breadcrumb a:visited:focus {
  color: var(--clr-black);
}

.article-wrapper {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}
.article-wrapper article {
  min-height: 5rem;
  max-width: 100%;
  flex: 1 0 auto;
  padding: clamp(1rem, 0.818rem + 0.91vw, 1.5rem);
  margin: clamp(1rem, 0.818rem + 0.91vw, 1.5rem) clamp(1rem, 0.818rem + 0.91vw, 1.5rem) clamp(1rem, 0.818rem + 0.91vw, 1.5rem) 0;
  position: relative;
  background-color: var(--clr-white);
  box-shadow: var(--box-shadow);
  border-radius: 0.25rem;
  color: var(--clr-black);
  transition: all 0.2s ease-in-out;
}
@media (max-width: 767px) {
  .article-wrapper article {
    margin: clamp(1rem, 0.818rem + 0.91vw, 1.5rem) 0;
  }
}
@media (min-width: 1200px) {
  .article-wrapper article {
    max-width: calc(33% - 5rem);
  }
}
.article-wrapper article a {
  text-decoration: none;
  color: var(--clr-black);
}
.article-wrapper article a:first-of-type {
  min-height: 100%;
}
.article-wrapper article:nth-child(5n+1) header {
  margin: clamp(-1.5rem, -0.818rem - 0.91vw, -1rem) clamp(-1.5rem, -0.818rem - 0.91vw, -1rem) 2.5rem;
  background: var(--clr-blue);
  border-radius: 0.25rem;
  position: relative;
}
.article-wrapper article:nth-child(5n+1) header:after {
  content: "";
  width: 100%;
  height: 3rem;
  position: absolute;
  bottom: -2.5rem;
  left: 0;
  border-radius: 0.25rem;
  background: var(--clr-blue);
}
.article-wrapper article:nth-child(5n+2) header {
  margin: clamp(-1.5rem, -0.818rem - 0.91vw, -1rem) clamp(-1.5rem, -0.818rem - 0.91vw, -1rem) 2.5rem;
  background: var(--clr-pink);
  border-radius: 0.25rem;
  position: relative;
}
.article-wrapper article:nth-child(5n+2) header:after {
  content: "";
  width: 100%;
  height: 3rem;
  position: absolute;
  bottom: -2.5rem;
  left: 0;
  border-radius: 0.25rem;
  background: var(--clr-pink);
}
.article-wrapper article:nth-child(5n+3) header {
  margin: clamp(-1.5rem, -0.818rem - 0.91vw, -1rem) clamp(-1.5rem, -0.818rem - 0.91vw, -1rem) 2.5rem;
  background: var(--clr-green);
  border-radius: 0.25rem;
  position: relative;
}
.article-wrapper article:nth-child(5n+3) header:after {
  content: "";
  width: 100%;
  height: 3rem;
  position: absolute;
  bottom: -2.5rem;
  left: 0;
  border-radius: 0.25rem;
  background: var(--clr-green);
}
.article-wrapper article:nth-child(5n+4) header {
  margin: clamp(-1.5rem, -0.818rem - 0.91vw, -1rem) clamp(-1.5rem, -0.818rem - 0.91vw, -1rem) 2.5rem;
  background: var(--clr-yellow);
  border-radius: 0.25rem;
  position: relative;
}
.article-wrapper article:nth-child(5n+4) header:after {
  content: "";
  width: 100%;
  height: 3rem;
  position: absolute;
  bottom: -2.5rem;
  left: 0;
  border-radius: 0.25rem;
  background: var(--clr-yellow);
}
.article-wrapper article:nth-child(5n+5) header {
  margin: clamp(-1.5rem, -0.818rem - 0.91vw, -1rem) clamp(-1.5rem, -0.818rem - 0.91vw, -1rem) 2.5rem;
  background: var(--clr-purple);
  border-radius: 0.25rem;
  position: relative;
}
.article-wrapper article:nth-child(5n+5) header:after {
  content: "";
  width: 100%;
  height: 3rem;
  position: absolute;
  bottom: -2.5rem;
  left: 0;
  border-radius: 0.25rem;
  background: var(--clr-purple);
}
.article-wrapper article:first-of-type {
  margin-left: 0;
}
.article-wrapper article:only-child {
  margin-right: 0;
}
.article-wrapper article header {
  padding: 1rem;
  margin-bottom: 2.5rem;
  margin-left: clamp(-1rem, -1.091rem + 0.45vw, -0.75rem);
  margin-top: clamp(-1rem, -1.091rem + 0.45vw, -0.75rem);
  margin-right: clamp(-1rem, -1.091rem + 0.45vw, -0.75rem);
}
.article-wrapper article header::after {
  clip-path: polygon(100% 0%, 0% 0%, 0% 62%, 1% 61.96%, 2% 61.83%, 3% 61.63%, 4% 61.34%, 5% 60.97%, 6% 60.53%, 7% 60.02%, 8% 59.43%, 9% 58.78%, 10% 58.07%, 11% 57.3%, 12% 56.48%, 13% 55.62%, 14% 54.72%, 15% 53.78%, 16% 52.82%, 17% 51.84%, 18% 50.85%, 19% 49.85%, 20% 48.85%, 21% 47.86%, 22% 46.89%, 23% 45.93%, 24% 45.01%, 25% 44.12%, 26% 43.27%, 27% 42.46%, 28% 41.71%, 29% 41.02%, 30% 40.39%, 31% 39.82%, 32% 39.33%, 33% 38.91%, 34% 38.57%, 35% 38.3%, 36% 38.12%, 37% 38.02%, 38% 38%, 39% 38.07%, 40% 38.22%, 41% 38.45%, 42% 38.76%, 43% 39.15%, 44% 39.62%, 45% 40.15%, 46% 40.76%, 47% 41.43%, 48% 42.16%, 49% 42.94%, 50% 43.77%, 51% 44.65%, 52% 45.56%, 53% 46.5%, 54% 47.47%, 55% 48.46%, 56% 49.45%, 57% 50.45%, 58% 51.45%, 59% 52.43%, 60% 53.4%, 61% 54.35%, 62% 55.27%, 63% 56.15%, 64% 56.98%, 65% 57.77%, 66% 58.5%, 67% 59.18%, 68% 59.79%, 69% 60.33%, 70% 60.81%, 71% 61.2%, 72% 61.52%, 73% 61.76%, 74% 61.92%, 75% 61.99%, 76% 61.98%, 77% 61.89%, 78% 61.72%, 79% 61.46%, 80% 61.13%, 81% 60.72%, 82% 60.23%, 83% 59.67%, 84% 59.05%, 85% 58.36%, 86% 57.61%, 87% 56.82%, 88% 55.97%, 89% 55.08%, 90% 54.16%, 91% 53.21%, 92% 52.23%, 93% 51.25%, 94% 50.25%, 95% 49.25%, 96% 48.25%, 97% 47.27%, 98% 46.31%, 99% 45.37%, 100% 44.47%);
}
.article-wrapper article h2 {
  margin: 0;
  font-size: clamp(1.75rem, 6vw, 1.5rem);
  color: var(--clr-black);
}
.article-wrapper article time {
  font-weight: 700;
}
.article-wrapper article p {
  margin-bottom: 3rem;
  font-size: clamp(1rem, 6vw, 1.25rem);
}
.article-wrapper article:hover, .article-wrapper article:focus {
  min-height: 15rem;
}
.article-wrapper article:hover .article-header, .article-wrapper article:focus .article-header {
  min-height: 5rem;
  transition: min-height 0.75s;
}
.article-wrapper article:hover .article-header::after, .article-wrapper article:focus .article-header::after {
  animation: waves 2.5s ease-in-out infinite;
}
.article-wrapper article:hover .content, .article-wrapper article:focus .content {
  height: auto;
  opacity: 1;
  position: static;
}
.article-wrapper article:hover:nth-child(5n+1), .article-wrapper article:focus:nth-child(5n+1) {
  box-shadow: var(--clr-blue);
  filter: drop-shadow(0 0 0.6rem var(--clr-blue));
}
.article-wrapper article:hover:nth-child(5n+2), .article-wrapper article:focus:nth-child(5n+2) {
  box-shadow: var(--clr-pink);
  filter: drop-shadow(0 0 0.6rem var(--clr-pink));
}
.article-wrapper article:hover:nth-child(5n+3), .article-wrapper article:focus:nth-child(5n+3) {
  box-shadow: var(--clr-green);
  filter: drop-shadow(0 0 0.6rem var(--clr-green));
}
.article-wrapper article:hover:nth-child(5n+4), .article-wrapper article:focus:nth-child(5n+4) {
  box-shadow: var(--clr-yellow);
  filter: drop-shadow(0 0 0.6rem var(--clr-yellow));
}
.article-wrapper article:hover:nth-child(5n+5), .article-wrapper article:focus:nth-child(5n+5) {
  box-shadow: var(--clr-purple);
  filter: drop-shadow(0 0 0.6rem var(--clr-purple));
}
@media (max-width: 1200px) {
  .article-wrapper article {
    display: block;
  }
}
.article-wrapper .tags {
  display: flex;
  align-items: center;
}
.article-wrapper .tags h2 {
  margin-top: 0;
  margin-right: clamp(0.25rem, 0.159rem + 0.45vw, 0.5rem);
  font-size: clamp(1.25rem, 6vw, 1.5rem);
}
.article-wrapper .tags h3 {
  font-size: clamp(1rem, 6vw, 1.25rem);
  margin-top: 0;
  margin-right: clamp(0.25rem, 0.159rem + 0.45vw, 0.5rem);
  margin-bottom: 0;
}
.article-wrapper .taglist {
  display: flex;
  list-style-type: none;
  flex-wrap: wrap;
  padding: 0;
  margin: 0;
  font-style: italic;
  text-transform: capitalize;
}
.article-wrapper .taglist::marker {
  display: none;
}
.article-wrapper .taglist li {
  margin-bottom: 0;
  margin-right: clamp(0.25rem, 0.159rem + 0.45vw, 0.5rem);
}
.article-wrapper .taglist li:not(:last-child):after {
  content: ",";
}
@media (max-width: 1200px) {
  .article-wrapper {
    display: block;
  }
}

kbd {
  padding: 0.25rem 0.5rem;
  margin: 0 0.25rem;
  background: var(--clr-white);
  box-shadow: var(--box-shadow);
  color: var(--clr-black);
  font-weight: 700;
  text-align: center;
}

pre {
  display: flex;
  flex-direction: column;
  padding: 1rem;
  margin: 0;
  background-color: var(--clr-white);
  border-radius: 0.25rem;
  box-shadow: var(--box-shadow);
  color: var(--clr-black);
  font-size: clamp(0.75rem, 6vw, 1rem);
}
pre code {
  white-space: pre-wrap !important;
}

.pagination {
  display: flex;
  justify-content: center;
  align-items: center;
}
.pagination a.prev {
  margin-right: 1rem;
  margin-left: -1rem;
}
.pagination a.next {
  margin-left: 1rem;
}

.content {
  margin-bottom: clamp(2rem, 2rem + 0vw, 2rem);
}

@keyframes shake {
  30% {
    transform: translateX(-0.1rem) scaleX(0.99);
    transform-origin: 0%;
  }
  40% {
    transform: translateX(0.1rem) scaleX(0.99);
    transform-origin: 100%;
  }
  60% {
    transform: translateX(-0.1rem) scaleX(0.99);
    transform-origin: 0%;
  }
  80% {
    transform: translateX(0.1rem) scaleX(0.99);
    transform-origin: 100%;
  }
  100% {
    transform: translateX(0) scaleX(1);
  }
}

/*# sourceMappingURL=styles.css.map */