@import url('https://fonts.googleapis.com/css2?family=Archivo:wght@400;500;700&family=Mulish:ital@0;1&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Figtree:wght@400;500;600;700&family=Inter&display=swap');
/* Document
 * ========================================================================== */
/**
 * Add border box sizing in all browsers (opinionated).
 */
*,
::before,
::after {
  box-sizing: border-box;
}
/**
 * 1. Add text decoration inheritance in all browsers (opinionated).
 * 2. Add vertical alignment inheritance in all browsers (opinionated).
 */
::before,
::after {
  text-decoration: inherit; /* 1 */
  vertical-align: inherit; /* 2 */
}
/**
 * 1. Use the default cursor in all browsers (opinionated).
 * 2. Change the line height in all browsers (opinionated).
 * 3. Use a 4-space tab width in all browsers (opinionated).
 * 4. Remove the grey highlight on links in iOS (opinionated).
 * 5. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 * 6. Breaks words to prevent overflow in all browsers (opinionated).
 */
html {
  cursor: default; /* 1 */
  line-height: 1.5; /* 2 */ /* 3 */
  tab-size: 4; /* 3 */
  -webkit-tap-highlight-color: transparent /* 4 */;
  -ms-text-size-adjust: 100%; /* 5 */
  -webkit-text-size-adjust: 100%; /* 5 */
  word-break: break-word; /* 6 */
}
/* Sections
 * ========================================================================== */
/**
 * Remove the margin in all browsers (opinionated).
 */
body {
  margin: 0;
}
/* Grouping content
 * ========================================================================== */
/**
 * Remove the margin on nested lists in Chrome, Edge, IE, and Safari.
 */
dl dl,
dl ol,
dl ul,
ol dl,
ul dl {
  margin: 0;
}
/**
 * Remove the margin on nested lists in Edge 18- and IE.
 */
ol ol,
ol ul,
ul ol,
ul ul {
  margin: 0;
}
/**
 * 1. Add the correct sizing in Firefox.
 * 2. Show the overflow in Edge 18- and IE.
 */
hr {
  overflow: visible; /* 2 */
}
/**
 * Add the correct display in IE.
 */
main {
  display: block;
}
/**
 * Remove the list style on navigation lists in all browsers (opinionated).
 */
nav ol,
nav ul {
  list-style: none;
  padding: 0;
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/* Text-level semantics
 * ========================================================================== */
/**
 * Add the correct text decoration in Edge 18-, IE, and Safari.
 */
abbr[title] {
  text-decoration: underline;
  text-decoration: underline dotted;
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}
/* Embedded content
 * ========================================================================== */
/*
 * Change the alignment on media elements in all browsers (opinionated).
 */
audio,
canvas,
iframe,
img,
svg,
video {
  vertical-align: middle;
}
/**
 * Remove the border on iframes in all browsers (opinionated).
 */
iframe {
  border-style: none;
}
/**
 * Change the fill color to match the text color in all browsers (opinionated).
 */
svg:not([fill]) {
  fill: currentColor;
}
/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}
/* Tabular data
 * ========================================================================== */
/**
 * Collapse border spacing in all browsers (opinionated).
 */
table {
  border-collapse: collapse;
}
/* Forms
 * ========================================================================== */
/**
 * 1. Show the overflow in IE.
 * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE.
 */
button {
  overflow: visible; /* 1 */
  text-transform: none; /* 2 */
}
/**
 * 1. Change the inconsistent appearance in all browsers (opinionated).
 * 2. Correct the padding in Firefox.
 */
fieldset {
  border: 1px solid #a0a0a0; /* 1 */
}
/**
 * Show the overflow in Edge 18- and IE.
 */
input {
  overflow: visible;
}
/**
 * 1. Correct the text wrapping in Edge 18- and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 */
legend {
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  white-space: normal; /* 1 */
}
/**
 * 1. Add the correct display in Edge 18- and IE.
 * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox.
 */
progress {
  display: inline-block; /* 1 */
}
/**
 * 1. Remove the margin in Firefox and Safari.
 * 2. Remove the default vertical scrollbar in IE.
 * 3. Change the resize direction in all browsers (opinionated).
 */
