/* ============================================================
   PAPER — theme stylesheet (recreated from the pen, codepen.io/ahoidahl/pen/vYPjowz)
   The pen's styles are kept as-is except:
   - `.mybutton`'s background was `background-color:
     radial-gradient(from 50% 60%, white, #f6f6f6)` — both the property
     (radial-gradient isn't a valid background-color value) and the
     gradient syntax (`from 50% 60%` isn't valid; needs `circle at`) were
     invalid, so the sheen never rendered. Fixed to `background:
     radial-gradient(circle at 50% 60%, #fff, #f6f6f6)` — same intended
     highlight, now visible. The hover rule shares the same fix.
   - body/#hero used fixed viewport heights sized for the CodePen preview
     pane (`body{height:100vh}`, `#hero{height:700px;max-height:100svh}`).
     This is a real, normally-scrolling page carrying more content than
     the pen's single line, so those became `min-height` + a flex column,
     letting the page grow instead of clipping.
   - the pen's own nav (logo + pill nav items) is dropped entirely — theme
     pages carry no nav of their own, pen or otherwise. h1's flat 5rem
     font-size is now clamped so the ghost-text motif survives small
     screens without overflowing.
   - new elements (hero_inner, badge, theme_card, theme_tags, theme_actions)
     are styled below, in the pen's own neumorphic idiom — raised pills for
     anything clickable (buttons), inset "pressed" pills for tags, so the
     page demonstrates both directions of the shadow illusion.
   ============================================================ */

* {
  box-sizing: border-box;
}

html {
  background: #E8E8E8;
}

body {
  background: #E8E8E8;
  color: #808080;
  margin: 0;
  font-family: arial;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

h1 {
  opacity: .2;
  transition: all .2s ease-in-out;
  font-size: clamp(2.75rem, 12vw, 5rem);
  margin: 0;
}

.d-flex {
  display: flex;
}

.align-items-center {
  align-items: center;
}

.justify-content-center {
  justify-content: center;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
}

#hero {
  flex: 1 0 auto;
  padding-block: 3rem;
  justify-content: center;
}

section {
  padding: 2rem;
}

a {
  color: #808080;
  text-decoration: none;
  font-weight: bold;
  text-transform: uppercase;
}

.mybutton {
  padding: 20px;
  margin: 10px;
  background: radial-gradient(circle at 50% 60%, #fff, #f0f0f0);
  box-shadow: 0 10px 10px rgba(0, 0, 0, 0.2), 0 -6px 10px rgba(255, 255, 255, 0.6);
  border-radius: 100px;
  transition: all .2s ease-in-out;
  display: inline-block;
  /* keeps the button permanently on its own compositor layer so the hover
     scale transition doesn't promote/demote it mid-animation — that
     promotion boundary is what was making the text flash thin then thick */
  will-change: transform;
  transition: all .2s ease;
}

.mybutton:hover,
.mybutton:focus-visible {
  filter: brightness(.98);
  transform: scale(.99);
  box-shadow: 0 5px 5px rgba(0, 0, 0, 0.2), 0 -6px 10px rgba(255, 255, 255, 0.6);
}

a:focus-visible {
  outline: 2px solid #6b6b6b;
  outline-offset: 3px;
}

/* ============================================================
   Everything below is new: the hero content column + the
   theme-for-sale kit (badge, card, tags, buttons), styled in the
   pen's own neumorphic idiom.
   ============================================================ */

.hero_inner {
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: clamp(1rem, 3svh, 1.75rem);
}



.badge {
  margin: 0;
  padding: .5em 1.3em;
  font-size: .75rem;
  letter-spacing: .12em;
  color: #6b6b6b;
  background: radial-gradient(circle at 50% 60%, #fff, #f6f6f6);
  box-shadow: 0 6px 8px rgba(0, 0, 0, .15), 0 -4px 8px rgba(255, 255, 255, .6);
  border-radius: 100px;
}

.theme_card {
  background: radial-gradient(circle at 50% 0%, #fff, #f2f2f2);
  border-radius: 28px;
  box-shadow: 0 20px 30px rgba(0, 0, 0, .12), 0 -8px 16px rgba(255, 255, 255, .7);
  padding: clamp(1.5rem, 4vw, 3rem);
  max-width: 640px;
  color: #4a4a4a;
  font-size: clamp(.92rem, 1.6svh, 1.05rem);
  line-height: 1.65;
  text-align: left;
}

.theme_card p {
  margin: 0 0 1em;
}

.theme_card p:last-of-type {
  margin-bottom: 0;
}

.theme_tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: .6rem;
  margin: 1.25em 0 0;
  padding: 0;
}

.theme_tags li {
  padding: .5em 1.1em;
  border-radius: 100px;
  font-size: .75rem;
  font-weight: bold;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: #6b6b6b;
  background: #E8E8E8;
  box-shadow: inset 3px 3px 6px rgba(0, 0, 0, .12), inset -3px -3px 6px rgba(255, 255, 255, .7);
}

.theme_actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1.25em;
  padding: 0;
}

.theme_actions .mybutton {
  color: #5a5a5a;
  font-size: .85rem;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
  }
}