/*
	Civilization x ACTUALIZE (2024/25)
*/
/***
The new CSS Reset - version 1.4.5 (last updated 13.1.2022)
via https://alexclark.co.nz/blog/creating-a-simple-css-slider-with-scroll-snapping
***/
/*
    Remove all the styles of the "User-Agent-Stylesheet", except for the 'display' property
    - The "symbol *" part is to solve Firefox SVG sprite bug
 */
*:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)) {
  all: unset;
  display: revert;
  -webkit-tap-highlight-color: transparent;
}
*:where(:not(iframe, canvas, img, svg, video):not(svg *, symbol *)):focus:not(:focus-visible) {
  outline: none;
}

/* Preferred box-sizing value */
*, *::after, *::before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

html, body, body div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, abbr, address, cite, code, del, dfn, em, img, ins, kbd, q, samp, small, strong, sub, sup, var, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, main, article, aside, figure, footer, header, hgroup, menu, nav, section, time, mark, audio, video, input, select, button {
  margin: 0;
  padding: 0;
  border: 0;
  outline: 0;
  font-size: 100%;
  vertical-align: baseline;
  background: transparent;
  text-decoration: none;
}

/* Reapply the pointer cursor for anchor tags */
a {
  cursor: revert;
  text-decoration-line: none;
}

/* Remove list styles (bullets/numbers) */
ol, ul, menu {
  list-style: none;
}

/* For images to not be able to exceed their container */
img {
  display: block;
  max-width: 100%;
}

/* removes spacing between cells in tables */
table {
  border-collapse: collapse;
}

/* revert the 'white-space' property for textarea elements on Safari */
textarea {
  white-space: revert;
}

/* fix the feature of 'hidden' attribute.
   display:revert; revert to element instead of attribute */
:where([hidden]) {
  display: none;
}

/* revert for bug in Chromium browsers
   - fix for the content editable attribute will work properly. */
:where([contenteditable]) {
  -moz-user-modify: read-write;
  -webkit-user-modify: read-write;
  overflow-wrap: break-word;
  -webkit-line-break: after-white-space;
}

/* apply back the draggable feature - exist only in Chromium and Safari */
:where([draggable=true]) {
  -webkit-user-drag: element;
}

figure.background img, .profile figure img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

em, i {
  font-style: italic;
}

@font-face {
  font-family: "Lyon";
  src: url("fonts/LyonText-RegularNo2-Web.woff2") format("woff2"), url("fonts/LyonText-RegularNo2-Web.woff") format("woff");
  font-weight: normal;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lyon";
  src: url("fonts/LyonText-RegularNo2Italic-Web.woff2") format("woff2"), url("fonts/LyonText-RegularNo2Italic-Web.woff") format("woff");
  font-weight: normal;
  font-style: italic;
  font-display: swap;
}
@font-face {
  font-family: "Lyon";
  src: url("fonts/LyonText-Semibold-Web.woff2") format("woff2"), url("fonts/LyonText-Semibold-Web.woff") format("woff");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Lyon";
  src: url("fonts/LyonText-SemiboldItalic-Web.woff2") format("woff2"), url("fonts/LyonText-SemiboldItalic-Web.woff") format("woff");
  font-weight: 600;
  font-style: italic;
  font-display: swap;
}
body {
  font-family: "Lyon", serif;
  font-weight: regular;
  font-style: normal;
  font-display: swap;
}

