/******************************************************************************
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: #ffffff;
  --color-text-main: #E07057;
  --color-primary: #0d5b9b;
  --color-text-alt: #0d5b9b;
  --wrapper-height: 85vh;
  --image-max-width: 320px;
  --font-family: "HK Grotesk";
  --font-family-header: "HK Grotesk";
}

/* 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.me/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.me/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Bold.otf?v=1603136323437")
    format("opentype");
}

/* Our remix on glitch button */
.btn--remix {
  font-family: HK Grotesk;
  padding: 0.75rem 1rem;
  font-size: 1.1rem;
  line-height: 1rem;
  font-weight: 500;
  height: 2.75rem;
  align-items: center;
  cursor: pointer;
  background: #ffffff;
  border: 1px solid #000000;
  box-sizing: border-box;
  border-radius: 4px;
  text-decoration: none;
  color: #000;
  white-space: nowrap;
  margin-left: auto;
}
.btn--remix img {
  margin-right: 0.5rem;
}
.btn--remix:hover {
  background-color: #d0fff1;
}

/* Navigation grid */
.footer {
  display: flex;
  justify-content: space-between;
  margin: 1rem auto 0;
  padding: 1rem 0 0.75rem 0;
  max-width:900px;
  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;
  text-decoration: none;
  border-style: none;
}
.footer a:not(.btn--remix):hover {
  color: var(--color-text-main);
}

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

.divider {
  padding: 0 0.5rem;
}
/******************************************************************************
END Glitch hello-app default styles
******************************************************************************/

/* Page structure */
body {/*
  background-image: url(https://cdn.glitch.global/dda0ac69-9d76-49c3-91b0-3f81cd4ff9ba/water.jpg?v=1644508211119);
  background-repeat: no-repeat;
  background-position:center top;
  background-size:100% 10em;*/
  font-family: var(--font-family);
  background-color: var(--color-bg);
  color: black;
}
.wrapper {
  place-items: center;
}
.content {
  display: flex;
  flex-direction: column;
  max-width: 900px;
  margin: 0 auto;
}
.post, h1, .more, .posts {
  border:2px dashed var(--color-primary);
  padding:1rem;
  margin:auto;
  margin-top:1rem;
  border-radius:1rem;
  max-width:900px;
}
.post {
  border:2px dashed var(--color-text-alt);
}

/* Typography */
p {
  margin: 0 0 1rem 0;
  line-height: 1.5 !important;
  font-size: 1rem;
}
.intro p {
  padding:0 1rem;
}
h1,
h2,
h3,
h4,
h5 {
  margin: 0.8rem 0 0.8rem;
  font-family: var(--font-family-header);
  font-weight: 600;
  line-height: 1.1;
  color: black;
}
h1 {
  margin:auto;
  margin-top: 0;
  margin-bottom: 1.75rem;
  font-size: 5rem;
  border-color:black;
  color:black;
}
h2 {
  font-size: 3rem;
  color: var(--color-primary);
}
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;
}

/* Link styles */
a:not(.btn--remix):link,
a:not(.btn--remix):visited {
  text-decoration: none;
  font-weight: bold;
  color: var(--color-text-alt);
  transition: background 0.2s linear;
  border-bottom: 2px solid var(--color-text-alt);
}
a.homelink:not(.btn--remix):link,
a.homelink:not(.btn--remix):visited {
  border-bottom: none;
}
a:not(.btn--remix):hover {
  color: var(--color-text-main);
  border-bottom: 2px solid var(--color-text-main);
}

/* 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;
}

/* Post */
.post {
  place-items: normal;
}
.postTitle {
  font-size: 4rem;
  line-height: 1.1;
  margin-bottom: 1rem;
}
.controls {
  margin: 3rem 0 2rem;
}
ul p {
  padding-top: 1rem;
}
.post img {
  max-width:100%;
  max-height:600px;
}
.eleventy-plugin-youtube-embed {
  margin-bottom:1rem;
}
.more, .posts {
  min-width:100%;
}
.intro img {
  max-height:1.5em;
  margin-bottom:-0.3em;
}
.intro a:link {
  border-bottom:none;
}
.intro a:link:hover img, .social a:link:hover img {
  filter:brightness(2) hue-rotate(180deg);
}
.social img {
  max-height:1.3rem;
}
.social {
  width:5rem;
}
iframe.yt-shortcode {
  min-width:90%;
  aspect-ratio: 16 / 9;
}
blockquote {
  border-left:2px dashed var(--color-text-main);
  padding-left:1rem;
}
.posts img {
  width:100px;
}
.posts li {
  list-style-type:none;
}
.posts p {
  padding-top:0.5rem;
  padding-bottom:1rem;
}
.posts ul {
  padding-left:0px;
}