/* Box sizing rules */
*,
*::before,
*::after {
  box-sizing: border-box; }

/* Remove default padding */
ul[class],
ol[class] {
  padding: 0; }

/* Remove default margin */
body,
h1,
h2,
h3,
h4,
p,
ul[class],
ol[class],
li,
figure,
figcaption,
blockquote,
dl,
dd {
  margin: 0; }

/* Set core body defaults */
body {
  min-height: 100vh;
  scroll-behavior: smooth;
  text-rendering: optimizeSpeed;
  line-height: 1.5; }

/* Remove list styles on ul, ol elements with a class attribute */
ul[class],
ol[class] {
  list-style: none; }

/* A elements that don't have a class get default styles */
a:not([class]) {
  text-decoration-skip-ink: auto; }

/* Make images easier to work with */
img {
  max-width: 100%;
  display: block; }

/* Natural flow and rhythm in articles by default */
article > * + * {
  margin-top: 1em; }

/* Inherit fonts for inputs and buttons */
input,
button,
textarea,
select {
  font: inherit; }

/* Remove all animations and transitions for people that prefer not to see them */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important; } }

body {
  font-size: 16px;
  margin: 32px;
  font-family: neuzeit-grotesk,sans-serif;
  font-weight: 400;
  font-style: normal; }

h2 {
  font-family: neuzeit-grotesk,sans-serif;
  font-weight: 400;
  font-style: normal;
  font-size: 1.5rem;
  line-height: 2rem;
  margin-top: 0rem;
  padding-top: 0.442rem;
  padding-bottom: 0.558rem;
  margin-bottom: -1rem; }

p {
  font-size: 1rem;
  line-height: 2rem;
  margin-top: 0rem;
  padding-top: 0.628rem;
  padding-bottom: 0.372rem;
  margin-bottom: 1rem; }

#intro a {
  color: #3F4EE8; }

body {
  margin: 4% 4% 0; }

p {
  margin: 0; }

#intro {
  margin-bottom: 2rem; }
  #intro a[data-topic-link] {
    text-decoration: none;
    color: black;
    padding: 2px 4px;
    border-radius: 4px; }
    #intro a[data-topic-link]:nth-of-type(1) {
      background-color: #029fcf; }
    #intro a[data-topic-link]:nth-of-type(2) {
      background-color: #03c484; }
    #intro a[data-topic-link]:nth-of-type(3) {
      background-color: #aad963; }
    #intro a[data-topic-link]:nth-of-type(4) {
      background-color: #fbbf46; }
    #intro a[data-topic-link]:nth-of-type(5) {
      background-color: #f06c33; }
    #intro a[data-topic-link]:nth-of-type(6) {
      background-color: #ed0245; }
    #intro a[data-topic-link]:nth-of-type(7) {
      background-color: #c502ab; }

#work {
  display: flex; }
  #work #timelines {
    flex-basis: 10%;
    position: sticky;
    top: 20px;
    max-height: calc(100vh - 40px);
    display: flex; }
    #work #timelines .timelineTopic {
      width: 100%; }
      #work #timelines .timelineTopic:nth-of-type(1) {
        background-color: #029fcf; }
      #work #timelines .timelineTopic:nth-of-type(2) {
        background-color: #03c484; }
      #work #timelines .timelineTopic:nth-of-type(3) {
        background-color: #aad963; }
      #work #timelines .timelineTopic:nth-of-type(4) {
        background-color: #fbbf46; }
      #work #timelines .timelineTopic:nth-of-type(5) {
        background-color: #f06c33; }
      #work #timelines .timelineTopic:nth-of-type(6) {
        background-color: #ed0245; }
      #work #timelines .timelineTopic:nth-of-type(7) {
        background-color: #c502ab; }
      #work #timelines .timelineTopic .timelineLabel {
        position: absolute;
        text-transform: uppercase;
        z-index: 99999;
        color: white;
        transform-origin: left bottom;
        transform: rotate(90deg) translate(-0.9vw, 0.08vw);
        white-space: nowrap;
        font-size: 1vw;
        line-height: 1.5vw; }
    #work #timelines .timelineRange {
      position: absolute;
      width: 100%;
      border-top: 1px dashed black;
      border-bottom: 1px dashed black;
      background-color: rgba(255, 255, 255, 0.4); }
      #work #timelines .timelineRange .topic {
        background-color: rgba(0, 0, 0, 0.7);
        width: calc(14.285714286% - 4px);
        height: calc(100% - 4px);
        display: inline-block;
        position: absolute;
        margin: 2px;
        border-radius: 2px; }
        @media (max-width: 920px) {
          #work #timelines .timelineRange .topic {
            width: 14.285714286%;
            height: 100%;
            margin: 0;
            border-radius: 0; } }
        #work #timelines .timelineRange .topic.surveillance {
          left: 0%; }
        #work #timelines .timelineRange .topic.abuse {
          left: 14.285714286%; }
        #work #timelines .timelineRange .topic.social-media {
          left: 28.571428572%; }
        #work #timelines .timelineRange .topic.loss {
          left: 42.857142858%; }
        #work #timelines .timelineRange .topic.feminism {
          left: 57.142857144%; }
        #work #timelines .timelineRange .topic.ai {
          left: 71.42857143%; }
        #work #timelines .timelineRange .topic.politics {
          left: 85.714285716%; }
  #work #bracecords {
    flex-basis: 35%; }
  #work #projects {
    position: relative;
    flex-basis: 55%; }
    #work #projects article {
      margin: 1rem 2rem 1rem 0.5rem; }