html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font-size: 100%;
  font: inherit;
  vertical-align: baseline;
}

article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

body {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

blockquote:before, blockquote:after, q:before, q:after {
  content: "";
  content: none;
}

h1, h2, h3, h4, h5, strong, blockquote {
  font-weight: bold;
}

em {
  font-style: italic;
}

.type-display, #listing main .container .texts h1, #component .presentation .content .container h1, #topic .presentation .content .container h1, #default .presentation .content .container h1, #home .presentation .content .container .texts h1 {
  font-weight: 600;
  font-size: 3.5rem;
  line-height: 90%;
}
@media (min-width: 64rem) {
  .type-display, #listing main .container .texts h1, #component .presentation .content .container h1, #topic .presentation .content .container h1, #default .presentation .content .container h1, #home .presentation .content .container .texts h1 {
    font-weight: 600;
    font-size: 6rem;
    line-height: 90%;
  }
}

.type-headline-1, #home main section .container h2 {
  font-weight: 700;
  font-size: 3rem;
  line-height: 90%;
}
@media (min-width: 64rem) {
  .type-headline-1, #home main section .container h2 {
    font-weight: 700;
    font-size: 4rem;
    line-height: 90%;
  }
}

.type-headline-2, #home #about .container .content h3 {
  font-weight: 600;
  font-size: 2.5rem;
  line-height: 100%;
}
@media (min-width: 64rem) {
  .type-headline-2, #home #about .container .content h3 {
    font-weight: 600;
    font-size: 3.5rem;
    line-height: 100%;
  }
}

.type-headline-3, .post .body h2, .email-signup .content h2 {
  font-weight: 600;
  font-size: 2rem;
  line-height: 100%;
}
@media (min-width: 64rem) {
  .type-headline-3, .post .body h2, .email-signup .content h2 {
    font-weight: 600;
    font-size: 3rem;
    line-height: 100%;
  }
}

.type-overview-default, #home .presentation .content .container .texts .overview {
  font-weight: 400;
  font-size: 1.25rem;
  line-height: 135%;
}
@media (min-width: 64rem) {
  .type-overview-default, #home .presentation .content .container .texts .overview {
    font-weight: 400;
    font-size: 1.5rem;
    line-height: 135%;
  }
}

.type-overview-emphasis, .post .overview, #listing main .container .texts .overview, #default main .container .post .overview {
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 135%;
}
@media (min-width: 64rem) {
  .type-overview-emphasis, .post .overview, #listing main .container .texts .overview, #default main .container .post .overview {
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 135%;
  }
}

.type-title-1, .post .body h3, #default main .container .post h3, .large-block .texts .title, #home main #guidelines ul li a .texts .title {
  font-weight: 600;
  font-size: 1.75rem;
  line-height: 115%;
}
@media (min-width: 64rem) {
  .type-title-1, .post .body h3, #default main .container .post h3, .large-block .texts .title, #home main #guidelines ul li a .texts .title {
    font-weight: 600;
    font-size: 2rem;
    line-height: 115%;
  }
}

.type-title-2, .post .body blockquote, .post .body h4, .topic-item .title, #home main #articles ul a.mobile .title, .small-block .title, #home main #tutorials ul li > a .title, #home main #components ul a .title, #home main #articles ul a.desktop .title {
  font-weight: 500;
  font-size: 1.25rem;
  line-height: 115%;
}
@media (min-width: 64rem) {
  .type-title-2, .post .body blockquote, .post .body h4, .topic-item .title, #home main #articles ul a.mobile .title, .small-block .title, #home main #tutorials ul li > a .title, #home main #components ul a .title, #home main #articles ul a.desktop .title {
    font-weight: 500;
    font-size: 1.5rem;
    line-height: 115%;
  }
}

.type-description, .large-block .texts .description, #home main #guidelines ul li a .texts .description {
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 135%;
}

.type-text, .post .body p, .post .body ul, .post .body pre, .email-signup #mlb2-14152630 .ml-form-align-center form .ml-form-formContent input, .email-signup .content .texts .description, #default main .container .post p, #default main .container .post ul, #default main .container .post li {
  font-weight: 400;
  font-size: 1.125rem;
  line-height: 145%;
  letter-spacing: 0.01em;
}
@media (min-width: 64rem) {
  .type-text, .post .body p, .post .body ul, .post .body pre, .email-signup #mlb2-14152630 .ml-form-align-center form .ml-form-formContent input, .email-signup .content .texts .description, #default main .container .post p, #default main .container .post ul, #default main .container .post li {
    font-weight: 400;
    font-size: 1.25rem;
    line-height: 145%;
  }
}

.type-code, .post .body pre {
  font-weight: 400;
  font-size: 1rem;
  line-height: 145%;
}

