/**** BODY AND HEADER *****/
body {
  font-family: 'Franklin Gothic', 'Arial', sans-serif;
  /* The fixed nav and the footer both run edge to edge; #main carries its own
     side margins, so the default 8px body margin just misaligned them. */
  margin: 0;
}

#main {
  margin-left: 3rem;
  margin-right: 3rem;
  margin-bottom: 4rem;
  padding-top: calc(var(--nav-height) + 3em);
  display: block;
}

header {
  text-align: center;
  margin-bottom: 4rem;
  margin-top: 4rem;
}

header h1 {
  font-size: 3rem;
  font-weight: lighter;
  margin-bottom: 0.5rem;
  letter-spacing: 0.2rem;
}

header a {
  color: #e01a2b;
}

header a:hover {
  color: #B82D47;
}

a {
  text-decoration: none;
}

.typewriter-container {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
}

.typewriter {
  font-family: monospace;
  margin: 0 auto;
  /* Measured in ch so the wrap point stays put as the font scales with the
     viewport: the heading always breaks at the same word rather than leaving a
     single stranded one on the last line. At the large end this lands close to
     the body column width, so the heading lines up with the content below. */
  max-width: 25ch;
  /* The reveal no longer animates width, so this wraps like ordinary text:
     nothing to clip, and no single-line width to keep inside the viewport. */
  white-space: normal;
}

/* Fluid size for both page headings. Applies to the projects header too,
   which carries .typewriter as well. */
#front-page h1.typewriter,
#projects-page h1.typewriter,
#contact-page h1.typewriter {
  font-size: clamp(1.35rem, 3.4vw, 2.4em);
}

/* Once the script has split the text, every character is already laid out --
   just not painted. Revealing one is a paint, never a reflow, so the line
   cannot shift and the cost does not grow with the length of the text.
   Without .tw-active (script failed, or reduced motion) everything stays
   visible, so the heading is never blank. */
.typewriter.tw-active .tw-char {
  visibility: hidden;
}

.typewriter.tw-active .tw-char.tw-on {
  visibility: visible;
}

/* Words never break mid-word, even though each letter is its own span. */
.tw-word {
  white-space: nowrap;
}

.tw-char {
  position: relative;
}

/* The caret rides the current character. Absolutely positioned so moving it
   along costs a paint rather than a layout pass. */
.tw-char.tw-caret::after {
  content: "";
  position: absolute;
  right: -0.09em;
  top: 0.1em;
  bottom: 0.1em;
  width: 0.1em;
  background: orange;
  animation: blink-caret 0.75s step-end infinite;
}

@keyframes blink-caret {
  from, to {
    opacity: 0;
  }

  50% {
    opacity: 1;
  }
}

.content-fp, .content-p, .content-contact {
  margin-left: 4rem;
  font-size: 20px;
}

.intro-text {
  font-size: larger;
  font-weight: 700;
}

#thank-you {
  text-align: center;
  margin-right: 4rem;
}

#front-page h1, #projects-page h1, #contact-page h1 {
  font-size: 2.4em;
  font-weight: lighter;
  text-align: center;
  margin: 0 0 2.5rem;
}

#front-page h2, #projects-page h2, #contact-page h2 {
  text-align: center;
}

#workExperience a, #education a, .projects a {
  color: #e01a2b;
}

#workExperience a:hover, #education a:hover, .projects a:hover {
  color: #B82D47
}


/* Font Config */
ul {
  padding-top: 0px;
  margin-top: 4px;
}

h2, h3 {
  font-weight: lighter;
  padding: 0px;
  margin: 0px;
}

h2 {
  font-size: 1.8em;
  /* `h2, h3 { margin: 0 }` above left section headings sitting flush against
     their first entry. One rule here keeps every section heading on both pages
     spaced the same, instead of the two-off .addBottomSpacingSmall utility
     that only some headings carried. */
  margin-bottom: 1.5rem;
}



section {
  margin-top: 0rem;
  margin-bottom: 3rem;
}

