@import url('https://fonts.googleapis.com/css2?family=Rubik:ital,wght@0,300..900;1,300..900&display=swap');

/* ——————————————————————————————
   ✦ DESIGN TOKENS / VARIABLES
   —————————————————————————————— */
:root {
    /* palette */
    --og-bg: black;
    --og-text: fuchsia;
    --og-accent: lime;

    /* semantic */
    --color-bg: var(--og-bg);
    --color-text: var(--og-text);
    --color-accent: var(--og-accent);

    /* layout */
    --max-width: 800px;
    --top-nav-height: 1rem;
    --gutter: 1rem;

    /* type */
    --fs-body: 20px;
    --fs-details: 17px;
    --fs-body-mobile: 1.2rem;
    --fs-details-mobile: 1rem;
}

/* ——————————————————————————————
   ✦ RESET / BASE
   —————————————————————————————— */
html {
    box-sizing: border-box;
    font-size: 16px;
    scroll-behavior: smooth;
   margin: 0;
}

*,
*::before,
*::after {
    box-sizing: inherit;
}

body {
    margin: 0;
    font-family: "Rubik", sans-serif;
    line-height: 1.5;
    background: var(--color-bg);
    color: var(--color-text);
    font-size: var(--fs-body);

  min-height: 100vh;
  box-shadow: inset 0 0 35px rgba(255, 0, 200, 0.45);

}

/* headings + spacing rhythm */
h1,
h2 {
    font-weight: 400;
    font-style: normal;
    text-align: center;
    margin: 0;
}

h2 {
    margin-bottom: 1rem;
}

/*--
.fool{

}

--*/
h3{
    font-weight: 400;
    font-style: normal;
    margin: 0;
}
section {
    margin: 4rem 0;
display: flex;
  flex-direction: column;
gap:5px;
}

section>section{
  margin: 1.5rem 0;
}

/* ——————————————————————————————
   ✦ MAIN LAYOUT
   —————————————————————————————— */
main {
    width: min(100%, var(--max-width));
    margin: 0 auto;
    padding-top: calc(var(--top-nav-height) + 15px);
    padding-left: var(--gutter);
    padding-right: var(--gutter);

    display: flex;
    flex-direction: column;
    align-items: flex-start;
}

main>section,
footer {
    width: 100%;
    align-self: stretch;
}

/* intro block (centers star + title area) */
#intro {
    width: 100%;
    text-align: center;
    margin: 0;
    line-height: 2;

}

/* ——————————————————————————————
   ✦ NORTH STAR
   —————————————————————————————— */
#north-star {
    position: relative;
    z-index: 0;
    align-self: center;

    font-size: 1.5rem;
    margin: 0;
    padding: 0;

    text-shadow:
        0 0 6px magenta,
        0 0 18px magenta,
        0 0 50px magenta;
}

/* ——————————————————————————————
   ✦ BUTTON ROW (Invite / Clarity)
   —————————————————————————————— */
.side-by-side {
    width: 100%;
    display: flex;
    gap: 1rem;
    justify-content: center;
    align-items: center;
    margin: 0.5rem 0;
    padding-top: 1rem;
    padding-bottom: 1rem;
}

.plain-btn {
    background-color: #f0f0f0;
    color: #000;
    border: 1px solid cornsilk;
    padding: 0.2rem 0.5rem;

    font-size: 1rem;
    cursor: pointer;
    border-radius: 4px;

    width: fit-content;
    transition: background-color 0.25s ease, transform 0.25s ease;
}

.plain-btn:hover {
    background-color: #e0e0e0;
}


/* ——————————————————————————————
   ✦ NAV (Jump to…)
   —————————————————————————————— */
nav {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 1.5rem;
     justify-content: space-around;
     gap: 1em;
     margin-bottom: 6rem;
     margin-top: 4rem;
}




/* ——————————————————————————————
   ✦ LINKS
   —————————————————————————————— */
main a {
  color: var(--color-accent);
  text-decoration: underline dotted 2px var(--color-accent);
}

main a:hover {
  text-decoration: underline 2px var(--color-accent);
}

/* ——————————————————————————————
   ✦ PROJECTS
   —————————————————————————————— */

.projects{
padding-top:2rem;
}

.projects>section>a {
    padding-left: 2rem;
}



/* ——————————————————————————————
   ✦ OFFERS
   —————————————————————————————— */

   .

/* ——————————————————————————————
   ✦ EXPAND / COLLAPSE (Twine-ish)
   —————————————————————————————— */
.more {
    display: none;
}

.more.open {
    display: block;
}


/* the toggle itself */
.expand {
  /* make it look like your twine bracket link, not a default button */
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;                      /* inherit Rubik + size */
  color: var(--color-accent);

  display: inline-block;              /* so margins apply nicely */
  margin: 0.25rem 0 1.5rem;           /* sits between paragraphs cleanly */
  cursor: pointer;
  user-select: none;

  text-decoration: underline dotted 2px var(--color-accent);
  opacity: 0.9;
  transition: opacity 0.25s ease, text-shadow 0.25s ease;
}


/* ——————————————————————————————
   ✦ CREATURES / ANIMATION LAYER
   —————————————————————————————— */
.creatures {
    z-index: 1;
}

.character {
    position: absolute;
    font-size: 24px;
    animation: rainMove 4s infinite linear;
    z-index: 100;
}


.cute{
 text-align:center;
  align-self: stretch;   /* overrides main’s align-items:flex-start */
  display: flex;
  justify-content: center;

}


/* ——————————————————————————————
   ✦ FOOTER
   —————————————————————————————— */
footer {
    padding-top: 1.5em;
    padding-bottom: 1em;
}

/* ——————————————————————————————
   ✦ DESKTOP
   —————————————————————————————— */

@media (min-width: 900px) {

body{
  box-shadow: inset 0 0 70px rgba(255, 0, 200, 0.45);
}
    nav {
        justify-content: space-around;
        gap: 1em;
 margin-bottom: 4rem;

    }
}