Welcome to my Website!

This is a paragraph! Here's how you make a link: Neocities.

Here's how you can make bold and italic text.

Here's how you can add an image:

Here's how to make a list:

First thing
Second thing
Third thing

To learn more HTML/CSS, check out these tutorials!

/* styles.css - main stylesheet */ /* Use CSS variables for easy theme edits */ :root{ --accent:#d9534f; --bg:#f6f7f9; --card:#ffffff; --text:#222; --muted:#666; --max-width:1100px; --radius:12px; --gap:20px; } *{box-sizing:border-box} html,body{height:100%} body{ margin:0; font-family: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial; background:linear-gradient(180deg,#eef3fb, var(--bg)); color:var(--text); line-height:1.45; } /* page wrapper */ .container{ max-width:var(--max-width); margin:28px auto; padding:24px; } /* Header / Nav */ .header{ display:flex; align-items:center; gap:16px; margin-bottom:18px; } .brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:var(--text); } .logo{ width:56px; height:56px; border-radius:10px; background:linear-gradient(135deg,#2b7dd6,var(--accent)); display:flex; align-items:center; justify-content:center; color:white; font-weight:700; box-shadow: 0 6px 20px rgba(43,125,214,0.12); } nav{margin-left:auto} nav a{ text-decoration:none; color:var(--muted); padding:8px 12px; border-radius:8px; transition:all .18s ease; font-weight:600; } nav a:hover{ color:var(--accent); transform:translateY(-2px); } /* Hero */ .hero{ display:grid; grid-template-columns:1fr 360px; gap:20px; align-items:stretch; margin-bottom:22px; } .card{ background:var(--card); padding:18px; border-radius:var(--radius); box-shadow:0 8px 30px rgba(15,30,50,0.06); } .hero .intro h1{margin:0 0 8px 0} .hero .intro p{color:var(--muted); margin:0 0 14px} /* Image */ .feature-img{ width:100%; height:260px; object-fit:cover; border-radius:10px; display:block; } /* grid of pages */ .grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:var(--gap); margin-bottom:24px; } .grid .tile h3{margin:8px 0 6px} /* lists */ ul, ol{margin:8px 0 14px 20px; color:var(--muted)} /* footer */ footer{ margin-top:34px; padding:16px; text-align:center; color:var(--muted); font-size:14px; } /* small responsive */ @media (max-width:900px){ .hero{grid-template-columns:1fr} .hero .intro, .hero .card{order:0} } /* interactive quiz styles */ .quiz button{ background:transparent; border:2px solid var(--accent); padding:8px 12px; border-radius:8px; cursor:pointer; font-weight:700; transition:all .16s; } .quiz button:hover{background:var(--accent); color:white} /* subtle animation for images */ img.fade{ opacity:0; transform:translateY(8px); animation:fadeIn .7s forwards; } @keyframes fadeIn{ to{opacity:1; transform:none} } /* accessibility: focus */ a:focus, button:focus {outline:3px dashed rgba(43,125,214,.18); outline-offset:3px}