h1, .h1, h2, .h2, h3, .h3, strong, b, header, .modal .modal-close {
  font-family: "Lyon", serif;
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

:-webkit-autofill {
  -webkit-text-fill-color: #212121;
  -webkit-box-shadow: 0 0 0px 1000px #fff inset;
}

:-moz-autofill {
  /* Firefox 18- */
  -moz-text-fill-color: #212121;
  -moz-box-shadow: 0 0 0px 1000px #fff inset;
}

::-moz-autofill {
  /* Firefox 19+ */
  -moz-text-fill-color: #212121;
  -moz-box-shadow: 0 0 0px 1000px #fff inset;
}

::-webkit-input-placeholder {
  color: inherit;
}

:-moz-placeholder {
  /* Firefox 18- */
  color: inherit;
}

::-moz-placeholder {
  /* Firefox 19+ */
  color: inherit;
}

:-ms-input-placeholder {
  color: #212121;
  overflow: hidden;
}

::selection {
  background: #212121;
  color: #fff;
  text-shadow: none;
}

::-moz-selection {
  background: #212121;
  color: #fff;
  text-shadow: none;
}

html {
  width: 100%;
  height: 100%;
  /* mobile viewport bug fix */
  min-height: -webkit-fill-available;
  -webkit-font-smoothing: antialiased;
  -webkit-text-size-adjust: none;
  -moz-osx-font-smoothing: grayscale;
  /* fixes FF over-bolding */
  -ms-overflow-style: -ms-autohiding-scrollbar;
  font-size: 62.5%;
  /* 10px reset */
  position: relative;
  background-color: #fff;
  -webkit-overflow-scrolling: touch;
  -ms-overflow-style: -ms-autohiding-scrollbar;
  -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
  scroll-behavior: smooth;
  scrollbar-width: thin;
  scrollbar-color: #212121 transparent;
}

body {
  width: 100%;
  min-height: 100%;
  background-color: #fff;
  font-size: 16px;
  line-height: 1.6;
}
@media only screen and (min-width: 769px) {
  body {
    font-size: 2rem;
  }
}
body:has(.modal.open) {
  height: 100vh;
  height: 100dvh;
  overflow: hidden;
}

h1, .h1 {
  font-size: 400%;
  line-height: 0.98;
}
@media only screen and (min-width: 769px) {
  h1, .h1 {
    font-size: 400%;
  }
}

h2, .h2 {
  font-size: 220%;
  line-height: 1.1;
}
@media only screen and (min-width: 769px) {
  h2, .h2 {
    font-size: 300%;
  }
}

h3, .h3 {
  font-size: 175%;
  line-height: 1.1;
}
@media only screen and (min-width: 769px) {
  h3, .h3 {
    font-size: 220%;
  }
}

h4, .h4 {
  font-size: 125%;
  font-weight: 500;
  line-height: 1.3;
}

h2, h3 {
  text-shadow: 0 -1px 0 rgba(255, 255, 255, 0.25), 0 1px 0 rgba(33, 33, 33, 0.15);
}

figcaption button,
.grid-item button,
main a,
.modal a {
  color: inherit;
  text-decoration: underline;
  text-decoration-thickness: 0.0625em;
  text-underline-offset: 0.15em;
}
figcaption button:hover, figcaption button:focus:not(:active),
.grid-item button:hover,
.grid-item button:focus:not(:active),
main a:hover,
main a:focus:not(:active),
.modal a:hover,
.modal a:focus:not(:active) {
  background-color: #2f2f2f;
  text-decoration: none;
  padding: 2px 2rem;
  margin: -2px -2rem;
}

a,
button {
  cursor: pointer;
}

svg,
img {
  display: block;
  max-width: 100%;
}

svg {
  overflow: visible;
  fill: currentColor;
}

h1 + h2,
p + h2,
p + h3,
ul + h3,
ol + h3,
h1 + hr,
h1 + p,
h1 + form,
h2 + hr,
h2 + h3,
blockquote + h3,
hr + h3,
h2 + dl {
  margin-top: 3rem;
}

h2 + p,
h3 + hr + p,
h3 + p,
h3 + ul,
h3 + ol,
ul + hr,
ul + ul,
ul + hr + ul,
ul + p,
h3 + dl,
ul + hr + p,
hr + p,
p + dl,
p + ul,
ol + p,
p + ol,
h3 + h4,
p + h4,
ul + h4,
ol + h4,
p + blockquote,
blockquote + p,
h3 + blockquote,
h5 + ul,
h4 + ul,
p + p {
  margin-top: 1.5rem;
}

header {
  position: fixed;
  top: 0;
  left: 0;
  padding: 4rem;
  text-transform: uppercase;
}
header img {
  width: auto;
  height: 60px;
}
header p {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  padding: 4rem 0;
}
header p a {
  display: block;
  text-decoration: none;
  padding: 2px 2rem;
}
header p a:hover, header p a:focus:not(:active) {
  text-decoration: none;
  background-color: #2f2f2f;
}
header p a.current {
  font-weight: bold;
}
@media only screen and (max-width: 768px) {
  header {
    padding: 1rem;
    width: 100%;
    background-color: #fff;
    box-shadow: 0 0 1rem rgba(33, 33, 33, 0.5);
    transition: transform 0.382s ease-out;
    z-index: 10;
  }
  body:has(.modal.open) header, body:not([data-loaded].show-header) header {
    transform: translateY(-100%) !important;
  }
  header img {
    margin: 5px auto 1rem;
  }
  header p {
    padding: 0;
    flex-flow: row wrap;
    justify-content: center;
    align-items: center;
    text-wrap: pretty;
    text-wrap: balance;
    width: 100%;
    gap: 0;
  }
  header p a {
    padding: 5px 1rem;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
  }
  header p a::before {
    content: attr(data-text);
    content: attr(data-text)/"";
    height: 0;
    visibility: hidden;
    overflow: hidden;
    user-select: none;
    pointer-events: none;
    font-weight: bold;
  }
}
@media only screen and (max-width: 420px) {
  header p a {
    min-width: 40%;
  }
}
@media only screen and (min-width: 769px) {
  header {
    visibility: hidden;
    opacity: 0;
    transition: visibility 0s linear 0.382s, opacity 0.382s linear;
    will-change: visibility, opacity;
    background-image: none !important;
    z-index: 3;
  }
  body[data-loaded].show-header header {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
  }
}

figure.background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  overflow: hidden;
  background-color: #212121;
}
figure.background .img-wrap {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.191s, opacity 0.191s linear;
  will-change: visibility, opacity;
}
body:not(.show-header) figure.background .img-wrap {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}
figure.background img {
  position: absolute;
  top: 0;
  left: 0;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.764s, opacity 0.764s linear;
  will-change: visibility, opacity;
}
figure.background img:first-child, figure.background img.show {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}
figure.background img.hide {
  display: none;
}