textarea {
  overflow: auto; /* 2 */
  resize: vertical; /* 3 */
}
/* Interactive
 * ========================================================================== */
/*
 * Add the correct display in Edge 18- and IE.
 */
details {
  display: block;
}
/*
 * Add the correct styles in Edge 18-, IE, and Safari.
 */
dialog {
  background-color: white;
  border: solid;
  color: black;
  display: block;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: fit-content;
}
dialog:not([open]) {
  display: none;
}
/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}
/* Scripting
 * ========================================================================== */
/**
 * Add the correct display in IE.
 */
template {
  display: none;
}
/* User interaction
 * ========================================================================== */
/*
 * 1. Remove the tapping delay in IE 10.
 * 2. Remove the tapping delay on clickable elements
      in all browsers (opinionated).
 */
a,
area,
button,
input,
label,
select,
summary,
textarea,
[tabindex] { /* 1 */
  touch-action: manipulation; /* 2 */
}
/* Accessibility
 * ========================================================================== */
/**
 * Change the cursor on busy elements in all browsers (opinionated).
 */
[aria-busy="true"] {
  cursor: progress;
}
/*
 * Change the cursor on control elements in all browsers (opinionated).
 */
[aria-controls] {
  cursor: pointer;
}
/*
 * Change the cursor on disabled, not-editable, or otherwise
 * inoperable elements in all browsers (opinionated).
 */
[aria-disabled="true"],
[disabled] {
  cursor: not-allowed;
}
/*
 * Change the display on visually hidden accessible elements
 * in all browsers (opinionated).
 */
[aria-hidden="false"][hidden] {
  display: inline;
  display: initial;
}
[aria-hidden="false"][hidden]:not(:focus) {
  clip: rect(0, 0, 0, 0);
  position: absolute;
}
/**
 * Use the default user interface font in all browsers (opinionated).
 */
html {
  font-family:
    system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, Noto Sans, sans-serif,
     "Segoe UI",
     "Roboto",
     "Ubuntu",
     "Cantarell",
     "Noto Sans",
     sans-serif,
     "Apple Color Emoji",
     "Segoe UI Emoji",
     "Segoe UI Symbol",
     "Noto Color Emoji";
}
/**
 * Use the default monospace user interface font in all browsers (opinionated).
 */
code,
kbd,
samp,
pre {
  font-family:
    /* macOS 10.10+ */ "Menlo",
    /* Windows 6+ */ "Consolas",
    /* Android 4+ */ "Roboto Mono",
    /* Ubuntu 10.10+ */ "Ubuntu Monospace",
    /* KDE Plasma 5+ */ "Noto Mono",
    /* KDE Plasma 4+ */ "Oxygen Mono",
    /* Linux/OpenOffice fallback */ "Liberation Mono",
    /* fallback */ monospace,
    /* macOS emoji */ "Apple Color Emoji",
    /* Windows emoji */ "Segoe UI Emoji",
    /* Windows emoji */ "Segoe UI Symbol",
    /* Linux emoji */ "Noto Color Emoji";
}
/**
 * 1. Change the inconsistent appearance in all browsers (opinionated).
 * 2. Add typography inheritance in all browsers (opinionated).
 */
button,
input,
select,
textarea {
  background-color: transparent; /* 1 */
  border: 1px solid WindowFrame; /* 1 */
  color: inherit; /* 1 */
  font: inherit; /* 2 */
  letter-spacing: inherit; /* 2 */
  padding: 0.25em 0.375em; /* 1 */
}
/**
 * Change the inconsistent appearance in all browsers (opinionated).
 */
select {
  -moz-appearance: none;
  -webkit-appearance: none;
  background: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='4'%3E%3Cpath d='M4 0h6L7 4'/%3E%3C/svg%3E") no-repeat right center / 1em;
  border-radius: 0;
  padding-right: 1em;
}
/**
 * Change the inconsistent appearance in IE (opinionated).
 */
::-ms-expand {
  display: none;
}
/**
 * Correct the inconsistent appearance in IE (opinionated).
 */
:-ms-input-placeholder {
  color: rgba(0, 0, 0, 0.54);
}
/* Document
 * ========================================================================== */