.type-caption, .post .body figure figcaption, .post .body blockquote footer, footer .text, #default main .container .post figure figcaption {
  font-weight: 400;
  font-size: 1rem;
  line-height: 135%;
}

.type-label-1, .siblings .title, header nav .title, .email-signup .content .texts .note, #component main .container .post .tabs nav a, .button.medium, .email-signup #mlb2-14152630 .ml-form-align-center form .ml-form-embedSubmit button.medium {
  font-weight: 600;
  font-size: 1.25rem;
  line-height: 115%;
}

.type-label-2, .toc .title, .post .author .content .texts .name, footer .container ul li a.mobile, .email-signup #mlb2-14152630 .ml-form-align-center .ml-form-successContent p, .menu-item.medium, .aside-menu-item.medium, .button.small, .email-signup #mlb2-14152630 .ml-form-align-center form .ml-form-embedSubmit button.small {
  font-weight: 500;
  font-size: 1.125rem;
  line-height: 115%;
}

.type-label-3, .post .body figure.examples .stack .single-example .type, .post .body table tr th, .post .author .content .texts a, .menu-item.small, .aside-menu-item.small {
  font-weight: 500;
  font-size: 1rem;
  line-height: 115%;
}

.guidelines-1-solid {
  background: #FAECFD;
}

.guidelines-2-solid {
  background: #DAF6F5;
}

.guidelines-3-solid {
  background: #FEEDEF;
}

.guidelines-1 {
  background: linear-gradient(#FAECFD, white);
}

.guidelines-2 {
  background: linear-gradient(#DAF6F5, white);
}

.guidelines-3 {
  background: linear-gradient(#FEEDEF, white);
}

.articles-1 {
  background: linear-gradient(45deg, #761B82, #436FEA);
}

.articles-2 {
  background: linear-gradient(45deg, #8D0E37, #FABD00);
}

.articles-3 {
  background: linear-gradient(45deg, #00504E, #436FEA);
}

.articles-4 {
  background: linear-gradient(45deg, #1F4096, #E51D5F);
}

.components-1 {
  background: linear-gradient(45deg, #FAECFD, #EEF0FD);
}

.components-2 {
  background: linear-gradient(45deg, #FFF1BC, #FEEDEF);
}

.components-3 {
  background: linear-gradient(45deg, #FEEDEF, #EEF0FD);
}

.components-4 {
  background: linear-gradient(45deg, #EEF0FD, #DAF6F5);
}

.button, .email-signup #mlb2-14152630 .ml-form-align-center form .ml-form-embedSubmit button {
  display: flex;
  width: fit-content;
  border-radius: 99rem;
  text-decoration: none;
  justify-content: center;
}
.button.medium, .email-signup #mlb2-14152630 .ml-form-align-center form .ml-form-embedSubmit button.medium {
  padding: 1rem 1.5rem;
}
.button.small, .email-signup #mlb2-14152630 .ml-form-align-center form .ml-form-embedSubmit button.small {
  padding: 1rem;
}
.button.primary, .email-signup #mlb2-14152630 .ml-form-align-center form .ml-form-embedSubmit button.primary {
  box-shadow: 0 0 0 5px rgba(255, 255, 255, 0.25);
}
.button.primary.default, .email-signup #mlb2-14152630 .ml-form-align-center form .ml-form-embedSubmit button.primary.default {
  color: white;
  background: #E51D5F;
}
.button.primary.contrast, .email-signup #mlb2-14152630 .ml-form-align-center form .ml-form-embedSubmit button.primary.contrast {
  color: #8D0E37;
  background: linear-gradient(white, #FEEDEF);
}
.button.secondary.contrast, .email-signup #mlb2-14152630 .ml-form-align-center form .ml-form-embedSubmit button.secondary.contrast {
  color: white;
  border: 2px solid rgba(255, 255, 255, 0.15);
}
.button.secondary.contrast:hover, .email-signup #mlb2-14152630 .ml-form-align-center form .ml-form-embedSubmit button.secondary.contrast:hover {
  background: rgba(255, 255, 255, 0.1);
}

.large-block, #home main #guidelines ul li a {
  background: white;
  display: flex;
  flex-direction: column;
  border-radius: 2.5rem;
  text-decoration: none;
  box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.15);
}
@media (min-width: 64rem) {
  .large-block, #home main #guidelines ul li a {
    border: none;
    align-items: center;
    gap: 2.5rem;
    padding: 3rem;
  }
}
.large-block .thumbnail, #home main #guidelines ul li a .thumbnail {
  width: 100%;
  aspect-ratio: 4/3;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
@media (min-width: 64rem) {
  .large-block .thumbnail, #home main #guidelines ul li a .thumbnail {
    aspect-ratio: initial;
    border-bottom: none;
    background: none !important;
  }
}
.large-block .thumbnail img, #home main #guidelines ul li a .thumbnail img {
  max-width: 17.5rem;
  position: absolute;
}
@media (min-width: 64rem) {
  .large-block .thumbnail .circle, #home main #guidelines ul li a .thumbnail .circle {
    width: 16.25rem;
    border-radius: 99rem;
    aspect-ratio: 1/1;
  }
}
.large-block .texts, #home main #guidelines ul li a .texts {
  padding: 1.5rem 1.5rem 2rem 1.5rem;
}
@media (min-width: 64rem) {
  .large-block .texts, #home main #guidelines ul li a .texts {
    padding: 0;
    text-align: center;
  }
}
.large-block .texts .title, #home main #guidelines ul li a .texts .title {
  margin-bottom: 0.5rem;
  color: #262626;
}
@media (min-width: 64rem) {
  .large-block .texts .title, #home main #guidelines ul li a .texts .title {
    margin-bottom: 0.75rem;
  }
}
.large-block .texts .description, #home main #guidelines ul li a .texts .description {
  color: #474747;
}

