@import url(https://netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);
.nav__wrapper {
    border-radius: 0 0 var(--r-1) var(--r-1);
    padding: 0.5rem var(--p-1) 1.5rem var(--p-1);
    background: var(--c-bkg);
    position: absolute;
    z-index: 2;

    --weird-gap: 0.05rem;
  }

  nav ul {
    display: flex;
    align-items: center;
    gap: 1rem;
  }

  .no-flexbox-gap nav ul > *:not(:last-child) {
    margin-right: 1rem;
}

  nav ul li {
    white-space: nowrap;
    font-family: Nunito, sans-serif;
    text-transform: uppercase;
    font-size: 1rem;
  }

  .nav-edge-left {
    position: absolute;
    left: calc(-1 * var(--r-1) + var(--weird-gap));
    height: var(--r-1);
    width: var(--r-1);
    top: calc(-1 * var(--weird-gap));
    transform: scaleY(-1);
  }

  .nav-edge-right {
    position: absolute;
    right: calc(-1 * var(--r-1) + var(--weird-gap));
    height: var(--r-1);
    width: var(--r-1);
    top: calc(-1 * var(--weird-gap));
    transform: scaleX(-1) scaleY(-1);
  }

.nav-link {
  position: relative;
  transition: all 0.15s ease-out;
  color: var(--c-2);
  display: flex;
  align-items: center;
}

.nav-link svg{
  width: 1.2em;
  margin-right: .5em;
}

.nav-link--blog{
  color: var(--c-3);
}
.nav-link:before {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;
  bottom: 0;
  left: 0;
  background-color: var(--c-3);
  visibility: hidden;
  -webkit-transform: scaleX(0);
  transform: scaleX(0);
  -webkit-transition: all 0.5s cubic-bezier(1, 0.25, 0, 0.75) 0s;
  transition: all 0.5s cubic-bezier(1, 0.25, 0, 0.75) 0s;
}
.nav-link:hover:before {
  visibility: visible;
  -webkit-transform: scaleX(1);
  transform: scaleX(1);
}
.hero__video {
  border-radius: var(--r-1);
}

.hero__banner {
    background: var(--c-bkg);
    border-radius: var(--r-1) var(--r-1) 0 0;
    padding: var(--p-1);
  }

  .page--home .hero__banner {
    position: absolute;
    bottom: calc(-1 * var(--offset));
    left: 6rem;
  }

  .page--post .hero__banner {
    position: relative;
    width: calc(100% - 8rem);
    left: 4rem;
  }

  .hero__banner h1 {
    min-width: 14ch;
    font-size: 4.2rem;
  }

  .page--post .hero__banner h1 {
    width: auto;
  }

.banner-edge-left {
  position: absolute;
  left: calc(-1 * var(--r-1) + var(--weird-gap));
  height: var(--r-1);
  width: var(--r-1);
  bottom: calc(var(--offset) - var(--weird-gap));
}

.banner-edge-right {
  position: absolute;
  right: calc(-1 * var(--r-1) + var(--weird-gap));
  height: var(--r-1);
  width: var(--r-1);
  bottom: calc(var(--offset) - var(--weird-gap));
  transform: scaleX(-1);
}

.hero__info {
  position: absolute;
  top: 30%;
  right: 15%;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  align-items: center;
}

.no-flexbox-gap .hero__info > *:not(:last-child) {
  margin-bottom: 1rem;
}

.hero__info .platform-list {
  display: flex;
  gap: 0.8rem;
}

.no-flexbox-gap .hero__info .platform-list > *:not(:last-child) {
  margin-right: 0.8rem;
}

.hero__info .platform-list svg {
  height: 1.8rem;
  width: 1.8rem;
}

.hero__info .platform-list svg path {
  fill: var(--c-2);
  opacity: 0.25;
}

.btn--hero {
  text-transform: uppercase;
  font-size: 1.5rem;
  background:  var(--c-4);
  border-radius: 999px;
  padding: 1.9rem 2rem;
  line-height: 1;
  color: black;
}

.btn--hero:hover {
  background: var(--c-3);
}

.hero__wrapper {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.page--home .hero__wrapper {
    --offset: 8rem;
    margin-bottom: var(--offset);
    padding: 0 2rem;
    --weird-gap: 0.04rem;
    z-index: 1; /* temp, to overlap slider */
  }
  
  .page--post .hero__wrapper {
    align-items: flex-start;
  }
.page--home article.blurb__wrapper {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 3rem;
}

.blurb__wrapper section {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: end; /* changed from flex to end by wouter (to outline slider to right side) */
    position: relative;
    gap: 1.5rem;
}

.no-flexbox-gap .blurb__wrapper section > *:not(:last-child) {
    margin-bottom: 1.5rem;
}

.blurb__wrapper p {
    font-family: Nunito, sans-serif;
    font-size: max(1.2rem, 10pt);
}

@media screen and (max-width: 768px) {
    .hide-on-mobile {
        display: none;
    }
}


.blurb__wrapper p em {
    /* background-color: var(--c-3);
    padding: 0 .25em; */
    font-style: normal;
    font-weight: 800;
}

.before-and-after {
    --ratio: 781/1347;
    /* --ratio: 1347/781; */
    --height: 30rem;
    position: relative;
    height: var(--height);
    width: calc(var(--height) * var(--ratio));
    aspect-ratio: var(--ratio);
    border: 2px solid white;
    border-radius: var(--r-1);
    overflow: hidden;
    background: transparent;/*var(--c-1) */
}

.before-and-after .img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
}

.before-and-after .slider {
    position: absolute;
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 100%;
    background: rgba(168, 96, 96, 0);
    outline: none;
    margin: 0;
    transition: all 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: w-resize;
}

.before-and-after .slider:hover {
    background: rgba(242, 242, 242, 0.1);
}

.before-and-after .slider::-webkit--thumb {
    -webkit-appearance: none;
    appearance: none;
    width: 6px;
    height: 600px;
    background: white;
    cursor: pointer;
}

.before-and-after .slider::-moz-range-thumb {
    width: 6px;
    height: 600px;
    background: white;
    cursor: pointer;
}

.before-and-after .slider-button {
    pointer-events: none;
    position: absolute;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background-color: white;
    left: calc(51% - 24px);
    top: calc(50% - 24px);
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: w-resize;
}

.before-and-after .slider-button:after {
    content: "";
    padding: 3px;
    display: inline-block;
    border: solid #5D5D5D;
    border-width: 0 2px 2px 0;
    transform: rotate(-45deg);
}

.before-and-after .slider-button:before {
    content: "";
    padding: 3px;
    display: inline-block;
    border: solid #5D5D5D;
    border-width: 0 2px 2px 0;
    transform: rotate(135deg);
}

.page--home article.info__wrapper {
    flex-direction: row;
    gap: 3rem;
}

.no-flexbox-gap article.info__wrapper > *:not(:last-child) {
    margin-right: 3rem;
}

.info__wrapper section {
    width: 50%;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.info__wrapper p {
    font-family: Nunito, sans-serif;
    font-size: max(1.15rem, 10pt);
}

.info__wrapper section p:first-of-type{
    margin-bottom: 3rem;
}

.info__wrapper ul {
    margin-left: 2.5rem;
}

.info__wrapper ul li{
    font-size: max(1.15rem, 12pt);
    font-weight: 700;
    font-style: italic;
    line-height: 1;
    margin-bottom: 2rem;
    list-style: none;
    position: relative;
}

.info__wrapper ul li::before {
    content: '';
    background: url("data:image/svg+xml,%3csvg width='28' height='29' viewBox='0 0 28 29' fill='none' xmlns='http://www.w3.org/2000/svg'%3e %3cg clip-path='url(%23clip0_51:52)'%3e %3cpath d='M28.0029 14.3048C28.0029 18.0987 26.5278 21.7372 23.902 24.4198C21.2762 27.1025 17.7149 28.6096 14.0014 28.6096C10.288 28.6096 6.72671 27.1025 4.10093 24.4198C1.47515 21.7372 0 18.0987 0 14.3048C0 10.5109 1.47515 6.87245 4.10093 4.18978C6.72671 1.50711 10.288 0 14.0014 0C17.7149 0 21.2762 1.50711 23.902 4.18978C26.5278 6.87245 28.0029 10.5109 28.0029 14.3048V14.3048ZM21.0547 8.88686C20.9297 8.75958 20.7808 8.65937 20.617 8.59221C20.4532 8.52505 20.2779 8.49233 20.1014 8.49601C19.9249 8.49968 19.751 8.53967 19.59 8.61358C19.4291 8.6875 19.2843 8.79383 19.1645 8.9262L13.0861 16.8385L9.42298 13.0943C9.17414 12.8574 8.84503 12.7284 8.50497 12.7345C8.1649 12.7407 7.84045 12.8814 7.59995 13.1271C7.35945 13.3728 7.22169 13.7043 7.21569 14.0518C7.20969 14.3992 7.33592 14.7354 7.56778 14.9897L12.1988 19.7228C12.3235 19.85 12.4721 19.9502 12.6356 20.0175C12.7991 20.0848 12.9742 20.1178 13.1504 20.1145C13.3267 20.1111 13.5004 20.0715 13.6614 19.9981C13.8223 19.9247 13.9672 19.8189 14.0872 19.687L21.0739 10.7644C21.3121 10.5114 21.4437 10.173 21.4404 9.82196C21.4372 9.47093 21.2993 9.1352 21.0564 8.88686H21.0547Z' fill='%2300C2FF'/%3e %3c/g%3e %3cdefs%3e %3cclipPath id='clip0_51:52'%3e %3crect width='28' height='29' fill='white'/%3e %3c/clipPath%3e %3c/defs%3e %3c/svg%3e");
    height: 1.8rem;
    width: 1.8rem;
    background-size: contain;
    display: block;
    background-repeat: no-repeat;
    position: absolute;
    left: -2.3rem;
}
.glide {
    overflow-x: scroll;
}

.glide::-webkit-scrollbar {
    width: 1rem;
}

/* Track */
.glide::-webkit-scrollbar-track {
    background-color: var(--c-1);
    border-radius: 999px;
}

/* Handle */
.glide::-webkit-scrollbar-thumb {
    background-color: var(--c-3);
    border-radius: 999px;
    transition: .2s all;
}

/* Handle on hover */
.glide::-webkit-scrollbar-thumb:hover {
    background-color: var(--c-3);
}

.glide__slides {
    display: flex;
    flex-wrap: nowrap;
    gap: 1rem;
    padding-bottom: 2rem;
}

.no-flexbox-gap .glide__slides > *:not(:last-child) {
    margin-right: 1rem;
}

.glide__slide img {
    max-width: 12rem;

}

.glide__slide img[src*='landscape'] {
    max-width: 37.8rem;
    /* height: 100%; */
    width: unset;
    aspect-ratio: 428 / 241;
}

.glide__slide img {
    border-radius: 2rem;
    /* pointer-events: none; */
    cursor:pointer;
}



.hires-details {
    display: flex;
    pointer-events: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    align-items: center;
    justify-content: center;
    background: white;
    padding: 2rem;
    z-index: 2;
    opacity: 0;
    transition: opacity 0.1s ease-in;
}

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

.hires-details.hires-details--selected {
    opacity: 1;
    pointer-events: all;
    cursor:pointer;
}

.system__wrapper section {
    display: grid;
    grid-template-columns: 30rem auto;
}

.page--home .system__wrapper {
    display: flex;
    flex-direction: column;
}

.system__list {
    display: flex;
    flex-wrap: wrap;
    gap: 1rem;
}

.no-flexbox-gap .system__list > *:not(:last-child) {
    margin-right: 1rem;
    margin-bottom: 1rem;
}

.system__list li {
    aspect-ratio: 1;
    height: 9rem;
    width: 9rem;
    background-color: var(--c-1);
    border-radius: var(--r-1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    border: 0.3rem solid transparent;
    transition: all 0.2s;
    cursor: pointer;
}

.system__list li:hover {
    border-color: var(--c-3);
}

.system__list li:hover img,
.system__list li:hover svg,
.system__list li:hover span {
    transform: scale(1.05);
}

.system__list li img {
    width: 4rem;
    transition: all 0.2s;
}

.system__list li svg {
    width: 4rem;
    height: 4rem;
    transition: all 0.2s;
}

.system__list li svg path {
    fill: #bbb;
}

.system__list li span {
    color: #bbb;
    transition: all 0.2s;
}

.system__list li.system--selected {
    background-color: var(--c-3);
}

.system__list li.system--selected svg path {
    fill: var(--c-bkg);
}

.system__list li.system--selected span {
    color: var(--c-bkg);
}

.system__zoom-wrapper {
    position: relative;
    background-color: var(--c-1);
    padding: var(--p-1);
    border-radius: var(--r-1);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}

li.system--soon {
    opacity: 0.5;
    pointer-events: none;
}

li.system--soon::after {
    content: '(coming soon)';
    color: #bbb;
    font-size: smaller;
    font-weight: 700;
    text-transform: uppercase;
}

.zoom__image {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0;
    transition: opacity 0.5s;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.zoom__image--bkg {
    position: absolute;
    top: 0;
    left: 0;
    opacity: 0.6;
    transition: opacity 0.5s;
    height: 100%;
    width: 100%;
    object-fit: cover;
}

.zoom__image--visible {
    opacity: 1;
}

@media screen and (max-width: 768px) {
    .system__wrapper section {
        grid-template-columns: 20rem auto;
    }
}
.pricing__content {
    display: grid;
    grid-template-columns: 0.33fr 1fr 1fr ;
    gap: 1rem;
}

.page--home .level__wrapper {
    display: grid;
    grid-template-rows: 3rem auto 2.5rem;
    gap: 1rem;
}

.level__wrapper--disabled {
    opacity: 0.25;
}

.level__wrapper header {
    text-align: center;
}

.level__wrapper header span {
    font-size: max(0.75rem, 8pt);
    color: var(--c-2);
    font-family: Nunito, sans-serif;
}

.level__wrapper header h2 {
    color: var(--c-2);
    display: inline-flex;
    flex-direction: column;
    align-items: end;
}

.level__content {
    border-radius: var(--r-1);
    background: var(--c-bkg);
    padding: 2rem 0;
    display: grid;
    grid-template-rows: 3rem auto;
}

.level__content ul {
    display: grid;
    grid-template-rows: repeat(11, 3rem);
    align-items: center;
}

.level__content li {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 0.25rem;
    line-height: 1;
    font-size: 1.5rem;
}

.no-flexbox-gap .level__content li > *:not(:last-child) {
    margin-bottom: 0.25rem;
}

.level__content li svg {
    width: 1.5rem;
}

.level__content li span {
    font-size: max(0.75rem, 8pt);
}

.level__price-wrapper {
    text-align: center;
}

.level__price-wrapper h2 {
    display: inline-flex;
    flex-direction: column;
    align-items: center;
}

.level__price-wrapper span {
    font-size: max(0.75rem, 8pt);
    font-family: Nunito, sans-serif;
}

.level__wrapper .note {
    color: var(--c-bkg);
}

.level-wrapper--heading .level__content {
    background: transparent;
}

.level-wrapper--heading ul {
    justify-items: end;
    align-items: center;
}

.level-wrapper--heading ul li {
    color: var(--c-2);
    font-weight: 600;
    text-transform: uppercase;
    text-align: right;
    font-size: 1rem;
}

.level-wrapper--trial .level__content {
    background: #DBDBDB;
}

.level__wrapper--trial .note {
    color: gray;
}

.btn--level {
    text-align: center;
    background: var(--c-3);
    color: white;
    display: block;
    border-radius: 999px;
    text-transform: uppercase;
    font-size: 1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.btn--level:hover {
    background: var(--c-bkg);
    color: var(--c-2);
}

.btn--disabled {
    background: var(--c-bkg);
    color: black;
    pointer-events: none;
    cursor: not-allowed;
}

@media screen and (max-width: 768px) {
    .level__wrapper--monthly, .level__wrapper--yearly {
        display: none;
    }

    .pricing__content {
        display: grid;
        grid-template-columns: 0.5fr 1fr 1fr;
        gap: 1rem;
    }
}
.btn--store {
    text-align: center;
    background: var(--c-4);
    padding: .5rem 1rem;
    color: white;
    display: block;
    border-radius: 999px;
    text-transform: uppercase;
    font-size: 1rem;
}

.download__content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr;
    gap: 1rem;
}

.page--home .platform__wrapper {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--p-1);
    border-radius: var(--r-1);
    background-color: var(--c-bkg);
    gap: 1rem;
    border: 0.3rem solid transparent;
    transition: all 0.2s;
}

.no-flexbox-gap .platform__wrapper > *:not(:last-child) {
    margin-bottom: 1rem;
}

.platform__wrapper:hover {
    border-color: var(--c-3);
}

.platform__wrapper:hover .btn--store {
    background: var(--c-1);
}

.platform__wrapper svg {
    max-width: 100%;
    height: 9rem;
}

.platform__wrapper h2 {
    font-size: 2.2rem;
}

@media screen and (max-width: 768px) {
    .download__content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: 1fr 1fr;
        gap: 1rem;
    }
}
   /****** Style Star Rating Widget *****/


   .reviews-wrapper blockquote {
    font-family: 'DM Serif Display', serif;
    font-size: 2.4rem;
    line-height: .9;
    margin: 0 2rem;
}

.page--home .rating-wrapper {
    display: flex;
    gap: 1rem;
    align-items: center;
}

.no-flexbox-gap .rating-wrapper > *:not(:last-child) {
    margin-right: 1rem;
}

.reviews {
    display: flex;
    flex-direction: column;
    gap: 2rem
}

.no-flexbox-gap .reviews > *:not(:last-child) {
    margin-bottom: 2rem;
}

.review {
    display: flex;
    flex-direction: column;
}

.review__name {
align-self: flex-end;
margin-right: 6rem;
font-size: 1.5rem;
}

.review__name::before {
content: '⁓ ';

}

.rating {
    border: none;
    display: flex;
}

.rating>label:before {
    margin: 0.3rem;
    font-size: 1.25em;
    font-family: FontAwesome;
    display: inline-block;
    content: "\f005";
}

.rating>.half:before {
    content: "\f089";
    position: absolute;
    color: var(--c-3);
}

.rating>label {
    color: var(--c-3);
}
.page--home .contact__wrapper {
    display: flex;
    color: var(--c-bkg);
    background: var(--c-3);
    width: var(--viewportWidth);
    margin-top: 2rem;
    padding: 4rem 2rem 6rem 2rem;
    align-items: center;
}

.contact__wrapper header, .contact__wrapper section {
    width: min(60rem, var(--viewportWidth));
    align-items: center;
}

.contact__wrapper section {
    display: flex;
    gap:4rem;
    align-items: flex-start;
    justify-content: center;
}

.contact__wrapper .form {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 1rem;
}

.no-flexbox-gap .contact__wrapper .form > *:not(:last-child) {
    margin-bottom: 1em;
}

.contact__wrapper h1 {
    text-align: center;
}

.contact__wrapper img{
    width: min(35ch + 2rem, 90vw + 2rem);
    border-radius: var(--r-1);
    max-width: 34%;
}

.contact__wrapper input {
    border-radius: max(1rem, 16pt);
    padding: 0.5em 1em;
    width: min(35ch, 90vw);
    font-size: max(1rem, 16pt);
    color: var(--c-2);
}

.contact__wrapper textarea {
    color: black;
    border-radius: max(1rem, 16pt);
    padding: 0.5em 1em;
    width: min(35ch, 90vw);
    min-height: 10em;
    font-size: max(1rem, 16pt);
}

.btn--contact {
    text-align: center;
    background: var(--c-2);
    color: white;
    border-radius: 999px;
    text-transform: uppercase;
    font-size: max(1.5rem, 20pt);
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 0;
    padding: 0.5em 1.5em;
    transition: 0.2s all;
    gap: 0.5rem;
}

.no-flexbox-gap .btn--contact > *:not(:last-child) {
    margin-right: 0.5rem;
}

.btn--contact svg {
    height: 1em;
}

.btn--contact:hover svg {
    stroke: black;
    transition: 0.2s color, 0.2s 0.2s transform;
    transform: rotateZ(45deg);
}

.btn--contact:hover {
    background-color: white;
    color: black;
}

.btn--contact:disabled {
    opacity: 0.2;
    cursor: none;
    pointer-events: none;
}

.form-alert {
    text-transform: uppercase;
    transition: 0.2s all;
    line-height: 1;
    overflow: hidden;
    opacity: 0;
    display: block;
    margin-top: -1rem;
    max-height: 0;
    width: min(35ch, 90vw);
    font-size: max(1rem, 16pt);
}

.alert--failure {
    border-radius: max(1rem, 16pt);
    padding: 0.5em 1em;
    width: min(35ch, 90vw);
    font-size: max(1rem, 16pt);
    color: white;
    background: red;
}

.alert--success {
    border-radius: max(1rem, 16pt);
    padding: 0.5em 1em;
    width: min(35ch, 90vw);
    font-size: max(1rem, 16pt);
    color: var(--c-2);
    background: limegreen;
}

.alert--loading {
    border-radius: max(1rem, 16pt);
    padding: 0.5em 1em;
    width: min(35ch, 90vw);
    font-size: max(1rem, 16pt);
    color: white;
    background: blue;
}

.form-alert--visible {
    margin-top: 0;
    max-height: max(4 * 1rem, 4 * 16pt);
    opacity: 1;
}

footer {
    display: flex;
    color: var(--c-bkg);
    gap: 3rem;
    background: black;
    width: var(--viewportWidth);
    padding: 4rem 2rem 6rem 2rem;
}

.no-flexbox-gap footer > *:not(:last-child) {
    margin-bottom: 3rem;
    margin-right: 3rem;
}

footer section {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

footer h3 a {
font-size: 2rem;
color: var(--c-3);
transition: .2s all;
}

footer h3 a:hover {
color: var(--c-1);
}

footer ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    flex-wrap: wrap;
    max-height: 15.5rem;
    row-gap: 0.5rem;
    column-gap: 3rem;
}

.no-flexbox-gap footer ul > *:not(:last-child) {
    margin-bottom: 0.5rem;
    margin-right: 0.3rem;
}

footer li {
line-height: 1;
font-size: 1rem;
}

footer li.menu-item {
opacity: 0.6;
}

footer li svg {
    max-height: 1.7rem;
    transition: .2s all;
}

footer li a {
    display: flex;
    align-items: center;
    color: var(--c-bkg);
    gap: 0.5rem;
    transition: .2s all;
}

.no-flexbox-gap footer li a > *:not(:last-child) {
    margin-right: 0.5rem;
}

footer li a:hover {
    color: var(--c-3);
}

footer li a:hover svg {
    stroke: var(--c-3);
}

.copywrite {
    margin-bottom: 9rem;
}

.credit, .build  {
    opacity: 0.5;
    font-size: 0.75rem;
}

.credit a {
    color: var(--c-1);
}

.credit a:hover {
    text-decoration: underline;
}

.page--post .page-content{
    margin-top: 1rem;
    margin-bottom: 8rem;
}

.page--post .page-content{
    margin-top: 1rem;
}

.page--post .nav__wrapper{
    align-self: flex-start;
}

.page--post .hero__wrapper {
    --height: calc( min(60rem, var(--viewportWidth)) / 2);
    --diff: 5rem;
    --weird-gap: 0.04rem;
    --offset-from-top: calc(var(--height) - var(--diff) + var(--weird-gap));
}

.page--post .hero__wrapper svg{
    bottom: auto;
    top: calc(var(--diff) - var(--r-1));
}

.page--post .hero__banner{
    bottom: auto;
    top: var(--offset-from-top);
    top: calc(-1 * var(--r-1) + -3rem);
    margin-bottom: calc(-1 * var(--r-1) + -3rem);
}

.post__intro{
    padding: 0 calc(4rem + var(--p-1));
    color: #999; /*var(--c-3);*/
    font-size: 1.4rem;
    text-align: justify;
    font-style: italic;
    line-height: 1.2;
}

article#post{
    font-size: 1rem;
    width: min(60ch, var(--viewportWidth));
    display: flex;
    flex-direction: column;
    align-items: center;
}

article#post h1{
    
}
article#post > header{
    gap: 0;
    width: min(60rem, var(--viewportWidth));
    padding: 0 2rem;
}

