/******************************************************************************
START Glitch hello-app default styles

The styles in this section do some minimal CSS resets, set default fonts and 
colors, and handle the layout for our footer and "Remix on Glitch" button. If
you're new to CSS they may seem a little complicated, but you can scroll down
to this section's matching END comment to see page-specific styles.
******************************************************************************/
/* Import fonts */
@import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@100..900&display=swap');

/* Our default values set as CSS variables */
:root {
  --color-bg: #d7f5ef;
  --color-text-main: #000000;
  --color-primary: #afece0;
  --wrapper-height: 85vh;
  --image-max-width: 320px;
}

/* Basic page style resets */
* {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

/* Navigation grid */
.footer {
  display: flex;
  justify-content: space-between;
  margin: 1rem auto 0;
  padding: 1rem 0 0.75rem 0;
  width: 100%;
  flex-wrap: wrap;
  border-top: 4px solid #fff;
}

.footer a:not(.btn--remix):link,
a:not(.btn--remix):visited {
  font-family: HK Grotesk;
  font-style: normal;
  font-weight: normal;
  font-size: 1.1rem;
  color: #000;
  text-decoration: none;
  border-style: none;
}

.footer a:hover {
  background: var(--color-primary);
}

.footer .links {
  padding: 0.5rem 1rem 1.5rem;
  white-space: nowrap;
}

/******************************************************************************
  END Glitch hello-app default styles
  ******************************************************************************/

/* Page structure */
body {
  background-color: var(--color-bg);
}

.wrapper__bg {
  background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20xmlns%3Aserif%3D%22http%3A%2F%2Fwww.serif.com%2F%22%20width%3D%22100%25%22%20height%3D%22100%25%22%20viewBox%3D%220%200%201920%201080%22%20xml%3Aspace%3D%22preserve%22%20style%3D%22fill-rule%3Aevenodd%3Bclip-rule%3Aevenodd%3Bstroke-linejoin%3Around%3Bstroke-miterlimit%3A2%3B%22%3E%3Cpath%20d%3D%22M2080.88%2C389.357c36.707%2C48.707%2027.53%2C131.65%20-3.176%2C184.24c-30.354%2C52.237%20-82.238%2C74.12%20-118.945%2C127.415c-37.06%2C52.943%20-58.943%2C137.298%20-108.003%2C164.475c-49.06%2C27.178%20-125.297%2C-2.823%20-181.417%2C-56.119c-56.472%2C-52.942%20-92.473%2C-129.18%20-86.12%2C-199.064c6.354%2C-69.884%2055.414%2C-133.416%20111.533%2C-181.77c56.119%2C-48.707%20119.65%2C-82.237%20193.064%2C-91.767c73.061%2C-9.883%20156.004%2C4.235%20193.064%2C52.59Z%22%20style%3D%22fill%3A%23fe4c6f%3Bfill-rule%3Anonzero%3B%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M1791.49%2C354.07c30.747%2C14.117%2054.145%2C52.212%2042.156%2C78.318c-11.989%2C26.106%20-59.367%2C40.222%20-90.114%2C59.947c-30.747%2C19.918%20-44.863%2C45.443%20-70.389%2C56.853c-25.719%2C11.409%20-62.654%2C8.895%20-84.893%2C-10.829c-22.045%2C-19.918%20-29.393%2C-56.853%20-33.647%2C-98.236c-4.255%2C-41.383%20-5.608%2C-86.826%2016.63%2C-101.136c22.238%2C-14.117%2067.682%2C3.287%20109.645%2C6.961c41.769%2C3.674%2079.865%2C-5.994%20110.612%2C8.122Z%22%20style%3D%22fill%3A%230f77ff%3Bfill-rule%3Anonzero%3B%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M408.456%2C626.874c31.392%2C24.198%2057.77%2C60.822%2063.22%2C102.678c5.232%2C41.856%20-10.682%2C89.162%20-42.292%2C110.744c-31.392%2C21.582%20-78.698%2C17.876%20-113.142%2C5.232c-34.662%2C-12.644%20-56.68%2C-33.79%20-81.532%2C-55.372c-24.634%2C-21.8%20-52.102%2C-43.818%20-54.718%2C-68.452c-2.398%2C-24.634%2019.838%2C-51.666%2044.472%2C-75.864c24.852%2C-24.416%2051.884%2C-45.562%2083.93%2C-50.358c31.828%2C-4.796%2068.452%2C7.194%20100.062%2C31.392Z%22%20style%3D%22fill%3A%23fe4c6f%3Bfill-rule%3Anonzero%3B%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M313.198%2C775.12c14%2C15.6%2025.2%2C32.4%2026.3%2C50.2c1%2C17.9%20-8.1%2C36.7%20-22.1%2C46.6c-14.1%2C9.9%20-32.9%2C10.8%20-51%2C10c-18.1%2C-0.7%20-35.5%2C-3.2%20-50.6%2C-13c-15.2%2C-9.9%20-28.1%2C-27.3%20-27.8%2C-44.3c0.3%2C-17%2013.9%2C-33.7%2029.1%2C-49.3c15.1%2C-15.7%2031.8%2C-30.2%2048.6%2C-30.3c16.7%2C0%2033.5%2C14.4%2047.5%2C30.1Z%22%20style%3D%22fill%3A%230f77ff%3Bfill-rule%3Anonzero%3B%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M686.32%2C237.246c11.83%2C13.182%2021.294%2C27.378%2022.224%2C42.419c0.845%2C15.126%20-6.845%2C31.012%20-18.675%2C39.377c-11.914%2C8.366%20-27.8%2C9.126%20-43.095%2C8.45c-15.294%2C-0.591%20-29.997%2C-2.704%20-42.757%2C-10.985c-12.844%2C-8.365%20-23.744%2C-23.068%20-23.491%2C-37.433c0.254%2C-14.365%2011.746%2C-28.477%2024.59%2C-41.659c12.759%2C-13.266%2026.871%2C-25.519%2041.067%2C-25.603c14.111%2C0%2028.307%2C12.168%2040.137%2C25.434Z%22%20style%3D%22fill%3A%230f77ff%3Bfill-rule%3Anonzero%3B%22%3E%3C%2Fpath%3E%3Cpath%20d%3D%22M1106.1%2C211.8c-10.4%2C-13.8%20-7.8%2C-37.3%200.9%2C-52.2c8.6%2C-14.8%2023.3%2C-21%2033.7%2C-36.1c10.5%2C-15%2016.7%2C-38.9%2030.6%2C-46.6c13.9%2C-7.7%2035.5%2C0.8%2051.4%2C15.9c16%2C15%2026.2%2C36.6%2024.4%2C56.4c-1.8%2C19.8%20-15.7%2C37.8%20-31.6%2C51.5c-15.9%2C13.8%20-33.9%2C23.3%20-54.7%2C26c-20.7%2C2.8%20-44.2%2C-1.2%20-54.7%2C-14.9Z%22%20style%3D%22fill%3A%23fe4c6f%3Bfill-rule%3Anonzero%3B%22%3E%3C%2Fpath%3E%3C%2Fsvg%3E');
  background-position: top center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.4;
  transition: background 0.3s, border-radius 0.3s, opacity 0.3s;
  filter: brightness(100%) contrast(100%) saturate(100%) blur(60px) hue-rotate(0deg);
  height: 100vh;
  width: 100%;
  position: absolute;
  z-index: -1;
}

.wrapper {
  min-height: var(--wrapper-height);
  place-items: center;
  margin: 3rem 2rem 0;
}

.content {
  display: flex;
  flex-direction: column;
  max-width: 900px;
  margin: 0 auto;
}

/* Typography */
p {
  font-weight: 200;
  font-size: 20px;
}

/* Layout: Home */
.illo-container {
  display: flex;
  justify-content: flex-end;
}

.illustration {
  max-width: 180px;
  max-height: var(--image-max-width);
  margin-top: 1rem;
  margin-right: 2rem;
  transform: rotate(8deg);
}

/* Post */
.post {
  place-items: normal;
}

.postTitle {
  font-size: 4rem;
  color: #000;
  line-height: 1.1;
  margin-bottom: 2rem;
}

.controls {
  margin: 3rem 0 2rem;
}