.small-block, #home main #tutorials ul li > a, #home main #components ul a, #home main #articles ul a.desktop {
  background: white;
  display: flex;
  flex-direction: column;
  border-radius: 1.5rem;
  text-decoration: none;
  box-shadow: 0 8px 12px 2px rgba(0, 0, 0, 0.05);
  overflow: hidden;
  border: 1px solid rgba(0, 0, 0, 0.1);
}
@media (min-width: 64rem) {
  .small-block, #home main #tutorials ul li > a, #home main #components ul a, #home main #articles ul a.desktop {
    border-radius: 2rem;
  }
}
.small-block .thumbnail, #home main #tutorials ul li > a .thumbnail, #home main #components ul a .thumbnail, #home main #articles ul a.desktop .thumbnail {
  display: flex;
  align-items: center;
  justify-items: center;
  width: 100%;
}
.small-block .thumbnail img, #home main #tutorials ul li > a .thumbnail img, #home main #components ul a .thumbnail img, #home main #articles ul a.desktop .thumbnail img {
  max-width: 100%;
}
.small-block .thumbnail.square, #home main #tutorials ul li > a .thumbnail.square, #home main #components ul a .thumbnail.square, #home main #articles ul a.desktop .thumbnail.square {
  aspect-ratio: 1/1;
}
.small-block .thumbnail.landscape, #home main #tutorials ul li > a .thumbnail.landscape, #home main #components ul a .thumbnail.landscape, #home main #articles ul a.desktop .thumbnail.landscape {
  aspect-ratio: 4/3;
}
.small-block .title, #home main #tutorials ul li > a .title, #home main #components ul a .title, #home main #articles ul a.desktop .title {
  color: #262626;
  padding: 1.5rem 1rem;
}
@media (min-width: 64rem) {
  .small-block .title, #home main #tutorials ul li > a .title, #home main #components ul a .title, #home main #articles ul a.desktop .title {
    padding: 2rem 1.5rem;
  }
}

.aside-menu-item {
  display: flex;
  text-decoration: none;
  border-left: 2px solid rgba(38, 38, 38, 0.1);
  color: #474747;
}
.aside-menu-item.medium {
  padding: 1rem 0 1rem 1rem;
}
.aside-menu-item.small {
  padding: 0.75rem 0 0.75rem 1rem;
}
.aside-menu-item.active {
  border-left: 2px solid #262626;
  color: #262626;
  pointer-events: none;
  cursor: default;
}
.aside-menu-item:hover {
  text-decoration: underline;
  color: #8D0E37;
}

.topic-item, #home main #articles ul a.mobile {
  display: flex;
  align-items: center;
  gap: 1rem;
  text-decoration: none;
  color: #262626;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.topic-item .thumbnail, #home main #articles ul a.mobile .thumbnail {
  min-width: 5rem;
  aspect-ratio: 1/1;
  border-radius: 1rem;
}
.topic-item .thumbnail img, #home main #articles ul a.mobile .thumbnail img {
  width: 5rem;
  height: auto;
}
.icon {
  background-color: #262626;
  width: 1.5rem;
  min-width: 1.5rem;
  height: 1.5rem;
}
.icon.check-small, .post .body figure.examples .stack .single-example .type.do .icon {
  -webkit-mask: url("../img/icon-check-small.svg");
}
.icon.check-circle {
  -webkit-mask: url("../img/icon-check-circle.svg");
}
.icon.close, .post .body figure.examples .stack .single-example .type.dont .icon {
  -webkit-mask: url("../img/icon-close.svg");
}
.icon.design {
  -webkit-mask: url("../img/icon-design-services.svg");
}
.icon.exclamation, .post .body figure.examples .stack .single-example .type.caution .icon {
  -webkit-mask: url("../img/icon-exclamation.svg");
}
.icon.info {
  -webkit-mask: url("../img/icon-notice.svg");
}
.icon.usage {
  -webkit-mask: url("../img/icon-book-3.svg");
}

