/* Global styles */
:root {
  /* Font families */
  --font-sans: system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji";

  /* Typography - Text Sizes */
  --text-size-footnote: 13px;
  --text-size-paragraph: 17px;

  /* Typography - Line Heights */
  --line-height-footnote: 18px;
  --line-height-paragraph: 22px;

  /* Typography - Letter Spacing */
  --letter-spacing-footnote: 1.2px;
  --letter-spacing-paragraph: 0px;
  --letter-spacing-paragraph-tight: -0.48px;

  /* Typography - Font Weights */
  --font-weight-regular: 340;
  --font-weight-medium: 440;
  --font-weight-semibold: 480;

  /* Colors */
  --color-bg-primary: #F0F4F5;
  
  --color-text-default: #20303D;
  --color-text-secondary: #B4C0C2;
  --color-text-footnote: #B4C0C2;
  --color-text-hover: #007bff;

}

body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 768px;
  margin: 0 auto;
  padding: 0 24px 0 24px;
  background-color: var(--color-bg-primary);
  font-family: var(--font-sans);
}

/* Classes from index.html */
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  margin-top: 96px;
}

.avatar-container {
    flex-shrink: 0;
}

.avatar {
    flex: 1;
    width: 48px;
    height: 48px;
    overflow: hidden;
    border-radius: 24px;
}

.avatar img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.connectlinks {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  gap: 12px;
  margin: 0;
  padding: 0;
  transition: color 0.2s ease;
}

.header-iconcontainer {
  width: 24px;
  height: 24px;
  margin: 0;
  padding: 0;
}

.connectlinks:hover {
  color: var(--color-text-hover);
}

.titlecontainer {
    display: flex;
    flex-direction: column;
    gap: 0;
    margin: 12px 0 0 0;
    padding: 0;
    font-size: var(--text-size-paragraph);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-paragraph);
}

.titlename {
    color: var(--color-text-default);
}

.titlejob {
    color: var(--color-text-secondary);
}

.footnotetitle {
    margin: 0;
    padding: 0;
    color: var(--color-text-secondary);
    font-size: var(--text-size-footnote);
    font-weight: var(--font-weight-semibold);
    line-height: var(--line-height-footnote);
    letter-spacing: var(--letter-spacing-footnote);
    text-transform: uppercase;
}

.workexperience {
    display: flex;
    flex-direction: column;
    margin: 96px 0 0 0;
    padding: 0;

}

.publicspeaking {
    display: flex;
    flex-direction: column;
    margin: 96px 0 96px 0;
    padding: 0;
}

/* Job Experience */

.jobrecord {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin: 24px 0 0 0;
    padding: 0;
}

.timerange {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    gap: 4px;
    width: 174px;
    margin: 0 24px 0 0;
    padding: 0;
    flex-shrink: 0;
    flex-grow: 0;
    flex-basis: 174px;
}

.inrecordmonth {
  margin: 0;
  padding: 0;
  color: #20303D;
  font-size: var(--text-size-footnote);
  font-weight: var(--font-weight-medium);
  line-height: var(--line-height-footnote);
  width: 24px;
}

.inrecordyear {
  margin: 0;
  padding: 0;
  color: var(--color-text-default);
  font-size: var(--text-size-paragraph);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-paragraph);
  letter-spacing: var(--letter-spacing-paragraph);
  width: 42px;
}

.jobdetails {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  font-size: var(--text-size-paragraph);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-paragraph);
  letter-spacing: var(--letter-spacing-paragraph);
}

.jobtitle {
  color: var(--color-text-default);
}

.joblocation {
    color: var(--color-text-secondary);
}

/* Public Speaking */

.speakingrecord {
    display: flex;
    flex-direction: row;
    align-items: flex-start;
    margin: 24px 0 0 0;
    padding: 0;
}

.speakingdetails {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 0;
  padding: 0;
  font-size: var(--text-size-paragraph);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-paragraph);
  letter-spacing: var(--letter-spacing-paragraph);
}

.speakingtitle {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 0;
  color: var(--color-text-default);
}

.speakingtitle a {
  color: var(--color-text-default);
  text-decoration: none;
}

.speakingtitle a:hover {
  color: var(--color-text-hover);
  transition: color 0.2s ease;
}

.speakingtitle .outerlink-icon {
  margin-left: 0px;
  color: var(--color-text-default);
  transition: color 0.2s ease;
  width: 20px !important;
  height: 20px !important;
  min-width: 20px !important;
  min-height: 20px !important;
  max-width: 20px !important;
  max-height: 20px !important;
  flex-shrink: 0;
  display: inline-block;
  vertical-align: middle;
  box-sizing: border-box;
}

.speakingtitle:hover .outerlink-icon {
  color: var(--color-text-hover);
}

.speakingevent {
  color: var(--color-text-secondary);
}