:root {
  --bg: rgb(30, 32, 37);
  --bar: rgb(38, 40, 45);
  --pill: rgb(50, 50, 50);
  --muted: rgb(143, 144, 146);
  --line: rgba(247, 247, 247, 0.6);
  --link: rgb(163, 217, 246);
  --serif: "Playfair Display", serif;
  --light: "Nunito Sans", "Avenir Next", Avenir, sans-serif;
}

* { box-sizing: border-box; }
html { color-scheme: dark; }
body { margin: 0; background: var(--bg); color: #fff; font: 20px/1.4 Arial, Helvetica, sans-serif; }
img { display: block; max-width: 100%; }
a { color: inherit; }
h1, h2, h3, h4, p, ul { margin: 0; }

/* ---------- header ---------- */
.site-header { background: var(--bg); text-align: center; }
.brand { height: 93px; padding-top: 24px; }
.brand a { font: 23px/1.2 var(--serif); text-decoration: none; }
.brand p { font: 300 15px/1.6 var(--light); margin-top: 4px; }
.bar { background: var(--bar); height: 46px; }
.bar .inner { position: relative; max-width: 980px; height: 100%; margin: 0 auto; display: flex; justify-content: center; gap: 77px; }
.bar .inner > a { font: 300 14px/45px var(--light); color: var(--muted); text-decoration: none; padding: 0 10px; }
.bar .inner > a:hover, .bar .inner > a.on { color: #fff; }
.lang { position: absolute; right: 79px; top: 0; display: flex; height: 45px; border-radius: 10px; background: var(--pill); }
.lang a { display: flex; align-items: center; gap: 8px; padding: 0 20px; font: 300 16px var(--light); color: var(--muted); text-decoration: none; border-radius: 10px; }
.lang a.on { background: rgba(247, 247, 247, 0.8); color: var(--bg); }
.lang img { width: 22px; height: 22px; }

/* ---------- footer ---------- */
footer { background: var(--bar); height: 112px; display: flex; align-items: center; justify-content: center; font: 300 14px var(--light); }

/* ---------- home ---------- */
.home { max-width: 824px; margin: 0 auto; padding: 54px 0 51px; text-align: center; }
.home h1 { font: 400 40px/1.2 var(--serif); }
.home h2 { font: 400 30px/1.25 var(--serif); margin: 53px 0 17px; }
.home h1 + h2 { margin-top: 58px; }
.home .grid + h2 { margin-top: 37px; }
.grid { display: grid; gap: 19px; }
.g2 { grid-template-columns: repeat(2, 1fr); }
.g3 { grid-template-columns: repeat(3, 1fr); }
.grid img { width: 100%; border-radius: 17px; }
.g2 img { aspect-ratio: 402 / 226; object-fit: cover; }
.g3 img { aspect-ratio: 1; object-fit: cover; }
.more { display: inline-flex; align-items: center; gap: 24px; margin-top: 41px; font: 600 39px/1.2 Poppins, sans-serif; text-decoration: none; }
.more img { width: 47px; height: 40px; object-fit: cover; }

/* ---------- sobre ---------- */
.about { max-width: 980px; margin: 0 auto; padding: 20px 0 79px; }
.about h1 { font: 400 40px/1.2 var(--serif); text-align: center; margin-bottom: 37px; }
.about .row { display: flex; gap: 30px; padding-left: 41px; }
.about .row > img { width: 357px; height: 383px; object-fit: cover; flex: none; }
.about .text { max-width: 534px; font: 300 16px/1.7 var(--light); text-align: justify; }
.about .text p + p { margin-top: 28px; }

/* ---------- contato ---------- */
.contact { max-width: 980px; margin: 0 auto; padding: 52px 0 121px; text-align: center; font: 300 15px var(--light); }
.contact h1 { font: 400 40px/1.2 var(--serif); margin-bottom: 28px; }
.contact p { margin-bottom: 39px; }
.contact a { text-decoration: none; }
.contact .icons { display: flex; justify-content: center; gap: 156px; margin-top: 113px; }
.contact .icons img { width: 33px; height: 30px; object-fit: cover; }

/* ---------- páginas de projeto ---------- */
.hero { position: relative; background: var(--muted) center / cover no-repeat; }
.hero > img { width: 100%; height: 100%; object-fit: cover; }
.hero .logo { position: absolute; left: 50%; top: 36px; width: 1152px; max-width: none; height: 277px; transform: translateX(-50%); z-index: 1; }
.hero .center { position: absolute; left: 50%; top: 0; width: 600px; height: 100%; transform: translateX(-50%); }

.col { max-width: 980px; margin: 0 auto; padding-bottom: 60px; }
.col > :is(h1, h2, h3, h4, p, ul, .cta, .levels, .note) { margin-left: 10px; margin-right: 10px; }
.col h1 { font: 700 36px/1.15 Arial, sans-serif; margin-top: 32px; margin-bottom: 35px; }
.col h1.big { font-size: 56px; margin-top: 55px; margin-bottom: 44px; }
.col h2 { font: 700 36px/1.15 Arial, sans-serif; margin-top: 39px; margin-bottom: 15px; }
.col h3 { font: 700 30px/1.1 Arial, sans-serif; margin-top: 32px; margin-bottom: 33px; }
.col h4 { font: 700 24px/1.15 Arial, sans-serif; margin: 20px 10px 30px; }
.col p + p { margin-top: 12px; }
.col p.justify { text-align: justify; }
.col ul { padding-left: 30px; }
.col ul ul { padding-left: 36px; list-style: circle; }
.col li { line-height: 27px; }
.cta { display: flex; align-items: center; gap: 19px; margin-top: 21px; font: 700 28px/1.1 Arial, sans-serif; }
.cta img { width: 56px; height: 56px; }
.video { margin-top: 24px; aspect-ratio: 980 / 550; }
.video iframe { width: 100%; height: 100%; border: 0; }
hr { border: 0; border-top: 3px solid var(--line); margin: 32px 0; }
.note { color: rgb(247, 247, 247); }
.note a { color: var(--link); }

.center-img { margin: 0 auto; }
.stack img { margin: 0 auto; }
.stack img + img { margin-top: 25px; }
.cells { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; margin: 40px 40px 0; row-gap: 40px; }
.cells > div { display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.cells img { margin: 0 auto; }

/* chemical merge */
.atoms { font-size: 18px; row-gap: 72px; }
.atoms span { display: block; margin-top: 12px; }
.atoms img + span { margin-top: 16px; }
.hitbox { display: flex; align-items: center; gap: 44px; margin: 40px 10px 0 16px; }
.hitbox p { width: 178px; }
.water { margin-top: 60px; }
.water > div { justify-content: flex-start; gap: 0; }
.water .fig { height: 130px; display: flex; align-items: center; justify-content: center; }
.water .formula { font-size: 32px; }
.water .formula sub { font-size: 20px; }
.bonds { margin-top: 50px; }
.bonds > div { justify-content: center; }
.bonds p { margin-top: 30px; max-width: 230px; }
.pair { display: flex; gap: 33px; align-items: end; margin-top: 30px; }
.two-col { display: grid; grid-template-columns: 494px 1fr; line-height: 33.5px; }

/* lost in space and time */
.levels { display: grid; grid-template-columns: repeat(2, 403px); justify-content: space-between; row-gap: 90px; margin: 40px 27px 0 36px !important; text-align: center; }
.level:last-child { grid-column: 1 / -1; justify-self: center; }
.level h5 { font: 700 25px/1.12 Arial, sans-serif; margin: 0 0 13px; }
.level .ln { line-height: 33px; }
.level .scene { position: relative; width: 403px; height: 201px; margin-top: 15px; }
.level .scene img { position: absolute; max-width: none; }
.level .scene img:first-child { position: static; width: 403px; height: 201px; }
.level .desc { width: 350px; margin: 19px auto 0; }

/* sums */
.cards { margin: 30px 20px 0; row-gap: 50px; }
.cards > div { justify-content: flex-start; }
.cards img { width: 194px; height: 267px; }
.cards p { margin-top: 12px; max-width: 290px; }
.cards p + p { margin-top: 12px; }

@media (max-width: 1000px) {
  .col, .about, .contact { padding-left: 16px; padding-right: 16px; }
  .home { padding-left: 16px; padding-right: 16px; }
  .lang { position: static; margin-left: 12px; }
  .bar .inner { gap: 16px; }
  .about .row { flex-direction: column; align-items: center; padding: 0; }
  .levels { grid-template-columns: 1fr; justify-items: center; margin-left: 0 !important; margin-right: 0 !important; }
  .cells, .two-col { grid-template-columns: 1fr; margin-left: 0; margin-right: 0; }
  .g3 { grid-template-columns: repeat(2, 1fr); }
  .hitbox { flex-wrap: wrap; }
}