/**
 * 1. Correct the line height in all browsers.
 * 2. Prevent adjustments of font size after orientation changes in
 *    IE on Windows Phone and in iOS.
 */
html {
  line-height: 1.15; /* 1 */
  -ms-text-size-adjust: 100%; /* 2 */
  -webkit-text-size-adjust: 100%; /* 2 */
}
/* Sections
 * ========================================================================== */
/* Grouping content
 * ========================================================================== */
/**
 * Remove the margin on nested lists in Chrome, Edge, IE, and Safari.
 */
dl dl,
dl ol,
dl ul,
ol dl,
ul dl {
  margin: 0;
}
/**
 * Remove the margin on nested lists in Edge 18- and IE.
 */
ol ol,
ol ul,
ul ol,
ul ul {
  margin: 0;
}
/**
 * 1. Add the correct box sizing in Firefox.
 * 2. Show the overflow in Edge 18- and IE.
 */
hr {
  overflow: visible; /* 2 */
}
/**
 * Add the correct display in IE.
 */
main {
  display: block;
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
pre {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/* Text-level semantics
 * ========================================================================== */
/**
 * Add the correct text decoration in Edge 18-, IE, and Safari.
 */
abbr[title] {
  text-decoration: underline;
  text-decoration: underline dotted;
}
/**
 * 1. Correct the inheritance and scaling of font size in all browsers.
 * 2. Correct the odd `em` font sizing in all browsers.
 */
code,
kbd,
samp {
  font-family: monospace, monospace; /* 1 */
  font-size: 1em; /* 2 */
}
/**
 * Add the correct font size in all browsers.
 */
small {
  font-size: 80%;
}
/* Embedded content
 * ========================================================================== */
/**
 * Hide the overflow in IE.
 */
svg:not(:root) {
  overflow: hidden;
}
/* Forms
 * ========================================================================== */
/**
 * 1. Show the overflow in IE.
 * 2. Remove the inheritance of text transform in Edge 18-, Firefox, and IE.
 */
button {
  overflow: visible; /* 1 */
  text-transform: none; /* 2 */
}
/**
 * Show the overflow in Edge 18- and IE.
 */
input {
  overflow: visible;
}
/**
 * 1. Correct the text wrapping in Edge 18- and IE.
 * 2. Correct the color inheritance from `fieldset` elements in IE.
 */
legend {
  box-sizing: border-box; /* 1 */
  color: inherit; /* 2 */
  display: table; /* 1 */
  max-width: 100%; /* 1 */
  white-space: normal; /* 1 */
}
/**
 * 1. Add the correct display in Edge 18- and IE.
 * 2. Add the correct vertical alignment in Chrome, Edge, and Firefox.
 */
progress {
  display: inline-block; /* 1 */
}
/**
 * 1. Remove the margin in Firefox and Safari.
 * 2. Remove the default vertical scrollbar in IE.
 */
textarea {
  overflow: auto; /* 2 */
}
/* Interactive
 * ========================================================================== */
/*
 * Add the correct display in Edge 18- and IE.
 */
details {
  display: block;
}
/*
 * Add the correct styles in Edge 18-, IE, and Safari.
 */
dialog {
  background-color: white;
  border: solid;
  color: black;
  display: block;
  height: fit-content;
  left: 0;
  margin: auto;
  padding: 1em;
  position: absolute;
  right: 0;
  width: fit-content;
}
dialog:not([open]) {
  display: none;
}
/*
 * Add the correct display in all browsers.
 */
summary {
  display: list-item;
}
/* Scripting
 * ========================================================================== */
/**
 * Add the correct display in IE.
 */
template {
  display: none;
}
/* User interaction
 * ========================================================================== */
/* 320px */
/* 425px */
/* 768px */
/* defult is 1080 */
/* 2560px */
:root {
  --page-width: 80rem;
  --p-width: 42em;
  --page-width-3-grid: 92.6875rem; /* 1483px grid on Figma */
  --page-width-4-grid: 128.75rem; /* 2060px grid on Figma*/
  --page-width-2k: 150rem; /* 2400px */
  --content-width: 38.75rem; /* 640px */
}
:root {
  --black: #000000;
  --white: #FFFFFF;
  --pink: #FF005C;
  --pink-2: #ff4fa0;
  --grey-1: #333333;
  --grey-2: #4f4f4f;
  --grey-3: #828282;
  --grey-7: #F9F9F9;

  --wsbc-orange: #ED8B00;
  --cosha-pink: #FF6674;
  --setsail-purple: #6B1AEF;
  --caltec-blue: #072385;
  
  --bg-color: #fffaf0;
  --footer-color: darksalmon;

  --pink-orange-gradient: linear-gradient(270deg, rgba(255, 122, 0, 0.15) 0%, rgba(255, 0, 102, 0.12) 100%);
  --pink-orange-gradient-dark: linear-gradient(270deg, rgba(255, 168, 0, 0.82) 0%, rgba(255, 0, 92, 0.51) 100%);

  /* @media (prefers-color-scheme: dark) {
    --background-regular: #333333;
    --background-bar: #505050;
    --text-title: white;
    --text-regular: white;
    --entry-title: #F1CC97;
  } */
}
html {
  scroll-behavior: smooth;
}
abbr {
  cursor: help;
}
body {
  font-family: 'Figtree', sans-serif;

  border: 6px solid transparent;
  border-image: linear-gradient(270deg, rgba(255, 122, 0, 0.15) 0%, rgba(255, 0, 102, 0.12) 100%);
  border-image: var(--pink-orange-gradient);
  border-image-slice: 1;
  transition: all 1s cubic-bezier(.165,.84,.44,1);
  
  min-height: 100vh;
  color: #333333;
  color: var(--grey-1);
  background-color: #fffaf0
}
@media (min-width: 160rem) {
body {
    border-width: 10px
}
  }
::selection {
  background-color: Linen;
}
a {
  text-decoration: none;
  color: unset
}
a:visited {
    color: unset; 
  }
a:focus {
    color: #FF005C;
    color: var(--pink);
  }
a[target="_blank"]:after {
  content: '\00a0↗';
  font-size: 0.8em;
  /* margin-left: 0.1em; */
}
p {
  font-family: 'Figtree', sans-serif;
  font-size: 1.1em;
  line-height: 1.2em;
}
.container {
  margin: 0 auto
}
@media (min-width: 67.5rem) {
.container {
    max-width: 80rem;
    max-width: var(--page-width)
}
  }
@media (min-width: 160rem) {
.container {
    max-width: 80rem;
    max-width: var(--page-width)
}

  }
.gradient-text,.work-type,h2 {
  /* https://cssgradient.io/blog/css-gradient-text/ */
  /* fallback for IE */
  color: #ff4fa0;
  color: var(--pink-2);

  background: linear-gradient(270deg, rgba(255, 168, 0, 0.82) 0%, rgba(255, 0, 92, 0.51) 100%);

  background: var(--pink-orange-gradient-dark);
  background-clip: text;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
/* header */
.header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  height: 9.375rem;

  font-weight: 400
}
.header .header-logo {
    display: flex;
    align-items: center;
  }
.header .header-avatar {
    transition: transform .8s ease-in-out;
  }
.header .header-avatar:hover {
    transform: rotate(360deg)
  }
@media (min-width: 67.5rem) {
.header {
    font-size: 1.1em;
    padding: 0 4em
}
  }
@media (min-width: 160rem) {
.header {
    font-size: 2em;
    max-width: 150rem;
    max-width: var(--page-width-2k);
    margin: 0 3em
}
  }
.header-avatar {
  margin: 1rem;
  width: 3.2rem;
  border-radius: 4px;

  /* @media (--desktop-2k) {
    margin-left: 3rem;
  } */
}
.header-title {
  display: none
}
@media (min-width: 67.5rem) {
.header-title {
    display: inherit
}
  }
@media (min-width: 160rem) {
.header-title {
    display: inherit
}
  }
.header-nav ul {
  list-style-type: none;

  display: flex;
  flex-direction: column
}
@media (min-width: 48rem) {
.header-nav ul {
    flex-direction: row
}
  }
@media (min-width: 160rem){
.header-nav ul {
    /* margin-right: 5.4375rem; */
}
  }
.header-nav li {
  display: inline;
  padding: 0 1.25em;
  transition: transform 250ms
}
.header-nav li:hover {
    color: #FF005C;
    color: var(--pink);
    transform: translateY(-4px);
  }
@media (min-width: 160rem) {
.header-nav li {
    font-size: 1.5em
}
  }
/* jumbotron */
.jumbotron {
  color: var(--text-regular)
}
.jumbotron h1 {
    font-size: 1.3em;
    font-weight: 500;
    margin: 0
  }
@media (min-width: 48rem) {
.jumbotron h1 {
      font-size: 2em
  }
    }
@media (min-width: 67.5rem) {
.jumbotron h1 {
      font-size: 3em
  }
    }
@media (min-width: 160rem) {
.jumbotron h1 {
      font-size: 4em
  }
    }
.jumbotron h1.tagline {
    line-height: 128%
  }
@media (min-width: 67.5rem) {
.jumbotron h1.tagline {
      font-size: 2em;
      max-width: 62.25rem
  }
    }
@media (min-width: 48rem) {
.jumbotron {
    margin-top: 2rem;
    margin-bottom: 6rem
}
  }
@media (min-width: 67.5rem) {
.jumbotron {
    margin-top: 2rem;
    margin-bottom: 6rem
}
  }
@media (min-width: 160rem) {
.jumbotron {
    margin-top: 10rem;
    margin-bottom: 14rem
}
  }
.jumbotron-highlight {
  color: #ff4fa0;
  color: var(--pink-2);
}
.jumbotron a:hover {
  text-decoration: underline;
}
.taglines {
  margin: 3em 0 4em;
  max-width: 42em;
  max-width: var(--p-width)
}
.taglines p {
    margin: 0.2em 0;
  }
.taglines a {
    color: #ff4fa0;
    color: var(--pink-2);
  }
@media (min-width: 160rem) {
.taglines {
    font-size: 2rem
}
  }
/* gallery */
.featured-cover {
  margin-bottom: 2em;
  object-fit: contain;
  max-width: 100%
}
@media (min-width: 67.5rem) {
.featured-cover {
    width: 70%;
    max-width: 65vw
}
  }
.featured-cover rtw {

  background-image: url(./return-to-work/thumbnail-rtw.png);
}
/* other works */
.works {
  color: var(--text-regular);
}
.work {
  margin-bottom: 10em;
  border-top: 1px solid var(--shadow);

  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: flex-start
}
.work:first-child {
    border: 0;
  }
@media (min-width: 67.5rem) {
.work {
    flex-direction: row;
    align-items: center
}
  }
.work-text {
  height: 100%;
  margin-right: 1em
}
@media (min-width: 67.5rem) {
.work-text {
    padding-left: 1em
}
  }
.work-type {
  letter-spacing: 0.03em;
  font-size: 0.9em;
  /* @media (--desktop) {
    font-size: 1.1em;
  }

  @media (--desktop-2k) {
    font-size: 1.5em;
  } */
}
h3.work-title {
  /* font-size: 1.2rem; */
  font-weight: 600
}
@media (min-width: 48rem) {
h3.work-title {
    /* font-size: 1.5rem; */
}
  }
@media (min-width: 67.5rem) {
h3.work-title {
    /* font-size: 2rem; */
}
  }
@media (min-width: 160rem) {
h3.work-title {
    font-size: 2rem
}
  }
/* work hover animation */
.work {
  transition: transform 250ms;
}
.work:hover {
  transform: translateY(-10px);
}
.work.rtw:hover {
    color: #ED8B00;
    color: var(--wsbc-orange);;
  }
.work.setsail:hover {
    color: #6B1AEF;
    color: var(--setsail-purple);;
  }
.work.caltec:hover {
    color: #072385;
    color: var(--caltec-blue);;
  }
.work.cosha:hover {
    color: #FF6674;
    color: var(--cosha-pink);;
  }
.work-title {
  margin: 0;
  font-size: 1.5em
}
@media (min-width: 48rem) {
.work-title {
    font-size: 2em
}
  }
.work-desc {
  margin-top: 2em
}
@media (min-width: 160rem) {
.work-desc {
    font-size: 2em
}
  }
.work-thumbnail {
  max-width: 80vw;
  height: auto;
}
.work-section {
  margin-bottom: 10em

}
@media (min-width: 48rem) {
.work-section {
    margin-bottom: 20em

}
  }
/* about */
.about {
  /*
  border-top: 3px solid transparent;
  border-image: var(--pink-orange-gradient);
  border-image-slice: 1;
  */

  padding-bottom: 5rem
  }
.about img {
    width: 100%;
    height: auto;
  }
.about h3, .about h4 {
    margin: 0;
  }
.about ul {
    padding: 0;
    list-style: none;
  }
.about li {
    margin: 1.05em 0;
    font-family: 'Figtree', sans-serif;
  }
.about h1 {
    font-weight: 600;
    font-size: 2rem
  }
@media (min-width: 48rem) {
.about h1 {
      font-size: 3rem
  }
    }
@media (min-width: 67.5rem) {
.about h1 {
      font-size: 5rem
  }
    }
@media (min-width: 160rem) {
.about h1 {
      font-size: 8rem
  }
    }
.about .about-my-name {
    display: inline;
    font-weight: 500;
    color: gainsboro
  }
@media (min-width: 48rem) {
.about .about-my-name {
      padding-left: 1.2rem;
      font-size: 1.4rem
  }
    }
@media (min-width: 67.5rem) {
.about .about-my-name {
      padding-left: 2.6rem;
      font-size: 1.6rem
  }
    }
@media (min-width: 160rem) {
.about .about-my-name {
      font-size: 3rem
  }
    }
.about #p-figure-1 {
    position: inherit
  }
@media (min-width: 67.5rem) {
.about #p-figure-1 {
      position: absolute;
      left: 53em;
      margin-top: -7.5em
  }
    }
