/******************************************************************************
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.
******************************************************************************/

/* 
  The style rules specify elements by type and by attributes such as class and ID
  Each section indicates an element or elements, then lists the style properties to apply
  See if you can cross-reference the rules in this file with the elements in index.html
*/


:root {
  --color-bg: #ffffff;
  --color-text-main: #000000;
  --color-text-header: #000000;
  --color-primary: #000000;
  --color-secondary: #000000; /* Add this to match your theme */
  /*   --wrapper-height: 87vh;
  --image-max-width: 300px;
  --image-margin: 3rem; */
  --font-family: "HK Grotesk";
  --font-family-header: "HK Grotesk";
} */


/* Basic page style resets */
body {
  margin: 0;
  padding: 0;
  font-family: var(--font-family);
  background-color: var(--color-bg);
  color: var(--color-text-main);
  overflow-x: hidden;
}
* {
  box-sizing: border-box;
}
[hidden] {
  display: none !important;
}

/* Import fonts */
@font-face {
  font-family: "HK Grotesk", sans-serif; /* Added generic fallback */
  src: url("https://cdn.glitch.me/605e2a51-d45f-4d87-a285-9410ad350515%2FHKGrotesk-Regular.otf?v=1603136326027")
    format("opentype");
}
@font-face {
  font-family: "HK Grotesk", sans-serif; /* Added generic fallback */
  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: var(--font-family);
  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: #000000;
  white-space: nowrap;
  margin-left: auto;
}
.btn--remix img {
  margin-right: 0.5rem;
}
.btn--remix:hover {
  background-color: #d0fff1;
}

/* Navigation grid */


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

/* Page structure */
/* Wrapper now uses full viewport height */
.wrapper {
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 0 1rem;
}

/* Center content flexibly */
.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

/* Title: use a large size on desktop but scale down on small screens */
.title {
  color: var(--color-text-header);
  font-family: var(--font-family);
  font-weight: bold;
  /* Use viewport-relative sizing */
  font-size: 8vw;
  margin: 0;
}


/* Ensure images are responsive */
.illustration,
iframe,
canvas {
  max-width: 100%;
  filter: grayscale(100%) contrast(120%) brightness(0.95) invert(100%);
  height: auto;
  mix-blend-mode: multiply;
}

/* Instructions, buttons, and other elements remain largely unchanged */
.instructions {
  width: 100%;
  margin: 0;
  padding: 1rem 0;
}


/* Interactive image - change colors when clicked */
.illustration:active {
  filter: invert(0%);
  /* Optional: add a smooth transition */
  transition: filter 0.3s ease;
}

/* If you want to keep the dipped class for other elements */
.dipped {
  transform: translateY(5px);
}


/* Book Preview Button Styles */
.book-preview-btn {
  font-family: var(--font-family);
  padding: 0.75rem 1.5rem;
  font-size: 1.1rem;
  font-weight: bold;
  background: var(--color-primary);
  color: #ffffff;
  border: 2px solid var(--color-primary);
  border-radius: 4px;
  text-decoration: none;
  transition: all 0.3s ease;
  margin: 0 1rem;
}
.book-preview-btn:hover {
  background: #ffffff;
  color: var(--color-primary);
}

/* Footer center alignment */
.footer {
  display: flex;
  justify-content: center;
  padding: 2rem 0;
  border-top: 1px solid var(--color-primary);
}

/* Media Query for narrower viewports */
@media screen and (max-width: 600px) {
  .title {
    font-size: 12vw; /* Increase relative font size value for readability on very small devices */
  }
  .wrapper {
    padding: 1rem;
  }
}