/* Complete stylesheet for the site */

/* variables */
:root{
  --bg:#f7f8fa;
  --card:#ffffff;
  --accent:#0a84ff;
  --muted:#6b6b6b;
  --max-width:1100px;
  --page-padding:24px;
  --font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* reset / base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:#222;
  font-family:var(--font-family);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* header: full width top header */
.site-header{
  background: #ffffff;
  border-bottom: 1px solid #e6e9ee;
  position:sticky;
  top:0;
  z-index:10;
}
.header-inner{
  max-width:var(--max-width);
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:calc(var(--page-padding) * 0.75) var(--page-padding);
}
.name{
  margin:0;
  font-size:1.25rem;
  font-weight:700;
  letter-spacing:0.2px;
  color:#111;
}
.site-nav a{
  color:#444;
  text-decoration:none;
  margin-left:1rem;
  font-size:0.95rem;
  padding:6px 8px;
  border-radius:6px;
}
.site-nav a:hover,
.site-nav a:focus{
  background:rgba(10,132,255,0.08);
  color:var(--accent);
  outline:none;
}

/* tagline */
.site-header .tagline{
  max-width:var(--max-width);
  margin:4px auto 16px;
  padding:0 var(--page-padding);
  color:var(--muted);
  font-size:0.95rem;
}

/* main content wrapper */
main{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 var(--page-padding) 48px;
}

/* hero */
.hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:24px 0;
}
.hero-photo{
  width:140px;
  height:140px;
  object-fit:cover;
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
  border:1px solid #eef2f6;
}
.hero-caption{ color:var(--muted); margin-top:12px; }

/* grid of cards (clean) */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
  margin-top:16px;
}
.card{
  background:var(--card);
  padding:16px;
  border-radius:8px;
  box-shadow:0 6px 16px rgba(18,18,18,0.04);
  transition:transform .16s ease, box-shadow .16s ease;
}
.card img{ width:100%; height:140px; object-fit:cover; border-radius:6px; display:block; margin-bottom:10px; }
.card:hover{ transform:translateY(-6px); box-shadow:0 18px 36px rgba(18,18,18,0.08); }
.card time{ font-size:0.85rem; color:var(--muted); }

/* tags */
.tags{ margin-top:8px; }
.tags span{
  font-size:0.8rem;
  color:var(--accent);
  margin-right:8px;
}

/* sections */
section{ margin-top:28px; }

/* contact button */
.btn{
  display:inline-block;
  background:var(--accent);
  color:#fff;
  padding:8px 12px;
  border-radius:6px;
  text-decoration:none;
  font-weight:600;
}
.btn:hover{ opacity:0.95; }

/* footer */
footer{
  text-align:center;
  padding:24px;
  color:var(--muted);
  font-size:0.9rem;
  border-top:1px solid #eef2f6;
  background:#fff;
  margin-top:36px;
}

/* demo area */
.demo-list{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:12px;
}
.demo{
  background:var(--card);
  padding:14px;
  border-radius:10px;
  box-shadow:0 8px 20px rgba(2,6,23,0.04);
  min-width:200px;
  flex:1 1 260px;
  max-width:360px;
}

/* 1) animated card */
.demo-card{
  cursor:default;
  transition:transform .18s ease, box-shadow .18s ease;
  outline:none;
}
.demo-card h3{ margin:0 0 6px 0; font-size:1.05rem; }
.demo-card p{ margin:0; color:rgba(0,0,0,0.6); }
.demo-card:hover,
.demo-card:focus{
  transform:translateY(-8px);
  box-shadow:0 24px 48px rgba(2,6,23,0.12);
}

/* 2) theme toggle styles */
.demo-theme{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
#themeToggle{
  padding:8px 12px;
  border-radius:8px;
  border:none;
  background:var(--accent);
  color:#fff;
  cursor:pointer;
  font-weight:600;
}
#themeToggle[aria-pressed="true"]{
  box-shadow:0 6px 18px rgba(10,132,255,0.12);
  opacity:0.96;
}
.demo-note{ margin:0; color:var(--muted); font-size:0.9rem; }

/* 3) typewriter */
#typewriter{ font-weight:600; font-size:1.05rem; min-height:1.2em; color:#0f1724; }

/* dark theme variables */
[data-theme="dark"]{
  --bg:#0b1020;
  --card:#0f1724;
  --accent:#2fb6ff;
  --muted:#9fb1c9;
}
[data-theme="dark"] body{ background:var(--bg); color:var(--muted); }

/* keep demo text readable in dark */
[data-theme="dark"] .demo{ background:var(--card); color:var(--muted); box-shadow:0 8px 26px rgba(2,6,23,0.2); }
[data-theme="dark"] #typewriter{ color:#e6eef8; }
[data-theme="dark"] #themeToggle{ background:var(--accent); color:#062230; }