article#post time{
    font-size: 0.8rem;
    font-weight: 600;
}

article#post .post__image{
    border-radius: 2rem;
    width: 100%;
    height: var(--height);
    object-fit: cover;
    object-position: top;
}

article#post .post__content a{
    display: inline;
}

article#post .post__content img{
    width: 100%;
    margin: 2rem 0;
    border-radius: var(--r-1);
    background-color: var(--c-1);
}

article#post .post__content h1{
    font-size: 2.5rem;
    color: var(--c-2);
    width: auto;
    margin: 2rem 0 1rem 0;
}

article#post .post__content h2{
    font-size: 2rem;
    color: var(--c-2);
    width: auto;
    margin: 2em 0 1em 0;
}

article#post .post__content h3{
    font-size: 1.75rem;
    color: var(--c-2);
    width: auto;
    margin: 2em 0 1em 0;
    font-family: Bebas Neue;
    line-height: 0.85;
}

article#post .post__content h4{
    font-size: 1.6rem;
    color: var(--c-2);
    width: auto;
    margin: 2em 0 1em 0;
    font-family: Bebas Neue;
    line-height: 0.85;
}

article#post .post__content h5{
    font-size: 1.4rem;
    color: var(--c-2);
    width: auto;
    margin: 2em 0 1em 0;
    font-family: Bebas Neue;
    line-height: 0.85;
}