section {
  position: relative;
  width: 100%;
}
@media only screen and (min-width: 1024px) {
  section {
    font-size: calc(1.2rem + 0.5vw);
  }
}

.wrap {
  width: 100%;
  position: relative;
  padding: 4rem 2rem;
  max-width: 42em;
  margin: 0 auto;
}

.welcome {
  position: relative;
  min-height: 100vh;
  min-height: 100svh;
  padding: 1rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  z-index: 2;
}
.welcome .card {
  border-radius: 4px;
  box-shadow: 0 0 1rem rgba(33, 33, 33, 0.5);
}
.welcome .card:not(.with-texture) {
  background-color: rgba(255, 255, 255, 0.8);
}
@media only screen and (min-width: 769px) {
  .welcome {
    padding: 4rem;
  }
}
@media only screen and (min-width: 1024px) {
  .welcome {
    height: 100vh;
    height: 100svh;
    padding: 8rem;
  }
  .welcome .card {
    position: fixed;
    top: 50%;
    left: 50%;
    width: 100%;
    max-width: 45em;
    padding: 4rem;
    transform: translate3d(-50%, -50%, 0);
    transition: all 0.382s ease-out;
  }
  body:not(.ready) .welcome .card,
  .welcome .card.hide {
    opacity: 0;
    cursor: default;
    transform: translate3d(-50%, -50%, 0) scale(0.95);
  }
}
.welcome .logo img {
  mix-blend-mode: multiply;
  margin: 4rem auto 4rem;
  width: 100%;
  max-width: 65rem;
}
.welcome .wrap {
  text-align: center;
}
.welcome .button-wrap {
  justify-content: center;
  margin-top: 4rem;
}
.welcome .button:hover, .welcome .button:focus:not(:active) {
  color: #f2f2f2;
}
.welcome h2 + p {
  margin-top: 1rem;
}