.action-icon {
  border-radius: 99rem;
  padding: 1rem;
  background: #F1F1F1;
}

.menu-item {
  display: flex;
  text-decoration: none;
  align-items: center;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.menu-item .icon {
  display: none;
}
.menu-item.medium {
  color: #262626;
  padding: 1rem 0;
}
.menu-item.small {
  color: #474747;
  padding: 0.75rem 0;
}
.menu-item.active .icon {
  display: block;
}

.messsage {
  border-radius: 1rem;
  padding: 1.25rem;
  display: flex;
  align-items: center;
  gap: 1rem;
}
.messsage p {
  font-size: 16px !important;
}
.messsage.info {
  background: #EEF0FD;
}

#home .presentation {
  background: #1B1B1B;
  color: white;
  overflow: hidden;
  position: relative;
}
#home .presentation .overlay-top {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0.85), rgba(0, 0, 0, 0));
  height: 20%;
}
#home .presentation .overlay-bottom {
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  background: linear-gradient(rgba(0, 0, 0, 0), rgba(0, 0, 0, 0.85) 25%);
  height: 50%;
}
@media (min-width: 64rem) {
  #home .presentation .overlay-bottom {
    display: none;
  }
}
#home .presentation .content {
  display: flex;
  justify-content: center;
}
#home .presentation .content .container {
  padding-top: 20rem;
  padding-bottom: 5rem;
  position: relative;
}
@media (min-width: 64rem) {
  #home .presentation .content .container {
    padding-bottom: 15rem;
  }
}
#home .presentation .content .container .texts {
  max-width: 42.25rem;
  position: relative;
  z-index: 1;
}
#home .presentation .content .container .texts h1 {
  margin-bottom: 2rem;
}
#home .presentation .content .container .waves {
  position: absolute;
  right: -90%;
  top: -90%;
  transform: scale(0.75);
}
@media (min-width: 64rem) {
  #home .presentation .content .container .waves {
    right: 0;
    top: -50%;
    transform: scale(1);
  }
}
#home main section {
  display: flex;
  flex-flow: column;
  align-items: center;
}
#home main section .container {
  padding-top: 10rem;
  padding-bottom: 10rem;
  display: flex;
  flex-direction: column;
  gap: 2.5rem;
}
@media (min-width: 64rem) {
  #home main section .container {
    padding-top: 15rem;
    padding-bottom: 15rem;
  }
}
#home main #guidelines {
  background: linear-gradient(white, #FEEDEF);
}
#home main #guidelines ul {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}
@media (min-width: 64rem) {
  #home main #guidelines ul {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(3, 1fr);
  }
}
#home main #articles ul {
  display: flex;
  flex-direction: column;
}
@media (min-width: 64rem) {
  #home main #articles ul {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(4, 1fr);
  }
}
#home main #articles ul a.desktop {
  display: none;
}
@media (min-width: 64rem) {
  #home main #articles ul a.desktop {
    display: flex;
    height: 100%;
  }
}
@media (min-width: 64rem) {
  #home main #articles ul a.mobile {
    display: none;
  }
}
#home main #components {
  background: linear-gradient(#FAECFD, #F1F1F1);
}
#home main #components ul {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 64rem) {
  #home main #components ul {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(4, 1fr);
  }
}
#home main #tutorials ul {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, 1fr);
}
@media (min-width: 64rem) {
  #home main #tutorials ul {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(4, 1fr);
  }
}
#home #about {
  display: flex;
  flex-flow: column;
  align-items: center;
  background: #8D0E37;
}
#home #about .container {
  padding-top: 10rem;
  padding-bottom: 10rem;
  display: flex;
  flex-flow: column;
  align-items: center;
  color: white;
}
#home #about .container .content {
  display: flex;
  flex-flow: column;
  align-items: center;
  gap: 2rem;
  max-width: 42.25rem;
  text-align: center;
}
#home #about .container .content .avatar {
  width: 140px;
  aspect-ratio: 1/1;
  border-radius: 99rem;
  background: #FAECFD;
  position: relative;
  overflow: hidden;
}
#home #about .container .content .avatar img {
  max-width: 6.25rem;
  position: absolute;
  bottom: 0;
  left: 12%;
}
@media (min-width: 64rem) {
  #home #about .container .content .avatar img {
    max-width: 7.5rem;
  }
}
@media (min-width: 64rem) {
  #home #about .container .content .avatar {
    width: 160px;
  }
}
#home #about .container .content .actions {
  display: flex;
  gap: 1.5rem;
}
#home #about .container .content .actions .button.linkedin:after, #home #about .container .content .actions .email-signup #mlb2-14152630 .ml-form-align-center form .ml-form-embedSubmit button.linkedin:after, .email-signup #mlb2-14152630 .ml-form-align-center form .ml-form-embedSubmit #home #about .container .content .actions button.linkedin:after {
  content: "LinkedIn";
}
@media (min-width: 64rem) {
  #home #about .container .content .actions .button.linkedin:after, #home #about .container .content .actions .email-signup #mlb2-14152630 .ml-form-align-center form .ml-form-embedSubmit button.linkedin:after, .email-signup #mlb2-14152630 .ml-form-align-center form .ml-form-embedSubmit #home #about .container .content .actions button.linkedin:after {
    content: "Javier's LinkedIn";
  }
}
#home #about .container .content .actions .button.website:after, #home #about .container .content .actions .email-signup #mlb2-14152630 .ml-form-align-center form .ml-form-embedSubmit button.website:after, .email-signup #mlb2-14152630 .ml-form-align-center form .ml-form-embedSubmit #home #about .container .content .actions button.website:after {
  content: "Website";
}
@media (min-width: 64rem) {
  #home #about .container .content .actions .button.website:after, #home #about .container .content .actions .email-signup #mlb2-14152630 .ml-form-align-center form .ml-form-embedSubmit button.website:after, .email-signup #mlb2-14152630 .ml-form-align-center form .ml-form-embedSubmit #home #about .container .content .actions button.website:after {
    content: "Fuller's website";
  }
}

