/* Site Colors
Slate Blue: #0f172a
Light Slate: #94a3b8
Teal: #5eead4
Light Teal: #cff9f2
Off White: #e2e8f0 */
body {background-color: #0f172a; font-family: "Source Sans 3", sans-serif; font-optical-sizing: auto; font-weight: 400; font-style: normal; color: #94a3b8; font-size: 16px; padding-bottom: 48px;}

/* Typography */
h1 {font-family: "Source Sans 3", sans-serif; font-optical-sizing: auto; font-weight: 500; font-style: normal; color: #e2e8f0; font-size: 40px; margin: 0px; line-height: 1.1;}
h2 {font-family: "Source Sans 3", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal; color: #e2e8f0; font-size: 18px; margin: 32px 0px 0px 0px; line-height: 1.1; text-transform: uppercase;}
h3 {font-family: "Source Sans 3", sans-serif; font-optical-sizing: auto; font-weight:500; font-style: normal; color: #e2e8f0; font-size: 22px; margin: 0px; line-height: 1.1;}
h5 {font-family: "Source Sans 3", sans-serif; font-optical-sizing: auto; font-weight: 700; font-style: normal; color: #cff9f2; font-size: 18px; margin: 38px 0px -8px 0px; line-height: 1.1; text-transform: uppercase;}
p {font-size: 17px; margin: 16px 0px; line-height: 1.48;}
a {color: #cff9f2; transition: all 0.3s ease-in-out; text-decoration: none;}
a:hover, a:focus {color: #5eead4; transition: all 0.3s ease-in-out;}
ul {font-size: 17px; margin: 16px 0px; line-height: 1.48;}
ul li {margin-bottom: 6px;}
ul {
  list-style-type: none; /* Removes default bullets */
  padding-left: 0; /* Adjust padding as needed */
}
ul li {
  position: relative; /* Allows positioning of the icon */
  padding-left: 30px; /* Creates space for the icon */
  margin-bottom: 10px; /* Adds spacing between list items */
}
ul li::before {
  content: "\f00c"; /* Unicode for a checkmark icon (replace with your desired icon's Unicode) */
  font-family: "Font Awesome 6 Free"; /* Specifies the Font Awesome font family */
  font-weight: 900; /* Use 900 for solid icons (fas), 400 for regular (far), etc. */
  position: absolute; /* Positions the icon outside the text flow */
  left: 0; /* Aligns the icon to the left */
  top: 0.1em; /* Vertically aligns the icon with the text */
  color: #cff9f2; /* Customizes the icon color */
  font-size: 1em; /* Customizes the icon size */
}


/* Intro Section */
.intro {width: 100%; max-width: 800px; margin: 36px auto 0px auto;}
.intro .icons {}
.intro .icons a {margin-right: 15px; transition: all 0.3s ease-in-out; font-size: 20px; color: #94a3b8;}
.intro .icons a:hover, .intro .icons a:focus {color: #5eead4;}

/* About Section */
.bio {width: 100%; max-width: 800px; margin: 48px auto 0px auto;}
span {color: #5eead4;}

/* Projects Section */
.projects {width: 100%; max-width: 800px; margin: 64px auto 0px auto;}
span {color: #5eead4;}
.pills {margin-top: 2px;}
.pills span {margin-right: 15px; background-color:#4a4a4a; padding: 4px 14px; border-radius: 25px;}

/* Compensation Section */
.comp {width: 100%; max-width: 800px; margin: 64px auto 0px auto;}