article#post .post__content h6{
    font-size: 1.2rem;
    color: var(--c-2);
    width: auto;
    margin: 2em 0 1em 0;
    font-family: Bebas Neue;
    line-height: 0.85;
}

article#post .post__content blockquote{
    width: 120%;
    margin-left: -10%;
    background-color: var(--c-3);
    color: var(--c-bkg);
    font-size: 3rem;
    font-style: italic;
    padding: 2rem 4rem;
    line-height: 1;
    border-radius: 1rem 6rem;
    position: relative;
}

article#post .post__content blockquote::before{
    content: "\"";
    position: absolute;
    top: 1rem;
    left: 0rem;
    font-size: 6rem;
}

article#post .post__content blockquote::after{
    content: "\"";
    position: absolute;
    bottom: -2rem;
    right: 2rem;
    font-size: 6rem;
}


article#post .post__content blockquote p {
    margin: 0;
}

article#post .post__content p{
    margin: 1.5em 0;
    text-align: justify;
}

article#post .post__content hr{
    margin: 2em 0;
}

article#post .post__content th, article#post .post__content td{
    padding: .5rem;
    color: #666;
}

article#post .post__content code{
    margin: 1em 0;
    padding: 2rem;
    background-color: var(--c-1);
    display: block;
    color: #666;
    border-radius: 1rem;
}