#default .presentation {
  background: #00504E;
  color: white;
}
#default .presentation .content {
  display: flex;
  justify-content: center;
}
#default .presentation .content .container {
  padding-top: 15rem;
  padding-bottom: 3rem;
}
@media (min-width: 64rem) {
  #default .presentation .content .container {
    padding-top: 10rem;
    padding-bottom: 10rem;
  }
}
@media (min-width: 64rem) {
  #default .presentation .content .container h1 {
    max-width: 42.25rem;
  }
}
#default main {
  display: flex;
  align-items: center;
  flex-direction: column;
}
#default main .container {
  padding-top: 5rem;
  padding-bottom: 10rem;
  display: flex;
  align-items: center;
  flex-direction: column;
}
@media (min-width: 64rem) {
  #default main .container {
    padding-top: 10rem;
  }
}
#default main .container .post {
  display: flex;
  align-items: center;
  flex-direction: column;
  max-width: 56.875rem;
}
#default main .container .post .overview, #default main .container .post p, #default main .container .post ul, #default main .container .post h2, #default main .container .post h3 {
  width: 100%;
  max-width: 42.25rem;
}
#default main .container .post h3 {
  margin-top: 2rem;
  margin-bottom: 1rem;
}
#default main .container .post .overview {
  margin-bottom: 2.5rem;
}
#default main .container .post p, #default main .container .post ul, #default main .container .post li {
  margin-bottom: 1.5rem;
}
#default main .container .post a {
  color: #8D0E37;
}
#default main .container .post figure {
  margin-top: 1.5rem;
  margin-bottom: 1.5rem;
}
#default main .container .post figure img {
  max-width: 100%;
}
#default main .container .post figure figcaption {
  margin-top: 0.75rem;
  color: #474747;
}
#default main .container .post figure figcaption a {
  color: #8D0E37;
}

#topic .presentation {
  background: #8D0E37;
  color: white;
  position: relative;
  overflow: hidden;
}
#topic .presentation .content {
  display: flex;
  justify-content: center;
}
#topic .presentation .content .container {
  padding-top: 15rem;
  padding-bottom: 3rem;
}
@media (min-width: 64rem) {
  #topic .presentation .content .container {
    padding-top: 10rem;
    padding-bottom: 10rem;
  }
}
@media (min-width: 64rem) {
  #topic .presentation .content .container h1 {
    max-width: 56.875rem;
  }
}
#topic .presentation .content .waves {
  position: absolute;
  right: -94%;
  bottom: -50%;
  transform: scale(0.75);
}
@media (min-width: 64rem) {
  #topic .presentation .content .waves {
    right: 0;
    top: -62%;
    transform: scale(1);
  }
}
#topic main {
  display: flex;
  align-items: center;
  flex-direction: column;
}
#topic main .container {
  padding-top: 5rem;
  padding-bottom: 10rem;
  display: flex;
  flex-direction: column-reverse;
  gap: 4rem;
}
@media (min-width: 64rem) {
  #topic main .container {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(12, 1fr);
    padding-top: 10rem;
  }
}