/* responsive tweaks */
@media (max-width:640px){
  .header-inner{ padding:12px; }
  .site-nav a{ margin-left:8px; font-size:0.9rem; }
  .hero-photo{ width:120px; height:120px; }
  .demo-list{ flex-direction:column; }
}
```// filepath: c:\Users\Conner\Desktop\My website\style.css
/* Complete stylesheet for the site */

/* variables */
:root{
  --bg:#f7f8fa;
  --card:#ffffff;
  --accent:#0a84ff;
  --muted:#6b6b6b;
  --max-width:1100px;
  --page-padding:24px;
  --font-family: 'Montserrat', system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;
}

/* reset / base */
*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  background:var(--bg);
  color:#222;
  font-family:var(--font-family);
  line-height:1.5;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
}

/* header: full width top header */
.site-header{
  background: #ffffff;
  border-bottom: 1px solid #e6e9ee;
  position:sticky;
  top:0;
  z-index:10;
}
.header-inner{
  max-width:var(--max-width);
  margin:0 auto;
  display:flex;
  justify-content:space-between;
  align-items:center;
  padding:calc(var(--page-padding) * 0.75) var(--page-padding);
}
.name{
  margin:0;
  font-size:1.25rem;
  font-weight:700;
  letter-spacing:0.2px;
  color:#111;
}
.site-nav a{
  color:#444;
  text-decoration:none;
  margin-left:1rem;
  font-size:0.95rem;
  padding:6px 8px;
  border-radius:6px;
}
.site-nav a:hover,
.site-nav a:focus{
  background:rgba(10,132,255,0.08);
  color:var(--accent);
  outline:none;
}

/* tagline */
.site-header .tagline{
  max-width:var(--max-width);
  margin:4px auto 16px;
  padding:0 var(--page-padding);
  color:var(--muted);
  font-size:0.95rem;
}

/* main content wrapper */
main{
  max-width:var(--max-width);
  margin:0 auto;
  padding:0 var(--page-padding) 48px;
}

/* hero */
.hero{
  display:flex;
  flex-direction:column;
  align-items:center;
  text-align:center;
  padding:24px 0;
}
.hero-photo{
  width:140px;
  height:140px;
  object-fit:cover;
  border-radius:12px;
  box-shadow:0 6px 18px rgba(0,0,0,0.08);
  border:1px solid #eef2f6;
}
.hero-caption{ color:var(--muted); margin-top:12px; }

/* grid of cards (clean) */
.grid{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr));
  gap:16px;
  margin-top:16px;
}
.card{
  background:var(--card);
  padding:16px;
  border-radius:8px;
  box-shadow:0 6px 16px rgba(18,18,18,0.04);
  transition:transform .16s ease, box-shadow .16s ease;
}
.card img{ width:100%; height:140px; object-fit:cover; border-radius:6px; display:block; margin-bottom:10px; }
.card:hover{ transform:translateY(-6px); box-shadow:0 18px 36px rgba(18,18,18,0.08); }
.card time{ font-size:0.85rem; color:var(--muted); }

/* tags */
.tags{ margin-top:8px; }
.tags span{
  font-size:0.8rem;
  color:var(--accent);
  margin-right:8px;
}

/* sections */
section{ margin-top:28px; }

/* contact button */
.btn{
  display:inline-block;
  background:var(--accent);
  color:#fff;
  padding:8px 12px;
  border-radius:6px;
  text-decoration:none;
  font-weight:600;
}
.btn:hover{ opacity:0.95; }

/* footer */
footer{
  text-align:center;
  padding:24px;
  color:var(--muted);
  font-size:0.9rem;
  border-top:1px solid #eef2f6;
  background:#fff;
  margin-top:36px;
}

/* demo area */
.demo-list{
  display:flex;
  flex-wrap:wrap;
  gap:16px;
  margin-top:12px;
}
.demo{
  background:var(--card);
  padding:14px;
  border-radius:10px;
  box-shadow:0 8px 20px rgba(2,6,23,0.04);
  min-width:200px;
  flex:1 1 260px;
  max-width:360px;
}

/* 1) animated card */
.demo-card{
  cursor:default;
  transition:transform .18s ease, box-shadow .18s ease;
  outline:none;
}
.demo-card h3{ margin:0 0 6px 0; font-size:1.05rem; }
.demo-card p{ margin:0; color:rgba(0,0,0,0.6); }
.demo-card:hover,
.demo-card:focus{
  transform:translateY(-8px);
  box-shadow:0 24px 48px rgba(2,6,23,0.12);
}

/* 2) theme toggle styles */
.demo-theme{ display:flex; flex-direction:column; gap:8px; align-items:flex-start; }
#themeToggle{
  padding:8px 12px;
  border-radius:8px;
  border:none;
  background:var(--accent);
  color:#fff;
  cursor:pointer;
  font-weight:600;
}
#themeToggle[aria-pressed="true"]{
  box-shadow:0 6px 18px rgba(10,132,255,0.12);
  opacity:0.96;
}
.demo-note{ margin:0; color:var(--muted); font-size:0.9rem; }

/* 3) typewriter */
#typewriter{ font-weight:600; font-size:1.05rem; min-height:1.2em; color:#0f1724; }

/* dark theme variables */
[data-theme="dark"]{
  --bg:#0b1020;
  --card:#0f1724;
  --accent:#2fb6ff;
  --muted:#9fb1c9;
}
[data-theme="dark"] body{ background:var(--bg); color:var(--muted); }

/* keep demo text readable in dark */
[data-theme="dark"] .demo{ background:var(--card); color:var(--muted); box-shadow:0 8px 26px rgba(2,6,23,0.2); }
[data-theme="dark"] #typewriter{ color:#e6eef8; }
[data-theme="dark"] #themeToggle{ background:var(--accent); color:#062230; }

/* responsive tweaks */
@media (max-width:640px){
  .header-inner{ padding:12px; }
  .site-nav a{ margin-left:8px; font-size:0.9rem; }
  .hero-photo{ width:120px; height:120px; }
  .demo-list{ flex-direction:column; }
}