style.css

/*  
~~~~~~~~~~~~~~~~~~
~~~ CSS RESETS ~~~
~~~~~~~~~~~~~~~~~~

Last updated: 6/21/2025

Sources: 
  - https://blog.logrocket.com/what-should-modern-css-boilerplate-look-like/
  - https://css-tricks.com/box-sizing/
  
*/

@charset "UTF-8";

/* Set current and legacy box model type. */
html {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

/* Pseudo elements inherit their parent's box model. */
*,
*:before,
*:after {
  -webkit-box-sizing: inherit;
  -moz-box-sizing: inherit;
  box-sizing: inherit;
}

/* Manage UI affordance differently by removing all border defaults . */
* {
  border: none;
}

/* Clear default browser padding and margin. */
html,
html * {
  padding: 0;
  margin: 0;
}

/* Prevents images from blowing up their containers for absolutely no reason at all. Why? Because containers should contain! */
img,
picture {
  display: block;
  max-width: 100%;
}

/* --- Reset (most) lists ---

Whether you’re using ordered lists (ol), unordered lists (ul), or menus (<menu>), it’s unlikely that you’ll want the list markers (i.e., bullets, numbers, etc.,) that come with them since they look rather unsightly on user interfaces. The following snippet removes them, but not from those used in articles where it makes sense to use them in their natural form: */
menu:not(article menu),
ol:not(article ol),
ul:not(article ul) {
  list-style: none;
}

/* TIP: Add the role="list" attribute-value to all lists that you’d like screen readers to announce as such, because list-style: none; disables this ability in some web browsers. */

/* Remove lists' default padding-left: */
menu,
ol,
ul {
  padding-left: 0;
}

/* Additionally, since list markers appear on the outside of lists, removing the padding using the snippet above can cause the list markers (the ones used in articles that we’re not resetting) to overlap neighboring content or overflow the viewport, so you’ll want to switch them to the inside instead: */
article ol,
article ul {
  list-style-position: inside;
}

/* 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~ ENHANCE LINK UNDERLINES ~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */
a {
  /* text-decoration: none; Uncomment to remove underlines */

  text-underline-position: under; /* Places underlines below the descenders */

  text-decoration-thickness: 8; /* Sets the thickness as a percentage of the font size */
}

/* Remove underline from footnotes */
sub a,
sup a,
.footnote li a {
  text-decoration: none;
}

/* Disable the text inflation algorithm */
html {
  -webkit-text-size-adjust: none; /* for iOS Safari */
  text-size-adjust: none; /* for other mobile browsers */
}

/* Instead of instantly snapping to same-page anchors and text fragments, scroll-behavior: smooth; enables users to scroll to them smoothly. Also, to cater to those that prefer reduced motion for accessibility reasons, the rule is wrapped in a prefers-reduced-motion: no-preference media query. */
@media (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}

/* We set :focus styles globally by modifying how the outline looks. This means that any element that can receive focus, such as <a> and <button> will have a consistent focus style. The outline-offset pulls the outline away from the content a bit, which in my opinion, makes it more user-friendly. */
:focus {
  outline: 1px dotted currentColor;
  outline-offset: 0.2rem;
}

/* REMOVE FOCUS OUTLINE FOR MOUSE USERS but keep it for keyboard users. */
:focus:not(:focus-visible) {
  outline: none;
}

/* ADD POINTER CURSOR to interactive elements that don’t already have an alternative cursor. */
label,
button,
select,
summary,
[type="radio"],
[type="submit"],
[type="checkbox"] {
  cursor: pointer;
}

/*  
~~~~~~~~~~~~~~~~~~~~~
~~~ GLOBAL STYLES ~~~
~~~~~~~~~~~~~~~~~~~~~  */

/*  
~~~~~~~~~~~~~
~~~ Colors ~~
~~~~~~~~~~~~~  */
:root {
  --color-light: #ffffff;
  --color-light-shade: #eeeeee;
  --color-dark: #231f20;
  --color-primary: dodgerblue;
  --color-primary-shade: rgb(24, 103, 182);
  --color-highlight: dodgerblue;
}

/*  
~~~~~~~~~~~~~
~~~ Fonts ~~~
~~~~~~~~~~~~~  */
:root {
  /* If you prefer using rem units (which are better for accessibility), 1rem is equal to 16px (the default root font size). It’s much easier to convert px to rem when 1rem is equal to 10px (font-size: 62.5%), but this can break third-party packages and user browser plugins.
  
  Instead, create a font design system by declaring variables with a memorable naming convention and call those variables (e.g., font-size: var(--font-size-md);). */
  --font-size-xs: 0.5rem;
  --font-size-sm: 0.75rem;
  --font-size-md: 1rem;
  --font-size-lg: 1.25rem;
  --font-size-xl: 1.5rem;
  --font-size-2xl: 1.75rem;
  --font-size-2-5xl: 2rem;
  --font-size-3xl: 2.5rem;
  --font-size-4xl: 3rem;

  /* Project-specific fonts */
  --font-sans: "Roboto", "Segoe UI", "Hind", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  --font-code: "Source Code Pro", monospace;
  --font-serif: "Source Serif 4", "Times New Roman", serif;
  --font-headings: "Space Grotesk", "Helvetica Neue", Helvetica, Arial,
    sans-serif;
  --font-body: "Segoe UI", "Helvetica Neue", Helvetica, Arial, sans-serif;
}

/* 
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
~~~ HTML Semantic Elements ~~~
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~ */

/*  ~~ Set Default Fonts ~~  */
html {
  font-family: var(--font-sans);
}

body {
  font-weight: 400;
}

/*  ~~ Headings ~~  */
h1,
h2,
h3,
h4,
h5,
h6 {
  font-family: var(--font-headings);
  color: var(--color-dark);
  margin-bottom: 0.5rem;
}

h1 {
  font-size: var(--font-size-4xl);
  font-weight: 300;
}

h2 {
  font-size: var(--font-size-3xl);
  font-weight: 500;
  margin-bottom: 0.75rem;
}

h3 {
  font-size: var(--font-size-2xl);
  font-weight: 500;
  margin-bottom: 0.5rem;
}

h4 {
  font-size: var(--font-size-xl);
  font-weight: 500;
  margin-bottom: 0.5rem;
}

h5 {
  font-size: var(--font-size-lg);
  font-weight: 400;
  margin-bottom: 2rem;
}

h6 {
  font-size: var(--font-size-md);
  font-weight: 300;
  margin-bottom: 2rem;
}

/*  ~~ Paragraphs and Lists ~~  */
p,
ul,
ol {
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  line-height: 1.6;
  margin-bottom: 1em;
}

/*  ~~ List Items ~~  */
li {
  font-family: var(--font-sans);
}

/*  ~~ Code Blocks & Preformatted Text ~~  */
code {
  font-family: var(--font-code);
  background-color: #f7f7f7;
}

code {
  padding: 0;
  padding-top: 0.2em;
  padding-bottom: 0.2em;
  margin: 0;
  font-size: 85%;
  border-radius: 3px;
}

code:before,
code:after {
  letter-spacing: -0.2em;
  content: "\00a0";
}

pre > code {
  padding: 0;
  margin: 0;
  font-size: 100%;
  word-break: normal;
  white-space: pre;
  background: transparent;
  border: 0;
}

pre {
  padding: 1rem;
  overflow: auto;
  font-size: 85%;
  line-height: 1.45;
  border-radius: 3px;
  background-color: #f7f7f7;
  margin-bottom: 1rem;
  word-break: normal;
  word-wrap: normal;
}

pre code {
  display: inline;
  max-width: initial;
  padding: 0;
  margin: 0;
  overflow: initial;
  line-height: inherit;
  word-wrap: normal;
  background-color: transparent;
  border: 0;
}

pre code:before,
pre code:after {
  content: normal;
}

/*  ~~ Horizontal Rule ~~  */
hr {
  border: 0;
  clear: both;
  display: block;
  width: 96%;
  background-color: black;
  height: 2px;
  margin: 1.75em 0;
}

/*  ~~ Hyperlinks ~~  */
a {
  color: currentColor;
  font-weight: 600;
}

a:hover {
  color: var(--color-highlight);
}

header nav a::after {
  content: "";
  width: 100%;
  opacity: 0;
  height: 2px;
  display: block;
  background: currentColor;
}

header nav a:hover::after {
  background-color: var(--color-highlight);
  opacity: 1;
}

/*  ~~ Highlighted and Selected Text ~~  */

mark.highlight {
  color: var(--color-light);
  background-color: var(--color-highlight);
  font-style: normal;
}

::selection {
  color: var(--color-light);
  background-color: var(--color-highlight);
}

mark.highlight::selection {
  background-color: var(--color-dark);
}

/*  ~~ Blockquotes ~~  */

blockquote {
  background: #ddd;
  border-left: 10px solid #aaa;
  margin: 1.5em 0;
  padding: 1em 2em;
  font-style: italic;
  quotes: "\201C""\201D""\2018""\2019";
}

blockquote:before {
  color: #aaa;
  font-family: var(--font-headings);
  font-style: normal;
  content: "\201C";
  font-size: 12rem;
  line-height: 0.1rem;
  margin-right: 0.25em;
  vertical-align: -0.5em;
}

blockquote:before {
  content: "\201C";
}

blockquote p {
  font-family: var(--font-serif);
  font-size: var(--font-size-lg);
}

/*  ~~ Tables ~~  */

table {
  /* display: table; */
  border-collapse: collapse;
  border-spacing: 0;
  margin-bottom: 1rem;
}

td,
th {
  padding: 0;
}

tr,
td {
  border: 0;
}