/* Entry headings, on both pages.
   The global `h2, h3 { margin: 0 }` left each title floating midway between the
   entry above it and its own text, so entries did not read as groups. Bind the
   title to its own content, and let the gap between entries do the separating.
   Project entries and resume entries share this scale so the two pages keep the
   same rhythm. */
.projects h3,
.ResumeItem h3 {
  font-size: 1.25em;
  font-weight: normal;
  margin-bottom: 0.6rem;
}

.ResumeItem ul {
  margin-top: 0.6rem;
}

.projects p {
  margin-top: 0;
  line-height: 1.5;
}

/* Full-viewport line lengths are hard to read: the eye loses the line on the
   way back to the left edge. Roughly 70 characters is the comfortable range. */
.projects p,
.projects ul {
  max-width: 68ch;
}

.projects ul {
  margin-top: 0.6rem;
}

/* Tight inside an entry, generous between them -- the same gap whether the
   entry is a project or a job. */
section.projects,
.ResumeItem {
  margin-bottom: 2.5rem;
}

/* Section headings on both pages are centred, so centre the column under them
   rather than flushing it left against a wide empty gutter. The cap also keeps
   lines to a readable measure -- across a full-width viewport the eye loses the
   line on the way back to the left edge. Desktop only: below this the
   narrow-screen margins in the media query should win. */
@media (min-width: 900px) {
  #front-page .content-fp,
  #projects-page .content-p,
  #contact-page .content-contact {
    max-width: 72ch;
    margin-left: auto;
    margin-right: auto;
  }
}

#courses ul {
  columns: 2;
}

hr {
  margin-top: 3rem;
  margin-bottom: 3rem;
  border: 0;
  border-top: 1px solid #eeeeee;
}

/* NAVBAR */
:root {
  --nav-bg: #ffffff;
  --nav-line: #a2bffe;
  --nav-text: #1e3654;
  --nav-height: 5.5rem;
  --nav-gap: 2.5rem;
  --footer-bg: #a2bffe;
}

.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--nav-height);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 2.5rem;
  background: var(--nav-bg);
  border-bottom: 3px solid var(--nav-line);
  color: var(--nav-text);
  z-index: 100;
}

.nav-brand {
  display: flex;
  align-items: center;
  color: var(--nav-text);
  text-decoration: none;
  flex-shrink: 0;
}

.nav-name {
  font-size: 3rem;
  font-weight: 700;
  /* letter-spacing: 0.02em; */
  white-space: nowrap;
}

.nav-links {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.navbar a {
  display: inline-block;
  color: var(--nav-text);
  text-align: center;
  padding: 0.6rem 1.1rem;
  font-size: 1.05rem;
  line-height: 1.2;
  border-radius: 4px;
  text-decoration: none;
}

#navLinks a.active {
  font-weight: 800;
  cursor: default;
}

/* Bold text is wider than regular, so making the current link bold used to
   shove its neighbours sideways. Each link carries an invisible bold copy of
   its own label (from data-label), which reserves the wider width at all
   times. The column flex direction lets the copy collapse to zero height, so
   it costs width only. */
#navLinks a:not(.nav-cta) {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
}

#navLinks a:not(.nav-cta)::after {
  content: attr(data-label);
  font-weight: 800;
  height: 0;
  overflow: hidden;
  visibility: hidden;
  pointer-events: none;
}

#mePicMobile {
  display: none;
}

/******** MODAL **********/
#modal {
  display: none;
  position: fixed;
  z-index: 100;
  padding-top: 10rem;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: #000;
  background-color: rgba(0, 0, 0, .4);
}

#modal-content {
  font-size: 1.2em;
}

#modal h3 {
  font-size: 1.17rem;
  margin-block-start: 1rem;
  margin-block-end: 1rem;
  margin-inline-start: 0rem;
  margin-inline-end: 0rem;
  font-weight: bold;
}

#modal-container {
  background-color: #fefefe;
  margin: auto;
  padding: 20px;
  border: 1px solid #888;
  width: 80%;
}

.close {
  color: #aaa;
  float: right;
  font-size: 2rem;
  font-weight: 60rem;
}