#component .presentation {
  background: #8D0E37;
  color: white;
  position: relative;
  overflow: hidden;
}
#component .presentation .content {
  display: flex;
  justify-content: center;
}
#component .presentation .content .container {
  padding-top: 15rem;
  padding-bottom: 3rem;
}
@media (min-width: 64rem) {
  #component .presentation .content .container {
    padding-top: 10rem;
    padding-bottom: 10rem;
  }
}
@media (min-width: 64rem) {
  #component .presentation .content .container h1 {
    max-width: 42.25rem;
  }
}
#component .presentation .content .waves {
  position: absolute;
  right: -94%;
  bottom: -50%;
  transform: scale(0.75);
}
@media (min-width: 64rem) {
  #component .presentation .content .waves {
    right: 0;
    top: -62%;
    transform: scale(1);
  }
}
#component main {
  display: flex;
  align-items: center;
  flex-direction: column;
}
#component main .container {
  padding-top: 5rem;
  padding-bottom: 10rem;
  display: flex;
  flex-direction: column-reverse;
  gap: 4rem;
}
@media (min-width: 64rem) {
  #component main .container {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(12, 1fr);
    padding-top: 10rem;
  }
}
#component main .container .post {
  grid-column: span 10;
  max-width: none;
  gap: 4rem;
}
#component main .container .post .tabs {
  width: 100%;
}
#component main .container .post .tabs nav {
  display: flex;
  flex-direction: row;
  border-top: 1px solid rgba(0, 0, 0, 0.1);
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
#component main .container .post .tabs nav a {
  text-decoration: none;
  padding: 1.25rem;
  display: flex;
  color: #474747;
  margin-bottom: -1px;
  gap: 0.75rem;
  flex-direction: column;
  align-items: center;
}
@media (min-width: 64rem) {
  #component main .container .post .tabs nav a {
    flex-direction: row;
  }
}
#component main .container .post .tabs nav a:hover {
  background-color: rgba(0, 0, 0, 0.05);
}
#component main .container .post .tabs nav a.active {
  color: #8D0E37;
  border-bottom: 2px solid #8D0E37;
  pointer-events: none;
  cursor: default;
}
#component main .container .post .tabs nav a.active .icon {
  background-color: #8D0E37;
}
#component main .container .post .panels-container .panel {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(10, 1fr);
}
#component main .container .post .panels-container .panel .body {
  grid-column: span 12;
}
@media (min-width: 64rem) {
  #component main .container .post .panels-container .panel .body {
    grid-column: span 8;
  }
}

#listing header {
  background: #8D0E37;
}
#listing main {
  display: flex;
  flex-direction: column;
  align-items: center;
}
#listing main .container {
  padding-top: 5rem;
  padding-bottom: 10rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4rem;
}
@media (min-width: 64rem) {
  #listing main .container {
    gap: 6rem;
    padding-top: 10rem;
  }
}
#listing main .container .texts {
  text-align: center;
  max-width: 56.875rem;
}
#listing main .container .texts h1 {
  margin-bottom: 1.5rem;
}
@media (min-width: 64rem) {
  #listing main .container .texts h1 {
    margin-bottom: 2rem;
  }
}
#listing main .container .texts .overview {
  max-width: 42.25rem;
}
#listing main .container ul {
  display: grid;
  gap: 1.5rem;
  grid-template-columns: repeat(2, 1fr);
  width: 100%;
}
@media (min-width: 64rem) {
  #listing main .container ul {
    display: grid;
    gap: 1.5rem;
    grid-template-columns: repeat(4, 1fr);
  }
}
#listing main .container ul li a {
  height: 100%;
}