article#post .post__content pre{
    margin: 1em 0;
    background: none;
    padding: 0;
    border-radius: 0;
}

article#post .post__content pre code{
    margin: 0;
}


article#post .post__content > ul, article#post .post__content > ol {
    margin: 2rem;

}

article#post .post__content ul { 
    list-style-type: disc; 
    /* list-style-position: inside; */
 }
 article#post .post__content ol { 
    list-style-type: decimal; 
    /* list-style-position: inside; */
 }
 article#post .post__content ul ul, article#post .post__content ul { 
    list-style-type: circle; 
    /* list-style-position: inside; */
    margin-left: 2rem; 
 }
 article#post .post__content ol ol, ul ol { 
    list-style-type: lower-latin; 
    /* list-style-position: inside; */ 
    margin-left: 2rem; 
 }
 article#post .post__content li {
    margin-bottom: .35em;
    line-height: 1.4;
 }
 article#post .post__content li::marker {
    font-weight: 600;
 }

ul#blogs{
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    justify-content: center;
    margin: 2rem 0 8rem 0;
    gap: 1rem;
}

.blog {
    width: max(25vw, 400px);
}

.blog a {
    height: 100%;
}

.blog a article{
    transition: all .2s;
    height: 100%;
}

.blog a:hover article {
    transform: scale(1.02);
    background-color: var(--c-3);
}

