welcome to my site! :33
Heading 2
Heading 3
Heading 4
This is strong,
this is normal, and
this is emphasized!
This is a link.
This is superscript;
this is subscript.
This is code.
This is strikethrough.
- Unordered list item 1
- Unordered list item 2
- Nested list
- Unordered list item 3
- Unordered list item 1
- Unordered list item 2
- Nested list
- Unordered list item 3
another section
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut iaculis orci at sodales convallis. Proin luctus vehicula dolor, id ultrices diam eleifend eu. Donec tincidunt tellus tellus, in maximus lorem fermentum ac. Phasellus sagittis nisi in ante pretium, eget molestie est pellentesque. Ut tincidunt ultricies porta.
/* start light mode styling */ :root { --text: darkslategrey; --border: lightgrey; --accent: teal; --bg: #dce3e1; --gradientTop: white; --gradientBottom: rgb(240, 248, 255, .8); } header { background: url('***light mode banner image***'); } /* end light mode styling */ /* start dark mode styling */ @media (prefers-color-scheme: dark) { :root { --text: white; --border: #5a7678; --accent: #74C365; --bg: rgb(0,60,60,.8); --gradientBottom: rgb(0, 50, 60); --gradientTop: darkslategrey; a:link { color: lightblue; } } header { background: url('***dark mode banner image***'); } } /* end dark mode styling */ * { box-sizing: border-box; } body { padding: 10px; font-family: 'MS PGothic', sans-serif; color: var(--text); /* page background pattern */ background-color: var(--gradientTop); background-image: linear-gradient(30deg, var(--bg) 12%, transparent 12.5%, transparent 87%, var(--bg) 87.5%, var(--bg)), linear-gradient(150deg, var(--bg) 12%, transparent 12.5%, transparent 87%, var(--bg) 87.5%, var(--bg)), linear-gradient(30deg, var(--bg) 12%, transparent 12.5%, transparent 87%, var(--bg) 87.5%, var(--bg)), linear-gradient(150deg, var(--bg) 12%, transparent 12.5%, transparent 87%, var(--bg) 87.5%, var(--bg)), linear-gradient(60deg, var(--bg) 25%, transparent 25.5%, transparent 75%, var(--bg) 75%, var(--bg)), linear-gradient(60deg, var(--bg) 25%, transparent 25.5%, transparent 75%, var(--bg) 75%, var(--bg)); background-size: 20px 35px; background-position: 0 0, 0 0, 10px 18px, 10px 18px, 0 0, 10px 18px; } .container { max-width: 55rem; margin: 5vw auto 12px auto; border: 6px ridge var(--border); outline: 3px solid var(--gradientTop); outline-offset: 4px; border-radius: 10px; display: flex; flex-wrap: wrap; padding: 5px; gap: 5px; /* container background pattern */ background-color: var(--gradientBottom); background-image: repeating-radial-gradient( circle at 0 0, transparent 0, var(--gradientBottom) 9px ), repeating-linear-gradient( var(--bg), var(--bg)); } /* these control the column widths */ .small { flex: 1 1 9%; } .large { flex: 1 1 82%; } .full { flex: 1 1 100%; } .half { flex: 1 1 49%; } header { background-size: cover; background-position: center; width: 100%; height: 120px; /* change banner height here*/ border: 2px ridge var(--border); border-radius: 5px; position: relative; } header span { font-size: 2.5rem; position: absolute; bottom: 0; right: 10px; margin: 10px; font-weight: bold; text-shadow: 1px 1px var(--text), -1px 1px var(--text), 1px -1px var(--accent), -1px -1px var(--accent); color: var(--gradientTop); } nav { border: 2px ridge var(--border); border-radius: 5px; padding: 5px; background: linear-gradient(var(--gradientTop),var(--gradientBottom)); } nav div { text-align: center; font-size: 1.25rem; margin: 5px 5px 10px 5px; } nav a { display: block; margin: 5px; background: linear-gradient(to right,var(--bg),var(--gradientBottom)); border-radius: 5px; padding: 2px 7px; text-decoration: none; } nav a:link, nav a:visited { color: var(--text); } nav a:hover, nav a:focus { background: linear-gradient(to right,var(--bg), var(--gradientBottom), var(--gradientTop)); } /* optional button styling like in the preview */ div.small > img { display: block; margin: 5px auto; border:2px ridge var(--border); border-radius: 5px; } section { border: 2px ridge var(--border); border-radius: 5px; background: linear-gradient(var(--gradientTop),var(--gradientBottom)); padding: 5px; } footer { text-align: center; margin-bottom: 5vw; font-size: 0.8rem; } footer a { text-decoration: none; } h1, h2, h3, h4, h5, h6, p { margin: 5px; line-height: 1.2; } h1 { font-size: 1.4rem; letter-spacing: 2px; font-weight: normal; text-align: center; border-bottom: 2px ridge var(--border); padding-bottom: 5px; } h2 { font-size: 1.25rem; font-weight: normal; text-align: center; } h3 { font-size: 1.1rem; } h4 { font-size: 1rem; color: var(--accent); padding-left: 12px; } /* prevents overflow on smaller screens */ img { max-width: 100%; } pre { overflow-x: auto; } a:hover, a:focus { font-style: italic; } a:visited { color: var(--accent); }