#scrollable {
  max-width: 100%;
  max-height: 20rem;
  overflow-y: scroll;
}

/*** SOCIAL MEDIA LOGOS ****/

#social-media {
  display: flex;
  border-bottom: 0;
  justify-content: center;
  /* gap rather than padding-right on each logo: a trailing pad on the last
     one pushed the whole row off-centre. */
  gap: 5rem;
  margin-top: 2.5rem;
  /* the tooltip drops 150% below an icon, so leave it room inside the footer */
  padding-bottom: 2rem;
}

#social-media img {
  border-bottom: 0;
  border: 0;
  /* margin-right: 5rem; */
}

/**** SOCIAL MEDIA TOOL TIPS ****/

.tooltip {
  position: relative;
  display: inline-block;
}

#tooltiptext {
  /* visibility: hidden; */
  display: none;
  width: 10rem;
  font-size: 0.8rem;
  background-color: #191818;
  color: #fff;
  text-align: center;
  border-radius: 0.8rem;
  padding: 0.5rem 0;
  position: absolute;
  z-index: 1;
  top: 150%;
  left: 50%;
  margin-left: -5rem;
}

#tooltiptext::after {
  content: "";
  position: absolute;
  bottom: 100%;
  left: 50%;
  margin-left: -0.5rem;
  border-width: 0.5rem;
  border-style: solid;
  border-color: transparent transparent black transparent;
}

/**** BUTTONS ****/

.skillButton {
  font-size: 100%;
  padding-top: 0.5em;
  padding-right: 1em;
  padding-bottom: 0.5em;
  padding-left: 1em;
  display: inline-block;
  line-height: normal;
  white-space: nowrap;
  border-top-left-radius: 4px !important;
  border-top-right-radius: 4px !important;
  border-bottom-right-radius: 4px !important;
  border-bottom-left-radius: 4px !important;
  margin-bottom: 15px;
  background-color: #e01a2b;
  text-align: center;
  color: white;
  text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.1);
  outline: none;
  border: none;
}

.skillButton:hover {
  background-color: #B82D47;
  cursor: pointer;
}








/************lighthouse****************/
.site-footer {
  padding: 40px 20px;
  background-color: var(--footer-bg);
  /* border-top: 1px solid #35597f; */
}

.footer-perf-scorecard {
  max-width: 1200px;
  margin: 0 auto;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  text-align: center;
}

.footer-perf-scorecard h4 {
  color: #1e3654;
  /* 6.7:1 on #a2bffe */
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  margin-bottom: 12px;
}

.badge-row {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: flex-start;
  /* Centers the badges as a group, and keeps the pair centered when the
     440px items wrap to one column on narrow screens. */
  justify-content: center;
}

.badge-item {
  margin: 0;
  flex: 0 1 440px;
  max-width: 100%;
}

.badge-item figcaption {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
  color: #2a4260;
}

.badge-row img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 4px;
  transition: opacity 0.2s ease;
}

.badge-row img:hover {
  opacity: 0.85;
}

.architecture-note {
  font-size: 11px;
  color: #2a4260;
  /* 5.6:1 on #a2bffe */
  margin-top: 8px;
}

/* SCROLL TO TOP (phones only -- see the media query below for where it turns
   on). Hidden here rather than only in the media query so the button never
   shows up on a desktop viewport. */
.scroll-top {
  display: none;
}












/************media queries****************/

/* larger screens */

@media (min-width: 1300px) {
  #main {
    font-size: 140%;
  }

  header {
    font-size: 140%;
  }
}

/*mobile phone*/