.blog a:hover time {
    color: var(--c-bkg);
}


.blog article {
    background-color: var(--c-1);
    border-radius: var(--r-1);
    padding: 2rem;
    width: auto;
}

.blog h1 {
    width: auto;
}

.blog img{
    border-radius: calc(var(--r-1) / 2);
}

.blog time {
    color: var(--c-3);
    font-size: 1rem;
    font-weight: 700;
    text-transform: uppercase;
}

.blog p {
    color: var(--c-2);
}

@media screen and (max-width: 1300px) {
    
}
html{-webkit-text-size-adjust:100%;line-height:1.15;-moz-tab-size:4;-o-tab-size:4;tab-size:4}body{font-family:system-ui,-apple-system,Segoe UI,Roboto,Helvetica,Arial,sans-serif,Apple Color Emoji,Segoe UI Emoji;margin:0}hr{color:inherit;height:0}abbr[title]{-webkit-text-decoration:underline dotted;text-decoration:underline dotted}b,strong{font-weight:bolder}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:1em}small{font-size:80%}sub,sup{font-size:75%;line-height:0;position:relative;vertical-align:baseline}sub{bottom:-.25em}sup{top:-.5em}table{border-color:inherit;text-indent:0}button,input,optgroup,select,textarea{font-family:inherit;font-size:100%;line-height:1.15;margin:0}button,select{text-transform:none}[type=button],[type=submit],button{-webkit-appearance:button}::-moz-focus-inner{border-style:none;padding:0}legend{padding:0}progress{vertical-align:baseline}::-webkit-inner-spin-button,::-webkit-outer-spin-button{height:auto}[type=search]{-webkit-appearance:textfield;outline-offset:-2px}::-webkit-search-decoration{-webkit-appearance:none}::-webkit-file-upload-button{-webkit-appearance:button;font:inherit}summary{display:list-item}blockquote,dd,dl,figure,h1,h2,h3,h4,h5,h6,hr,p,pre{margin:0}button{background-color:transparent;background-image:none}fieldset,ol,ul{margin:0;padding:0}ol,ul{list-style:none}html{font-family:ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,Helvetica Neue,Arial,Noto Sans,sans-serif,Apple Color Emoji,Segoe UI Emoji,Segoe UI Symbol,Noto Color Emoji;line-height:1.5}body{font-family:inherit;line-height:inherit}*,:after,:before{border:0 solid;box-sizing:border-box}hr{border-top-width:1px}img{border-style:solid}textarea{resize:vertical}input::-moz-placeholder,textarea::-moz-placeholder{color:#cbd5e0;opacity:1}input::placeholder,textarea::placeholder{color:#cbd5e0;opacity:1}[role=button],button{cursor:pointer}table{border-collapse:collapse}h1,h2,h3,h4,h5,h6{font-size:inherit;font-weight:inherit}a{color:inherit;text-decoration:inherit}button,input,optgroup,select,textarea{color:inherit;line-height:inherit;padding:0}code,kbd,pre,samp{font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,Liberation Mono,Courier New,monospace}audio,canvas,embed,iframe,img,object,svg,video{display:block;vertical-align:middle}img,video{height:auto;max-width:100%}[hidden]{display:none}*,:after,:before{--tw-border-opacity:1;border-color:rgba(237,242,247,var(--tw-border-opacity))}a{--tw-text-opacity:1;color:rgba(43,108,176,var(--tw-text-opacity))}a:hover{text-decoration:underline}html{color:#000;font-family:Nunito,sans-serif;font-size:2vmin;scroll-behavior:smooth}:root{--r-1:2rem;--p-1:1.5rem;--c-bkg:#fff;--c-1:#ececec;--c-2:#000;--c-3:#00c2ff;--c-4:#ffb000;--viewportWidth:calc(100vw - var(--scrollbarWidth))}.site-logo{border:3px solid var(--c-1);border-radius:1rem;height:5rem;transform:rotate(0deg) translateY(.4rem);transition:all .2s;width:5rem}.site-logo:hover{transform:rotate(4deg) translateY(.4rem) scale(1.1)}.site-header{align-items:baseline;display:flex;gap:1rem;justify-content:center}.no-flexbox-gap .site-header>:not(:last-child){margin-right:1rem}.site-title{font-family:Bebas Neue;font-size:3rem;font-style:normal;font-weight:400;letter-spacing:.24em;line-height:1;margin:3rem 0 0;text-transform:uppercase;width:auto}#page{justify-content:space-between;min-height:100vh}#page,.page-content{align-items:center;display:flex;flex-direction:column}.btn{cursor:pointer;font-family:Nunito,sans-serif;transition:all .2s}.btn:hover,a:hover{text-decoration:none}.page--home article{display:flex;flex-direction:column;gap:1rem;padding:2rem;width:min(60rem,var(--viewportWidth))}.no-flexbox-gap article>:not(:last-child){margin-bottom:1rem}article>header{display:flex;flex-direction:column;gap:2rem}.no-flexbox-gap article>header>:not(:last-child),article>header{margin-bottom:2rem}article>header>aside{font-size:max(1rem,10pt);max-width:60ch}.inset{align-items:center;background:var(--c-1);display:flex;flex-direction:column;padding:4rem 0;position:relative;width:var(--viewportWidth)}.inset:before{border-radius:0 0 var(--r-1) var(--r-1);top:0}.inset:after,.inset:before{background:var(--c-bkg);content:"";height:var(--r-1);left:0;position:absolute;width:100%}.inset:after{border-radius:var(--r-1) var(--r-1) 0 0;bottom:0}h1{font-size:3.5rem;line-height:.77;padding-top:.75rem;width:17ch}h1,h2{color:var(--c-2);font-family:Bebas Neue}h2{font-size:3rem;line-height:.85}h2.blog-header{background:var(--c-3);border-radius:999px;color:#fff;font-family:Nunito;font-size:2.3rem;letter-spacing:1rem;padding:.4rem 0 .4rem 1rem;text-transform:uppercase}iframe{border-radius:var(--r-1);min-width:100%}
code[class*=language-],pre[class*=language-]{color:#c5c8c6;direction:ltr;font-family:Inconsolata,Monaco,Consolas,Courier New,Courier,monospace;-webkit-hyphens:none;hyphens:none;line-height:1.5;-moz-tab-size:4;-o-tab-size:4;tab-size:4;text-align:left;text-shadow:0 1px rgba(0,0,0,.3);white-space:pre;word-break:normal;word-spacing:normal}pre[class*=language-]{border-radius:.3em;margin:.5em 0;overflow:auto;padding:1em}:not(pre)>code[class*=language-],pre[class*=language-]{background:#1d1f21}:not(pre)>code[class*=language-]{border-radius:.3em;padding:.1em}.token.cdata,.token.comment,.token.doctype,.token.prolog{color:#7c7c7c}.token.punctuation{color:#c5c8c6}.namespace{opacity:.7}.token.keyword,.token.property,.token.tag{color:#96cbfe}.token.class-name{color:#ffffb6;text-decoration:underline}.token.boolean,.token.constant{color:#9c9}.token.deleted,.token.symbol{color:#f92672}.token.number{color:#ff73fd}.token.attr-name,.token.builtin,.token.char,.token.inserted,.token.selector,.token.string{color:#a8ff60}.token.variable{color:#c6c5fe}.token.operator{color:#ededed}.token.entity{color:#ffffb6;cursor:help}.token.url{color:#96cbfe}.language-css .token.string,.style .token.string{color:#87c38a}.token.atrule,.token.attr-value{color:#f9ee98}.token.function{color:#dad085}.token.regex{color:#e9c062}.token.important{color:#fd971f}.token.bold,.token.important{font-weight:700}.token.italic{font-style:italic}