.email-signup {
  grid-column-start: 4;
  grid-column-end: 12;
  display: flex;
  flex-direction: column;
  padding: 5rem 3rem;
  border: 1px solid rgba(0, 0, 0, 0.1);
  border-radius: 2.5rem;
  align-items: center;
  gap: 2.5rem;
  background: linear-gradient(#FAECFD, white);
  box-shadow: 0 8px 12px 2px rgba(0, 0, 0, 0.05);
}
.email-signup .content {
  max-width: 56.875rem;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2rem;
}
.email-signup .content .texts {
  max-width: 42.25rem;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}
.email-signup #mlb2-14152630 {
  width: 100%;
  max-width: 42.25rem;
  display: flex;
  justify-content: center;
}
.email-signup #mlb2-14152630 .ml-form-align-center {
  width: 100%;
}
.email-signup #mlb2-14152630 .ml-form-align-center form {
  display: flex;
  gap: 1rem;
  justify-content: center;
  flex-direction: column;
}
@media (min-width: 64rem) {
  .email-signup #mlb2-14152630 .ml-form-align-center form {
    flex-direction: row;
  }
}
.email-signup #mlb2-14152630 .ml-form-align-center form .ml-form-formContent input {
  padding: 0 1.5rem;
  border-radius: 99rem;
  border: 2px solid #474747;
  height: 3.25rem;
  width: 100%;
}
.email-signup #mlb2-14152630 .ml-form-align-center form .ml-form-embedSubmit button {
  border: none;
  cursor: pointer;
  width: 100%;
  background-color: #FEEDEF;
}
.email-signup #mlb2-14152630 .ml-form-align-center .ml-form-successContent {
  padding: 1rem 1.5rem;
  border-radius: 1rem;
  display: flex;
  flex-direction: row;
  gap: 0.75rem;
  background: #DAF6F5;
}
@media (min-width: 64rem) {
  .email-signup #mlb2-14152630 .ml-form-align-center .ml-form-successContent {
    align-items: center;
  }
}
:root {
  font-family: "Inter", sans-serif;
  font-feature-settings: "liga" 1, "calt" 1;
}

@supports (font-variation-settings: normal) {
  :root {
    font-family: InterVariable, sans-serif;
  }
}
*, *:before, *:after {
  box-sizing: border-box;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
  text-size-adjust: none;
}

html, body {
  color: #262626;
  height: 100%;
  overflow-x: hidden;
}

.container {
  width: 100%;
  max-width: 90rem;
  padding-left: 1rem;
  padding-right: 1rem;
}
@media (min-width: 64rem) {
  .container {
    padding-left: 2rem;
    padding-right: 2rem;
  }
}

header {
  display: flex;
  justify-content: center;
  position: relative;
  z-index: 1;
}
header nav {
  padding-top: 1rem;
  padding-bottom: 1rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
header nav ul {
  display: flex;
  gap: 1rem;
}
@media (min-width: 64rem) {
  header nav .mobile {
    display: none;
  }
}
header nav .desktop {
  display: none;
}
@media (min-width: 64rem) {
  header nav .desktop {
    display: flex;
  }
}

footer {
  background: #780A2E;
  display: flex;
  justify-content: center;
}
footer .container {
  display: flex;
  flex-direction: column;
  gap: 2rem;
  padding-top: 5rem;
  padding-bottom: 5rem;
}
@media (min-width: 64rem) {
  footer .container {
    padding-top: 1.5rem;
    padding-bottom: 1.5rem;
    align-items: center;
    justify-content: space-between;
    flex-direction: row;
  }
}
footer .container ul {
  display: flex;
  flex-direction: column;
  width: 100%;
}
@media (min-width: 64rem) {
  footer .container ul {
    flex-direction: row;
    width: auto;
    gap: 1rem;
  }
}
footer .container ul li a.mobile {
  display: flex;
  padding: 1rem 0;
  color: white;
  text-decoration: none;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}
@media (min-width: 64rem) {
  footer .container ul li a.mobile {
    display: none;
  }
}
footer .container ul li a.desktop {
  display: none;
}
@media (min-width: 64rem) {
  footer .container ul li a.desktop {
    display: flex;
  }
}
footer .text {
  color: white;
  opacity: 85%;
}

.overlay-menu {
  width: 100%;
  left: 0;
  bottom: 0;
  position: fixed;
  display: none;
  z-index: 2;
  padding: 0.5rem;
}
.overlay-menu .content {
  background: linear-gradient(white, #FEEDEF);
  box-shadow: 0px -8px 8px 0px rgba(0, 0, 0, 0.1);
  border-radius: 2.5rem;
  display: flex;
  flex-direction: column;
  padding: 1rem;
}
.overlay-menu .content .header {
  display: flex;
  flex-direction: row-reverse;
}
.overlay-menu .content .menu {
  display: flex;
  flex-direction: column;
  gap: 4rem;
}
.overlay-menu .content .menu .main-menu li:last-child a, .overlay-menu .content .menu .secondary-menu li:last-child a {
  border-bottom: none;
}

.overlay-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0, 0, 0, 0.5);
  z-index: 1;
  display: none;
}

