page.css

/* Variables */
/* -------------------------------------------------------- */
:root {
  /* Color */
  --white: #fff;
  --black: #000;
  --blue: #0f62fe;
    /* Background Color */
    --bg-light-gray: #F9F9F9;
    --bg-gray: #f4f4f4;
    --bg-dark-gray-01: #1c1c1c;
    --bg-dark-gray-02: #2c2c2c;
    --bg-dark-blue: #003A6D;
    /* Button Color */
    --btn-prim: #0f62fe;
    --btn-prim-hover: #0050e6;
    --btn-secnd: #6f6f6f;
    --btn-scnd-hover: #5e5e5e;
    /* Font Color */
    --font-light-blue: #78A9FF;

  /* Weight */
  --bold: 900;
  /* Sizing */
  --plex-14: 0.875em;
  --plex-16: 1em;
  --plex-18: 1.125em;
  --plex-20: 1.25em;
  --plex-24: 1.5em;
  --plex-28: 1.75em;
  --plex-36: 2.25em;
  --plex-72: 4.5em;
  --plex-180: 11.25em;
}
/* -------------------------------------------------------- */

/* Backgrounds */
/* -------------------------------------------------------- */
.internship-bg {
  background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url(../../wp-content/images/internship_collaboration.jpeg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center;
  color: var(--white);
}

.blur-bg {
  backdrop-filter: blur(6px);
}

.engage-bg {
  background-image: url(../../wp-content/backgrounds/Engage_HomepageBG.png);
  background-repeat: no-repeat;
  background-size: cover;
  color: var(--white);
}

.learn-bg {
  background-image: url(../../wp-content/backgrounds/Learn_HomepageBG.png);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: right;
  color: var(--black);
}

.white-bg {
  background-color: var(--white);
}

  .white-bg h3, .white-bg h4 {
    color: var(--black);
  }

.gray-bg {
  background-color: var(--bg-gray);
}

.light-gray-bg {
  background-color: var(--bg-light-gray);
}

  .gray-bg a, .light-gray-bg a {
    color: var(--blue);
  }

  .gray-bg h3, .gray-bg h4, .light-gray-bg h3, .light-gray-bg h4 {
    color: var(--black);
  }

  .gray-bg a {
    color: var(--blue)
  }

.blue-bg {
  background-color: var(--bg-dark-blue);
  color: var(--white);
}

  .blue-bg a {
    color: var(--font-light-blue);
  }

.dark-gray-bg {
  background-color: var(--bg-dark-gray-02);
  color: var(--white);
}

  .dark-gray-bg a {
    color: var(--font-light-blue);
    font-size: var(--plex-18);
  }

  .dark-gray-bg h4 {
    font-size: var(--plex-24) !important;
  }
/* -------------------------------------------------------- */

/* Icons */
/* -------------------------------------------------------- */
.icon-sm {
  max-height: var(--plex-36);
  max-width: var(--plex-36);
  margin-bottom: 1.25em;
}

.icon-lg {
  height: var(--plex-28);
}

.icon-xl {
  height: var(--plex-36);
}

.icon {
  margin-bottom: 0.5em;
}

.icon-invert {
  filter: invert(1);
}
/* -------------------------------------------------------- */

/* Buttons */
/* -------------------------------------------------------- */
.button {
  color: var(--white) !important;
  padding: 1em 1.5em;
  line-height: var(--plex-24);
}

.button-primary {
  background-color: var(--btn-prim);
  margin-top: 1.25em;
}

.button-secondary {
  background-color: var(--btn-secnd);
  margin-top: 1.25em;
}

.button-primary:hover {
  background-color: var(--btn-prim-hover);
}

.button-secondary:hover {
  background-color: var(--btn-scnd-hover);
}

.button-tertiary {
  border: solid var(--white) 1px;
  font-size: var(--plex-16);
  height: 9.375em;
  display: flex;
  flex-flow: column nowrap;
}

.button-tertiary div:nth-child(0) {
  flex-grow: 1;
}

.button-tertiary div:nth-child(1) {
  flex-grow: 4;
}

.button-tertiary:hover {
  background-color: var(--white);
}

.button-tertiary:hover h4 {
  color: var(--black);
}

.button-tertiary:hover p {
  color: var(--blue);
}

.button-g {
  display: flex;
  flex-flow: wrap row;
  gap: 1em;
}
/* -------------------------------------------------------- */

/* Main */
/* -------------------------------------------------------- */
.main-content p {
  font-size: var(--plex-18);
  line-height: var(--plex-24);
}

.main-content h2 {
  font-size: var(--plex-36);
}
/* -------------------------------------------------------- */

/* Hero section */
/* -------------------------------------------------------- */
.hero {
  padding: 3em;
}

.hero div:nth-child(2) {
  padding-left: 1em;
}

.main-content section:first-child {
  width: 100%;
  background-color:var(--bg-dark-gray-01);
}

.main-content section:first-child p {
  font-size: var(--plex-20);
}

.main-content section:first-child b {
  font-weight: var(--bold);
}

.main-content section:first-child img {
  margin-top: 4em;
}

.main-content section:first-child h6 {
  padding: 0;
}
/* -------------------------------------------------------- */

/* Content containers */
/* -------------------------------------------------------- */
/* Targets all sections after hero */
.main-content section:not(:first-child) {
  padding: 4em;
} 

.section-header {
  padding-right: 2em;
}

/* Targets all section containing card grid (ex. videos, course, etc.) */
.card-section {
  padding: 2em 4em !important;
}

.card-section-header {
  margin-left: 1em;
  padding-right: 2em;
}

/* For pure grid units requiring paddings */
.pure-g-pad > div {
  padding: 1.2em;
}

/* Format column group */
.column-g > div {
  padding: 0.2em;
}

/* Format inline group */
.inline-g {
  display: flex;
  flex-flow: row nowrap;
  gap: 1em;
  align-items: flex-start;
}

.inline-g h2 {
  color:var(--blue);
}

.inline-g p {
  padding: 0px;
  margin-right: 2em;
}

.inline-g-ol {
  display: flex;
  flex-flow: row nowrap;
  gap: 0.2em;
  align-items: center;
}

/* Format horizontal divider */
.hr-container {
  padding: 2em 0em 3em 0em;
}
/* -------------------------------------------------------- */

/* Quotations */
/* -------------------------------------------------------- */
.quote {
  margin-bottom: 1em;
}

.quote q {
  font-family: Georgia, 'Times New Roman', Times, serif !important;
	float: left;
	line-height: 1.4em;
	font-size: var(--plex-28);
  padding: 0.5em 0em;
}

.quote span {
  color: var(--font-light-blue);
}

.quote p {
  font-size: var(--plex-14);
}

.quote-blk {
  background-color: var(--bg-gray);
  margin: 0.2em;
  padding: 2em;
  color: var(--black);
  font-size: var(--plex-18);
}

.quote-blk p {
  margin-top: 1em;
  font-size: var(--plex-16);
}
/* -------------------------------------------------------- */

/* Custom styling */
/* -------------------------------------------------------- */
/* For links under headers */
.highlight-link {
  font-size: var(--plex-20);
}

/* Spacer between sections */
.spacer {
  height: 0.3125em;
}

/* Hero section subtext */
.subtext {
  font-weight: 300;
}
/* -------------------------------------------------------- */

/* Media queries */
/* -------------------------------------------------------- */
/* 768px and below screen sizes */
@media  screen and (max-width: 48em) {
  /* Decrease header size for smaller screens */
  .main-content h2 {
    font-size: var(--plex-28);
  }

  /* Decrease section padding for smaller screens */
  .main-content section:not(:first-child) {
    padding: 2em;
  } 

  /* Decrease card section padding for smaller screens */
  .card-section {
    padding: 1em !important;
  }

  /* Decrease padding for smaller screens */
  .pure-g-pad > div {
    padding: 0.4em;
  }

  /* Decrease highlight link padding for smaller screens */
  .highlight-link {
    padding-bottom: 1rem;
  }

  /* Decrease font size for smaller screens */
  .dark-gray-bg h4 {
    font-size: var(--plex-20) !important;
  }

  /* Remove padding from hero content for smaller screens */
  .hero div:nth-child(2) {
    padding-left: 0em;
  }
}

/* 1024px and above screen sizes */
@media  screen and (min-width: 64em) {
  /* Resize quote block to full height for larger screens */
  .quote-blk {
    height: 100%;
  }
}
/* -------------------------------------------------------- */