/******************************************************************************
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.
******************************************************************************/
/* Our default values set as CSS variables */
:root {
  --color-bg: #121212;
  --color-text-main: #FFFFFF;
  --color-primary: #626262;
  --wrapper-height: 85vh;
  --image-max-width: 320px;
  --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;
  --font-family-header: "HK Grotesk";
}

html {
  color: var(--color-text-main);
}

/* Basic page style resets */
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}

/* Import fonts */
@font-face {
  font-family: HK Grotesk;
  src: url("https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Regular.otf?v=1603136326027")
    format("opentype");
}
@font-face {
  font-family: HK Grotesk;
  font-weight: bold;
  src: url("https://cdn.glitch.com/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Bold.otf?v=1603136323437")
    format("opentype");
}

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

.footer a:not(.btn):link,
a:not(.btn):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:not(.btn):hover {
  background: var(--color-primary);
}

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

.divider {
  padding: 0 1rem;
}
/******************************************************************************
END default styles
******************************************************************************/

/* Page structure */
body {
  font-family: var(--font-family);
  background-color: var(--color-bg);
}
.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 {
  margin: 0 0 1rem 0;
  line-height: 1.5 !important;
  font-size: 1.25rem;
}
h1,
h2,
h3,
h4,
h5 {
  margin: 2rem 0 .8rem;
  font-family: var(--font-family);
  font-weight: 600;
  line-height: 1.1;
  color: var(--color-text-main);
}
h1, h2 {
  font-weight: 800;
  margin-top: 1rem;
  margin-bottom: 1.75rem;
  font-size: 5rem;
  display: inline-flex;
  color: #C4CFE3;
}
h2 {
  font-size: 4rem;
}
h3 {
  font-size: 2rem;
}
h4 {
  font-size: 1.5rem;
}
h5 {
  font-size: 1.25rem;
}
small,
.text_small {
  font-size: 0.8rem;
}
ul > li,
ol > li {
  margin-bottom: 0.75rem;
  line-height: 1.5;
  font-size: 1rem;
}
ul {
  padding: 0 0 0 18px;
  margin: 0;
}
ul.no-bullet {
  list-style-type: none;
}
p, ul {
  color: var(--color-text-main);
}
button {
  background-color: #E13835;
  border: 4px solid #E13835;
  color: #FFFFFF;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1.25rem;
  font-weight: 600;
  line-height: 1.5;
  padding: 8px 25px;
  text-align: center;
  transition-duration: 0.25s;
  transition-property: color,background,border-color;
  user-select: none;
  content: "\u0";
  max-width: auto;
}
button:not([dark]):hover {
  font-weight: 650;
  color: #121212;
  background-color: #D96664;
  border: 4px solid #D96664;
}
.btn {
  width: auto;
}
button[dark] {
  background-color: #444343;
  border: 4px solid #444343;
  color: #FFFFFF;
}
[dark]:hover {
  font-weight: 650;
  background-color: #787878;
  border: 4px solid #787878;
  color: #121212;
}
a {
  max-width: fit-content;
  margin: 10px 10px 10px 0px;
}
.break {
  height: 0px;
  width: 0.75em;
}
a,.btn-container {
  flex-wrap: nowrap;
  flex-direction: row;
  display: flex !important;
  text-decoration: none;
}

/* Link styles */
a:not(.btn):link,
a:not(.btn):visited {
  text-decoration: none;
  border-bottom: 6px solid var(--color-primary);
  color: var(--foreground);
  transition: background 0.2s linear;
}
a:not(.btn):hover {
  background: var(--color-primary);
}

/* Title style adjustments */
.title-lg {
  color: var(--color-text-main);
  font-family: HK Grotesk;
  font-style: normal;
  font-weight: bold;
  line-height: 1.5;
}
.title-md {
  font-size: 56px;
}

/* Layout: Home */
.home {
  justify-content: left;
}
.illo-container {
  display: flex;
  justify-content: flex-end;
}
.illustration {
  max-width: 180px;
  max-height: var(--image-max-width);
  margin-top: 1rem;
  margin-right: 2rem;
}

/* Post */
.post {
  place-items: normal;
}
.postTitle {
  font-size: 4rem;
  color: #000;
  line-height: 1.1;
  margin-bottom: 2rem;
}
.controls {
  margin: 3rem 0 2rem;
}