.post {
  grid-column: span 8;
  max-width: 56.875rem;
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 2.5rem;
}
.post .author {
  width: 100%;
  max-width: 42.25rem;
  display: flex;
  flex-direction: column;
  padding-bottom: 1.5rem;
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.post .author .content {
  display: flex;
  gap: 1rem;
  align-items: center;
}
.post .author .content .avatar {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 99rem;
  background: #F1F1F1;
}
.post .author .content .texts {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.post .author .content .texts a {
  color: #8D0E37;
}
.post .overview {
  width: 100%;
  max-width: 42.25rem;
}
.post .body {
  display: flex;
  align-items: center;
  flex-direction: column;
  gap: 1rem;
  width: 100%;
}
.post .body table {
  margin-bottom: 1.5rem;
}
.post .body table tr {
  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}
.post .body table tr th, .post .body table tr td {
  text-align: left;
  padding: 1rem 0;
}
.post .body table.tokens th, .post .body table.tokens td {
  width: 45%;
}
.post .body table.tokens th:first-child, .post .body table.tokens td:first-child {
  width: 10%;
}
.post .body .messsage, .post .body blockquote, .post .body .checklist, .post .body p, .post .body ul, .post .body h2, .post .body h3, .post .body h4, .post .body pre, .post .body table {
  width: 100%;
  max-width: 42.25rem;
}
.post .body h2 {
  margin-top: 3rem;
  margin-bottom: 0.5rem;
}
.post .body h3 {
  margin-top: 1.5rem;
}
.post .body h4 {
  margin-top: 1rem;
}
.post .body a {
  color: #8D0E37;
}
.post .body ul {
  list-style-type: square;
  list-style-position: outside;
  padding-left: 1rem;
}
.post .body ul li {
  margin-bottom: 0.75rem;
}
.post .body ul li:last-child {
  margin-bottom: 0;
}
.post .body blockquote {
  padding-left: 1.5rem;
  border-left: 4px solid #474747;
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.post .body blockquote footer {
  background: none;
  display: block;
  margin-top: 1rem;
  color: #474747;
}
.post .body pre {
  font-family: "Fira Code", monospace;
  background: #FEEDEF;
  border-radius: 1rem;
  padding: 1.25rem;
  font-weight: 500;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
  overflow-x: scroll;
}
.post .body .messsage {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
.post .body figure {
  margin-top: 1rem;
  margin-bottom: 1rem;
}
@media (min-width: 64rem) {
  .post .body figure {
    margin-top: 1.5rem;
    margin-bottom: 1.5rem;
  }
}
.post .body figure img {
  max-width: 100%;
  border-radius: 1rem;
  background: #FEEDEF;
}
@media (min-width: 64rem) {
  .post .body figure img {
    border-radius: 1.5rem;
  }
}
.post .body figure figcaption {
  margin-top: 0.75rem;
  color: #474747;
}
.post .body figure.examples {
  display: flex;
  flex-direction: column;
}
.post .body figure.examples .stack {
  display: flex;
  gap: 0.5rem;
}
.post .body figure.examples .stack.true {
  flex-direction: column;
}
.post .body figure.examples .stack.false {
  flex-direction: column;
}
@media (min-width: 64rem) {
  .post .body figure.examples .stack.false {
    flex-direction: row;
  }
}
.post .body figure.examples .stack .single-example {
  border-radius: 1.5rem;
  overflow: hidden;
}
.post .body figure.examples .stack .single-example img {
  border-radius: 0;
}
.post .body figure.examples .stack .single-example .type {
  padding: 0.5rem 1.5rem;
  display: flex;
  gap: 0.5rem;
  align-items: center;
}
.post .body figure.examples .stack .single-example .type.dont {
  background: #AF2C42;
}
.post .body figure.examples .stack .single-example .type.dont .icon {
  background-color: white;
}
.post .body figure.examples .stack .single-example .type.dont .value {
  color: white;
}
.post .body figure.examples .stack .single-example .type.dont .value::after {
  content: "Don't";
}
.post .body figure.examples .stack .single-example .type.do {
  background: #006A67;
}
.post .body figure.examples .stack .single-example .type.do .icon {
  background-color: white;
}
.post .body figure.examples .stack .single-example .type.do .value {
  color: white;
}
.post .body figure.examples .stack .single-example .type.do .value::after {
  content: "Do";
}
.post .body figure.examples .stack .single-example .type.caution {
  background: #FABD00;
}
.post .body figure.examples .stack .single-example .type.caution .icon {
  background-color: #262626;
}
.post .body figure.examples .stack .single-example .type.caution .value {
  color: #262626;
}
.post .body figure.examples .stack .single-example .type.caution .value::after {
  content: "Caution";
}

.siblings {
  display: none;
}
@media (min-width: 64rem) {
  .siblings {
    display: block;
    grid-column: span 2;
    position: sticky;
    top: 3rem;
    align-self: start;
  }
}
.siblings .title {
  margin-bottom: 1.5rem;
}

.toc {
  display: none;
}
@media (min-width: 64rem) {
  .toc {
    display: block;
    grid-column: span 2;
    position: sticky;
    top: 3rem;
    align-self: start;
  }
}
.toc .title {
  margin-bottom: 1.5rem;
}