main {
  display: flex;
  width: 100%;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  position: relative;
  overflow-x: hidden;
  z-index: 2;
}
main section {
  width: 100%;
}
main .sheet {
  margin: 0 auto;
  padding: 8rem 0 0;
  max-width: 100rem;
}
main .sheet.footer {
  padding: 0;
}
main ul li + li {
  margin-top: 0.5em;
}
main .sheet::before,
main .wrap + .wrap::before {
  content: "";
  display: block;
  height: 4px;
  border-top: 1px solid rgba(255, 255, 255, 0.5);
  border-bottom: 1px solid rgba(33, 33, 33, 0.5);
  position: absolute;
  top: 0;
  left: -50%;
  width: 200vw;
}
main .footer-wrap {
  padding: 4rem;
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  main .wrap {
    padding: 8rem 2rem;
  }
}
@media only screen and (min-width: 1024px) {
  main .wrap {
    padding: 8rem 12rem;
    max-width: 56em;
  }
  main .wrap.grid-wrap {
    padding: 8rem 4rem;
  }
}
@media only screen and (min-width: 769px) and (max-width: 1279px) {
  main .sheet {
    padding-left: 28rem;
  }
}
@media only screen and (min-width: 1280px) and (max-width: 1439px) {
  main .wrap.grid-wrap {
    margin-right: -8rem;
  }
}
@media only screen and (min-width: 1440px) {
  main .sheet {
    padding: 8rem 0 4rem;
  }
}

.button-wrap img {
  display: block;
  width: 16rem;
  aspect-ratio: 1;
  object-fit: contain;
  mix-blend-mode: multiply;
}

.icons {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 4rem 1rem 0;
  gap: 1rem;
}
.icons + .sheet {
  padding-top: 0;
}
@media only screen and (min-width: 769px) {
  .icons {
    padding: 8rem 1rem 4rem;
  }
}
@media only screen and (min-width: 1024px) {
  .icons {
    padding: 12rem 4rem 0;
    gap: 2rem;
  }
}
@media only screen and (min-width: 1440px) {
  .icons {
    padding: 8rem 8rem 0;
  }
}
.icons img {
  width: calc(20% - 2rem);
  max-width: 16rem;
  aspect-ratio: 1;
  object-fit: contain;
  mix-blend-mode: multiply;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.191s, opacity 0.191s linear;
  will-change: visibility, opacity;
}
.icons img.in-view {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}
.icons img:nth-child(1), .icons img:last-child {
  transition-delay: 0.764s;
}
.icons img:nth-child(2), .icons img:nth-last-child(2) {
  transition-delay: 0.382s;
}
@media only screen and (max-width: 600px) {
  .icons img {
    width: calc(33% - 2rem);
  }
  .icons img:nth-child(1):nth-last-child(4), .icons img:nth-child(4):nth-last-child(1), .icons img:nth-child(1):nth-last-child(5), .icons img:nth-child(5):nth-last-child(1) {
    display: none;
  }
}

.illustration {
  position: absolute;
  width: 20rem;
  aspect-ratio: 1;
  object-fit: contain;
  mix-blend-mode: multiply;
  z-index: 0;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.191s, opacity 0.191s linear;
  will-change: visibility, opacity;
}
.illustration.in-view {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}
@media (prefers-reduced-motion: reduce) {
  .illustration {
    visibility: visible;
    opacity: 1;
    transition-delay: 0s;
  }
}
.illustration.top {
  top: 4rem;
}
.illustration.bottom {
  bottom: 25%;
  transform: translateY(50%);
}
.illustration.left {
  left: -12rem;
}
.illustration.right {
  right: -8rem;
}
.illustration.center {
  left: 50%;
  transform: translateX(-50%);
}
.illustration.middle {
  top: 50%;
  transform: translateY(-50%);
}
@media only screen and (max-width: 1200px) {
  .illustration.left {
    left: -8rem;
  }
  .illustration.right {
    right: -4rem;
  }
}
@media only screen and (max-width: 1024px) {
  .illustration.right, .illustration.left {
    right: auto;
    left: 0;
    transform: translateX(-100%);
  }
  .illustration.right.bottom, .illustration.left.bottom {
    transform: translateX(-100%) translateY(50%);
  }
}
@media only screen and (max-width: 768px) {
  .illustration {
    display: none;
  }
}