@media (max-width: 589px) {
  #main {
    width: auto;
    overflow-x: hidden;
    margin-left: 0.5rem;
    margin-right: 0.5rem;
  }

  .content-fp, .content-p, .content-contact {
    text-align: center;
    margin-left: 0rem;
    margin-right: 1rem;
  }

  .content-fp li, .content-p li {
    text-align: left;
  }

  #thank-you {
    margin-right: 0;
  }

  /** navbar **/
  :root {
    --nav-height: 4.25rem;
    --nav-gap: 1.75rem;
  }

  .navbar {
    padding: 0 1rem;
  }

  .nav-name {
    font-size: 1.05rem;
  }

  .nav-links {
    gap: 0.1rem;
  }

  .navbar a {
    font-size: 0.9rem;
    padding: 0.5rem 0.6rem;
  }

  #mePicMobile {
    display: block;
    width: 50%;
    height: auto;
    border-radius: 100%;
    margin-left: auto;
    margin-right: auto;
  }

  .skillButton {
    font-size: 95%;
  }

  #courses ul {
    columns: 1;
  }

  /** social media/footer **/
  #social-media {
    gap: 2rem;
  }

  /** tool tip **/
  #tooltiptext {
    width: 5rem;
    font-size: 0.5rem;
    margin-left: -2.5rem;
    white-space: wrap;
  }

  #tooltiptext::after {
    content: "";
    position: absolute;
    bottom: 100%;
    left: 50%;
    margin-left: -0.5rem;
    border-width: 0.5rem;
    border-style: solid;
    border-color: transparent transparent black transparent;
  }

  /** modal **/
  #scrollable {
    max-width: 100%;
    max-height: 10rem;
    overflow-y: scroll;
  }

  /** scroll to top **/
  .scroll-top {
    display: flex;
    align-items: center;
    justify-content: center;
    position: fixed;
    right: 1rem;
    /* Clear of the home indicator on notched phones, which otherwise sits on
       top of the button. */
    bottom: calc(1rem + env(safe-area-inset-bottom, 0px));
    width: 2.75rem;
    height: 2.75rem;
    padding: 0;
    /* Not --nav-line: at 1.8:1 against both the white page and the footer's
       own #a2bffe, that edge disappeared exactly where the button overlaps the
       footer. This passes 1.4.11 in both places (7.3:1 and 4:1). */
    border: 2px solid #35597f;
    border-radius: 50%;
    background: var(--nav-bg);
    color: var(--nav-text);
    font-size: 1.25rem;
    line-height: 1;
    box-shadow: 0 2px 6px rgba(30, 54, 84, 0.25);
    cursor: pointer;
    z-index: 90;
    /* Hidden but laid out, so showing it is a fade rather than a reflow.
       visibility also takes it out of the tab order while it is invisible. */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
  }

  .scroll-top.is-visible {
    opacity: 1;
    visibility: visible;
  }

  /* Same ring as the contact form's submit button, darkened: that form's
     light blue reads against a red button, but not against this white one. */
  .scroll-top:focus-visible {
    outline: 3px solid #35597f;
    outline-offset: 2px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .scroll-top {
    transition: none;
  }
}

@media (max-width: 480px) {
  .navbar {
    padding: 0 0.75rem;
  }

  .nav-name {
    font-size: 0.95rem;
  }

  .navbar a {
    font-size: 0.82rem;
    padding: 0.45rem 0.45rem;
  }
}

@media (max-width: 360px) {
  .nav-name {
    font-size: 0.85rem;
  }

  .navbar a {
    font-size: 0.75rem;
    padding: 0.4rem 0.35rem;
  }
}

/*ipad (not pro)*/

@media (max-width: 800px) and (min-width: 590px) {
  #main {
    margin-left: 2rem;
    margin-right: 2rem;
  }

  .nav-name {
    font-size: 2rem;
  }

  #courses ul {
    columns: 1;
  }

  /** modal **/
  #scrollable {
    max-width: 100%;
    max-height: 15rem;
    overflow-y: scroll;
  }
}

/*randomly making screen as small as possible*/

@media (max-width: 293px) {
  .nav-name {
    font-size: 0.72rem;
  }

  .navbar a {
    font-size: 0.7rem;
    padding: 0.35rem 0.25rem;
  }

  .skillButton {
    font-size: 50%;
  }

  #courses ul {
    columns: 1;
  }

  #social-media {
    flex-wrap: wrap;
    gap: 1.5rem;
  }

  #tooltiptext {
    width: 8rem;
    font-size: 0.5rem;
    margin-left: -4rem;
  }
}