/**** 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: #e94452;
}

header a:hover {
  color: #B82D47;
}

a {
  text-decoration: none;
}

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

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

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

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

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

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


/* Spacing Control */
.addBottomSpacingSmall{
  margin-bottom: 15px;
}

/* Font Config */
ul{
  padding-top: 0px;
  margin-top: 4px;
}
h2, h3 {
  font-weight: lighter;
  padding: 0px;
  margin: 0px;
}

h2{
  font-size: 1.8em;  
}



section {
  margin-bottom: 2rem;
  margin-top: 2rem;
}

#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-brand:hover .nav-name {
  text-decoration: underline;
}

.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: #e94452;
  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;
}












/************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 {
    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;
  }
}

@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;
  }
}