.flex {
  display: flex;
  width: 100%;
}

.space-between {
  justify-content: space-between;
}

.baseline {
  align-items: baseline;
}

.button-wrap {
  display: flex;
  align-items: center;
  width: 100%;
  margin: 8rem auto;
}
@media only screen and (max-width: 768px) {
  .button-wrap {
    margin: 2rem auto;
  }
}
.button-wrap:first-child {
  margin-top: 0;
}
.button-wrap:last-child {
  margin-bottom: 0;
}

.button {
  display: inline-block;
  padding: 1rem 2rem;
  color: inherit;
  font-size: 1.45rem;
  font-weight: bold;
  text-decoration: none;
  text-transform: uppercase;
  color: #2f2f2f;
  border: 1px solid;
  border-color: rgba(255, 255, 255, 0.5) rgba(33, 33, 33, 0.5) rgba(33, 33, 33, 0.5) rgba(255, 255, 255, 0.5);
  border-radius: 3px;
  letter-spacing: 0.1em;
}
.button:hover, .button:focus:not(:active) {
  background-color: #2f2f2f;
  border-color: #2f2f2f;
}

.grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 2rem;
  width: 100%;
  margin: 4rem auto;
}
@media only screen and (min-width: 769px) {
  .grid {
    grid-template-columns: 1fr 1ft 1fr;
  }
}
@media only screen and (min-width: 1024px) {
  .grid {
    grid-template-columns: repeat(auto-fit, minmax(24rem, 1fr));
  }
}

figure:not([class]) img {
  width: 100%;
  height: auto;
}

.grid-item {
  position: relative;
}

.profile {
  width: 100%;
  display: flex;
  flex-direction: row;
  align-items: flex-end;
  gap: 4rem;
  padding: 4rem;
  background-color: #fff;
  border-radius: 4px;
  box-shadow: 0 0 1rem rgba(33, 33, 33, 0.5);
}
.profile figure {
  aspect-ratio: 1;
  background-color: #fff;
  flex: 1;
}
.profile figure img {
  mix-blend-mode: luminosity;
}
.profile figure + figcaption {
  width: 61.8%;
  display: flex;
  flex-direction: column;
  text-align: left;
}
.profile h3 + p {
  margin-top: 0;
}

.grid .profile {
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translate(-50%, 0);
  z-index: 1;
  gap: 2rem;
  width: calc(150% + 8rem);
  max-width: 56rem;
  padding: 2rem;
  font-size: 85%;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.191s, opacity 0.191s linear;
  will-change: visibility, opacity;
}
.grid .profile:hover, .grid .profile:focus:not(:active) {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}
@media only screen and (max-width: 1279px) {
  .grid .profile {
    width: calc(100% + 4rem);
    flex-direction: column;
  }
  .grid .profile figure,
  .grid .profile figcaption {
    width: 100% !important;
    flex: none;
  }
}
@media only screen and (max-width: 769px) {
  .grid .profile {
    max-width: calc(50vw - 4rem);
  }
}
.grid .profile .full {
  display: none;
}
.grid .profile button {
  display: block;
}
[data-touch-events] .grid .profile {
  display: none;
}

.modal .profile {
  position: relative;
  align-items: flex-start;
  max-width: 36em;
}
.modal .profile:has(figure) {
  max-width: 52em;
}
.modal .profile h3 {
  padding-right: 4rem;
}
.modal .profile .intro {
  display: none;
}
.modal .profile .full {
  margin-top: 2rem;
}
@media only screen and (max-width: 769px) {
  .modal .profile {
    flex-direction: column;
  }
  .modal .profile figure,
  .modal .profile figcaption {
    width: 100% !important;
    flex: none;
  }
  .modal .profile .modal-close {
    padding: 0;
    width: 4rem;
    height: 4rem;
  }
}