.about #p-img-1 {
    max-width: 18.75em;
  }
.about #p-img-2 {
    padding: 3em;
  }
.about .about-content li {
      font-family: 'Figtree', sans-serif;
      font-size: 1.1em;
      line-height: 1.5em;
    }
@media (min-width: 67.5rem) {
.about .about-content h3 {
        font-size: 1.1em
    }
      }
@media (min-width: 67.5rem) {
.about .about-content h3 {
        font-size: 1.2em
    }
      }
@media (min-width: 160rem) {
.about .about-content h3 {
        font-size: 1.5em
    }
      }
@media (min-width: 67.5rem) {
.about .about-content h4 {
        font-size: 1em
    }
      }
@media (min-width: 67.5rem) {
.about .about-content h4 {
        font-size: 1.1em
    }
      }
@media (min-width: 160rem) {
.about .about-content h4 {
        font-size: 1.5em
    }
      }
@media (min-width: 67.5rem) {
.about .about-content {
      max-width: 92.6875rem;
      max-width: var(--page-width-3-grid)
  }
    }
.about p {
    margin: 0.5rem 0;
    line-height: 1.5em;
    padding-bottom: 1em
  }
@media (min-width: 67.5rem) {
.about p {
      font-size: 1.2rem
  }
    }
@media (min-width: 160rem) {
.about p {
      font-size: 1.5rem
  }
    }
