/***************************************************************************************************
 * THEMES
 */

[data-theme="light"] {
  --background: #f2f3f7;
  --shadow: #e2e3e7cc;
  --stripes: #eceef3;
  --surface: #ffffff;
  --primary: #02bf8a;
  --secondary: #df0237;
  --onBackground: #111212;
  --onSurface: #111212;

  --iconFilter: invert(0);

  --page: #ffffff;
  --pageShadow: #00000033;
  --pagePrimary: #000000;
  --pageSecondary: #4a535d;
  --pageSurface: #e8edf2;
  --pageAccent: #0f9d85;
}

[data-theme="dark"] {
  --background: #0c0e13;
  --shadow: #000000cc;
  --stripes: #111317;
  --surface: #1c1e23;
  --primary: #12cf9a;
  --secondary: #cf1247;
  --onBackground: #ffffff;
  --onSurface: #ffffff;

  --iconFilter: invert(1);

  --page: #0f1216;
  --pageShadow: #ffffff22;
  --pageSurface: #151a1e;
  --pagePrimary: #ffffff;
  --pageSecondary: #aab3bd;
  --pageAccent: #1acea2;
}

/***************************************************************************************************
 * HTML, BODY
 */
body {
  align-items: center;
  background-color: var(--background);
  display: flex;
  font-family: "Inter", sans-serif;
  font-weight: 400;
  font-style: normal;
  justify-content: center;
  margin: 0;
  padding: 0;
  position: relative;
}

/* STRIPES */
body::before {
  content: "";
  height: calc(100% - 64px);
  inset: 0;
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 64px;
  width: 100%;
  z-index: -9;

  /* PROPERTIES */
  --stripe-color: var(--stripes);
  --stripe-width: 2px;                    /* thickness of a line */
  --stripe-gap: 12px;                      /* gap between lines */
  --stripe-angle: -45deg;                  /* angle of the lines */
  --fade-end: 150%;                        /* height where it fully fades */

  /* STRIPES BACKGROUND */
  background-image: repeating-linear-gradient(
    var(--stripe-angle),
    var(--stripe-color) 0,
    var(--stripe-color) var(--stripe-width),
    var(--background) var(--stripe-width),
    var(--background) calc(var(--stripe-width) + var(--stripe-gap))
  );
}

/* FADE STRIPES */
body::after {
  content: "";
  background: linear-gradient(0deg, var(--background), #ffffff00);
  height: calc(100% - 64px);
  inset: 0;
  left: 0;
  pointer-events: none;
  position: fixed;
  top: 64px;
  width: 100%;
  z-index: -8;
}

* {
  font-variant-ligatures: none;
  font-feature-settings: "liga" 0, "clig" 0, "calt" 0;
}

.page {
  background: var(--page);
  box-shadow: var(--pageShadow) 0 5px 50px 0;
  box-sizing: border-box;
  color: var(--pagePrimary);
  display: flex;
  flex-direction: column;
  font-weight: 300;
  gap: 12px;
  height: 11in;
  padding: 0.5in;
  position: relative;
  margin: 128px 0 0;
  width: 8.5in;
}

/***************************************************************************************************
 * GENERAL
 */
h1 {
  border-bottom: 2px solid var(--pageAccent);
  color: var(--pagePrimary);
  display: inline;
  font-size: 2em;
  font-weight: 700;
  margin: 0;
  padding: 0;
  text-transform: uppercase;
}

h2 {
  color: var(--pageAccent);
  display: block;
  font-size: 1em;
  font-weight: 400;
  margin: 12px 0;
  padding: 0;
}

h3 {
  background: var(--pageSurface);
  border-left: 8px solid var(--pageAccent);
  border-bottom-right-radius: 8px;
  border-top-right-radius: 8px;
  box-sizing: border-box;
  color: var(--pageAccent);
  font-size: 0.8em;
  margin: 0;
  padding: 8px 16px;
  text-transform: uppercase;
  width: 100%;
}

h4 {
  color: var(--pageAccent);
  font-size: 0.85em;
  font-weight: 400;
  margin: 0;
  padding: 0;
}

ul {
  font-size: 0.65em;
  font-weight: 200;
  margin: 0;
  padding: 8px 0 0 16px;
}
li {
  padding: 2px 0;
}
li::marker {
  color: var(--pageAccent);
  font-size: 1.1em;
}


/***************************************************************************************************
 * NAV
 */
.nav {
  align-items: center;
  background: var(--surface);
  box-sizing: border-box;
  box-shadow: var(--shadow) 0 6px 2px 4px;
  display: flex;
  height: 64px;
  justify-content: space-between;
  padding: 0 32px;
  position: absolute;
  top: 0;
  width: 100%;
  z-index: 8;
}
.nav-content--left,
.nav-content--right {
  display: flex;
  gap: 16px;

  img {
    cursor: pointer;
    filter: var(--iconFilter);
    height: 32px;
    width: 32px;
  }
}

.nav a {
  color: var(--onSurface);
  cursor: pointer;
  font-weight: 700;
  text-decoration: none;
  text-transform: uppercase;
  transition: all 0.15s ease-in-out;

  &.active {
    color: var(--primary);
  }
  &:hover {
    color: var(--secondary);
  }
}

.nav-back {
  align-items: center;
  display: flex;
  gap: 8px;
  svg {
    height: 20px;
    width: 20px;
  }
  &:hover svg {
    fill: var(--secondary);
  }
}



/***************************************************************************************************
 * HEADER
 */

.header {
  background: var(--pageSurface);
  border-left: 8px solid var(--pageAccent);
  border-bottom-right-radius: 12px;
  border-top-right-radius: 12px;
  box-sizing: border-box;
  padding: 16px;
  width: 100%;
}
.header-contact {
  align-items: center;
  display: flex;
  gap: 8px;
  padding: 4px 0 0;
}
.header-contact span {
  color: var(--pageSecondary);
  font-size: 0.7em;
  font-weight: 300;
}
.header-contact span:not(:first-child)::before {
  color: var(--pageAccent);
  content: "\2022";
  margin: 0 10px 0 0;
}

/***************************************************************************************************
 * EMPLOYEMENT
 */
.employment-item {
  padding: 0 16px;
}
.employment-item-header {
  align-items: center;
  display: flex;
  font-size: 0.8em;
}
.employment-item-header-title {
  font-weight: 500;
}
.employment-item-header-title::after {
  color: var(--pageAccent);
  content: "\2022";
  margin: 0 10px;
}
.employment-item-header-subtitle {
  color: var(--pageAccent);
  font-weight: 400;
}
.employment-item-header-dates {
  color: var(--pageSecondary);
  flex: 1 1 auto;
  font-size: 0.85em;
  text-align: right;
}

/***************************************************************************************************
 * PROJECT
 */
.project-item {
  padding: 0 16px;
}

.skills {
  padding: 0 16px;
}
.skills span {
  font-size: 0.85em;
  font-weight: 200;
}
.skills span:not(:last-child)::after {
  color: var(--pageAccent);
  content: "\2022";
  margin: 0 10px 0 10px;
}






@media print {
  body::before, body::after { display: none; }
  .nav { display: none; }
  @page {
    margin: 0; /* Removes browser-generated header and footer */
  }
  .page {
    box-shadow: none;
    left: 0;
    margin: 0;
    position: absolute;
    print-color-adjust: exact;
    top: 0;
  }
}