button.profile-reveal:hover + .profile, button.profile-reveal:focus:not(:active) + .profile {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}

.modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100%;
  height: 100dvh;
  z-index: 4;
  background-color: rgba(33, 33, 33, 0.5);
  padding: 1rem;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  visibility: hidden;
  opacity: 0;
  transition: visibility 0s linear 0.382s, opacity 0.382s linear;
  will-change: visibility, opacity;
}
body:not([data-loaded]) .modal {
  display: none;
}
.modal .modal-wrap {
  position: relative;
  width: 100%;
  min-height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  transform: translateY(4rem) scale(0.9);
  transition: transform 0.382s ease-out;
}
.modal.open {
  visibility: visible;
  opacity: 1;
  transition-delay: 0s;
}
.modal.open .modal-wrap {
  transform: translateY(0) scale(1);
}
.modal .modal-close {
  position: absolute;
  top: 0;
  right: 0;
  padding: 4rem;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  font-size: 200%;
  line-height: 0.5;
}
.modal .modal-close:hover, .modal .modal-close:focus:not(:active) {
  transform: scale(1.1);
}

dl.accordion {
  display: block;
  width: 100%;
  text-align: left;
}
dl.accordion dt {
  position: relative;
}
dl.accordion dt button {
  position: relative;
  display: block;
  width: 100%;
  border: 0;
  padding: 0;
  text-align: left;
  padding: 1.4rem;
  cursor: ns-resize;
}
dl.accordion dt button::after {
  content: "+";
  display: block;
  position: absolute;
  top: 50%;
  right: 1.4rem;
  cursor: inherit;
  line-height: inherit;
  font-size: 2rem;
  text-align: center;
  transform: translateY(-50%);
  transition: transform 0.191s linear;
}
dl.accordion dt button:hover, dl.accordion dt button:focus:not(:active) {
  background-color: #2f2f2f;
}
dl.accordion dt.open button:after {
  transform: translateY(-50%) rotate(-135deg);
}
dl.accordion h3 {
  font-size: inherit;
  font-weight: inherit;
  font-family: inherit;
  letter-spacing: inherit;
  font-weight: 600;
  cursor: inherit;
}
dl.accordion dd {
  padding: 0 1.4rem 1.4rem;
  opacity: 0;
  transition: opacity 0.382s linear;
  text-wrap: pretty;
}
body[data-loading=true] dl.accordion dd:not(.open) {
  display: none;
}
dl.accordion dd.open {
  opacity: 1;
}
dl.accordion dd + dt::before {
  content: "";
  display: block;
  height: 4px;
  border-top: 1px solid rgba(33, 33, 33, 0.5);
  border-bottom: 1px solid rgba(255, 255, 255, 0.5);
}

.footer-wrap {
  padding: 0 2rem !important;
  align-items: center;
}
@media only screen and (min-width: 769px) and (max-width: 1024px) {
  .footer-wrap {
    padding: 0 2rem !important;
  }
}
@media only screen and (min-width: 1024px) {
  .footer-wrap {
    padding: 0 12rem !important;
    max-width: 56em;
  }
}
.footer-wrap img {
  width: 20%;
  max-width: 16rem;
  aspect-ratio: 1;
  object-fit: contain;
  mix-blend-mode: multiply;
}
.footer-wrap a:hover, .footer-wrap a:focus:not(:active) {
  color: #fff;
}

.widont {
  text-wrap: pretty;
}

h1, h2, h3,
.balance-text,
.welcome .wrap p,
.grid-item,
.modal .profile .full {
  text-rendering: optimizeLegibility;
  text-wrap: pretty;
  text-wrap: balance !important;
}

.pause-animations * {
  animation: none !important;
  transition: none !important;
}

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

@media only screen and (max-width: 768px) and (max-height: 400px) {
  main {
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
  }
}