.about span {
      white-space: nowrap;
    }
.skill-groups, .work-items, .education-items {
  display: flex;
  border-top: 1px solid #c4c4c4;
  padding-top: 48px;
  flex-wrap: wrap;
}
.skill-groups--item, .work-items--item {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding-right: 1.5em
}
@media (min-width: 48rem) {
.skill-groups--item, .work-items--item {
    width: 50%
}
  }
@media (min-width: 67.5rem) {
.skill-groups--item, .work-items--item {
    width: 25%
}
  }
.work-item {
  display: flex;
  flex-direction: column;
  width: 100%;
  margin-bottom: 2rem
}
@media (min-width: 48rem) {
.work-item {
    flex-direction: row
}
  }
.work-item--title, .work-item--desc, .education-column--title {
  width: 100%
}
@media (min-width: 48rem) {
.work-item--title, .work-item--desc, .education-column--title {
    width: 50%
}
  }
.education-items {
  display: flex;
  flex-direction: column;
}
.education-item {
  margin-bottom: 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
@media (min-width: 48rem) {
.education-item {
    flex-direction: row
}
  }
.education-item--column {
  width: 100%;
}
/* footer */
.footer {
  color: var(--text-regular);
  background-image: linear-gradient(270deg, rgba(255, 122, 0, 0.15) 0%, rgba(255, 0, 102, 0.12) 100%);
  background-image: var(--pink-orange-gradient);
  margin: 0
}
.footer p {
    font-size: 0.95em;
  }
.footer {
  max-width: 100%;
  padding: 2em 0 2em 0
}
@media (min-width: 48rem) {
.footer {
    padding: 7em 0 5em 0
}
  }
@media (min-width: 160rem) {
.footer {
    padding: 4.375em 0 10em 0
}
  }
.contact {
  display: flex;
  flex-direction: row;
  grid-gap: 10px;
  gap: 10px;
  color: #333333;
  color: var(--grey-1)
}
.contact a:visited {
    color: #ff4fa0;
    color: var(--pink-2);;
  }
.contact span {
    color: #828282;
    color: var(--grey-3);
  }
.footer-link {
  font-weight: 600;
  color: #ff4fa0;
  color: var(--pink-2);
}
.footer-container {
  margin: 0 1em
}
@media (min-width: 48rem) {
.footer-container {
    margin: 0 6.8em
}
  }
.footer a:hover {
  text-decoration: underline;
}
/* function */
/*
https://moderncss.dev/pure-css-smooth-scroll-back-to-top
How far of a scroll travel within <main> prior to the link appearing 
*/
.back-to-top-wrapper {
  /* uncomment to visualize "track" */
  /* outline: 1px solid red; */
  position: absolute;
  top: 100vh;
  right: 0.25rem;
  /* Optional, extends the final link into the */
  /* footer at the bottom of the page */
  /* Set to `0` to stop at the end of `main` */
  bottom: -5em;
  /* Required for best support in browsers not supporting `sticky` */
  width: 3em;
  /* Disable interaction with this element */
  pointer-events: none;
}
/* Smooth scrolling IF user doesn't have a preference due to motion sensitivities */
@media screen and (prefers-reduced-motion: no-preference) {
  html {
    scroll-behavior: smooth;
  }
}
.back-to-top-link {
  /* `fixed` is fallback when `sticky` not supported */
  position: fixed;
  /* preferred positioning, requires prefixing for most support, and not supported on Safari */
  /* @link https://caniuse.com/#search=position%3A%20sticky */
  position: sticky;
  /* reinstate clicks */
  pointer-events: all;
  /* achieves desired positioning within the viewport */
  /* relative to the top of the viewport once `sticky` takes over, or always if `fixed` fallback is used */
  top: calc(100vh - 5rem);

  display: inline-block;
  text-decoration: none;
  font-size: 2rem;
  line-height: 3rem;
  text-align: center;
  width: 3rem;
  height: 3rem;
  /* border-radius: 50%; */

  color: linear-gradient(270deg, rgba(255, 122, 0, 0.15) 0%, rgba(255, 0, 102, 0.12) 100%);

  color: var(--pink-orange-gradient);
  border: 3px solid;
  border-image: linear-gradient(270deg, rgba(255, 122, 0, 0.15) 0%, rgba(255, 0, 102, 0.12) 100%);
  border-image: var(--pink-orange-gradient);
  border-image-slice: 1;

  background-color: #FFFFFF;

  background-color: var(--white);

  /* emoji don't behave like regular fonts
     so this helped position it correctly */
  /* padding: 0.25rem; */
}
/* watch-face */
.face {
  position: absolute; 
  width: 320px;
  border: 10px solid white;
  margin: auto;
  z-index: 9999;
}
.carousel {
  background: url("http://www.sfu.ca/~chelll/iat235/watch-face/img/38mm.png");
  background-size: 320px 500px;
  position:relative;
  width:320px;

  margin:20px auto;
  z-index: 0;
}
.carousel > img {
  display:none;
  width:100%;
}
.carousel > input {
  position:absolute;
  left:-9999px;
}
.carousel > input:checked + label + img {
  display:block;
}
.carousel > label,
.carousel > input:checked ~ label ~ label ~ label ~ label {
  display:none;
}
.carousel > input:checked + label {
  display:block;
  left:0;
}
.carousel > input:checked ~ label ~ label ~ label {
  display:block;
  right:0;
}
.carousel > label {
  position:absolute;
  top:0;
  width:25%;
  height:100%;
  visibility:hidden;
}
.carousel > label:before {
  content:'';
  display:block;
  position:absolute;
  width:100%;
  height:100%;
  visibility:visible;
}
.carousel > label:after {
  display:block;
  position:absolute;
  top:50%;
  width:25px;
  height:25px;
  line-height:22px;
  margin:-15px 10px 0 10px;
  background-color:black;
  color:white;


  text-align:center;
  visibility:hidden;
  border:2px solid white;
  border-radius:20px;
  box-shadow:0 3px 4px black;
}
.carousel > label:hover:after {
  visibility:visible;
}
.carousel > input:checked + label:after {
  left:0;
  content:'\27f8';
}
.carousel > input:checked ~ label ~ label ~ label:after {
  right:0;
  content:'\27f9';
}
main {
  /* leave room for the "scroll track" */
  /* required to make sure the `absolute` positioning of */
  /* the anchor wrapper is indeed `relative` to this element vs. the body */
  position: relative;
  margin: 2rem 1rem
}
@media (min-width: 67.5rem) {
main {
    margin: 2rem 1rem;
    /* max-width: var(--page-width); */
    /* margin: auto; */
    padding: 0 6em
}

  }
@media (min-width: 160rem) {
main {
    max-width: 150rem;
    max-width: var(--page-width-2k);
    margin: auto;
    padding: 0 6em
}
  }
main h2 {
    font-size: 1.5rem;
    margin-top: 4em;

    line-height: 1.4em
  }
@media (min-width: 67.5rem) {
main h2 {
      font-size: 1.8rem
  }
    }
@media (min-width: 160rem) {
main h2 {
      font-size: 3rem
  }
    }
.page-header {
  color: var(--entry-title);
  font-family: 'Archivo', sans-serif;
  margin-bottom: 4.5em;
}
h1.title {
  font-size: 1.8em;
  margin-bottom: 0.1em;
}
h1.subtitle {
  font-size: 1.125em;
  font-weight: normal;
  margin: 0;
}
.page-body > h1, .page-body > h2, .page-body > h3, .page-body > h4, .page-body > h5, .page-body > h6 {
    color: var(--text-regular);
  }
.page-body h2 {
    margin-top: 2em;
    font-size: 1.5em;
  }
.page-body > :not(pre) {
    color: var(--text-regular);
  }
.page-body figure {
    margin: 4em 0;
  }
.page-body figcaption {
    color: #828282;
    color: var(--grey-3);
    text-align: center;
    font-style: italic;
  }
.page-body img {
    max-width: 100%;
    border-radius: 0.5em;
    border: 1px solid var(--shadow);
    display: block;
    margin: 0 auto;
  }
.page-body p {
    font-size: 1.1em;
    line-height: 1.6em;
    max-width: 42em;
    max-width: var(--p-width);
    font-family: 'Figtree', sans-serif;;
  }
.highlight {
  background-color: #ff4fa0;
  background-color: var(--pink-2);
}
.highlight pre {
  font-size: 0.8rem;  /* GitHub's choice */
  width: 100%;
  padding: 1em;
  overflow-x: auto;
  border-radius: 0.5em;
  border: 1px solid var(--shadow);
}
/** LIGHTBOX MARKUP **/
.lightbox {
  /* Default to hidden */
  display: none;

  /* Overlay entire screen */
  position: fixed;
  z-index: 999;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  
  /* A bit of padding around image */
  padding: 1em;

  /* Translucent background */
  background: rgba(0, 0, 0, 0.8);
}
/* Unhide the lightbox when it's the target */
.lightbox:target {
  display: block;
}
.lightbox span {
  /* Full width and height */
  display: block;
  width: 100%;
  height: 100%;

  /* Size and position background image */
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}
.iframe-container {
  text-align: center;
  overflow: hidden;
  padding-top: 56.25%;
  position: relative;
}
.iframe-container iframe {
  border: 0;
  height: 100%;
  left: 0;
  position: absolute;
  top: 0;
  width: 100%;
}