@import url('https://fonts.googleapis.com/css2?family=DM+Mono:ital,wght@0,300;0,400;0,500;1,300;1,400;1,500&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');

* {
  margin: 0;
}

body {
  background-color: #f2f2f2;
  display: grid;
  grid-template-columns: 450px auto;
}

code {
  font-family: DM Mono;
}

a {
  color: var(--theme-accent-dark);
  text-decoration: none;
  font-weight: 550;
  &:hover {
    text-decoration: underline;
  }
}

.highlighted {
  position: relative;

  > span {
    &::selection {
      background-color: var(--theme-accent-dark);
    }

    position: relative;
    white-space: nowrap;
    z-index: 2;
    margin-right: 0.25em;
  }

  --rotate-transform: rotate(-1deg);

  .highlight, .shadow {
    position: absolute;
    top: 0;
    bottom: .05em;
    left: -.1em;
    right: -.1em;
    transform: var(--rotate-transform);
  }

  .highlight {
    z-index: 0;
    background-color: var(--theme-accent);
  }

  .shadow {
    z-index: -1;
    background-color: var(--theme-accent-dark);
    transform: var(--rotate-transform) translate(.1em, .2em);
  }
}

:root {
  --theme-accent: #f0c248;
  --theme-accent-dark: #e39215;

  font-family: DM Sans;

  *::selection {
    background-color: var(--theme-accent);
  }

  #summary, #events {
    height: 100vh;
  }

  #summary {
    width: 350px;

    display: flex;
    justify-content: center;
    align-items: center;

    /* content */
    display: flex;
    flex-flow: column nowrap;
    align-items: center;

    padding: 0 50px ;

    div#portrait {
      /* circle */
      width: 300px;
      aspect-ratio: 1;

      border-radius: 50%;

      background: linear-gradient(var(--theme-accent), var(--theme-accent-dark));
      overflow: hidden;

      img {
        width: 100%;
        height: 100%;

        /* disable interaction */
        pointer-events: none;
        user-select: none;
      }
    }

    /* name and summary */
    .text {
      margin-top: 20px;

      ul.fields {
        margin-top: 8px;

        list-style: none;
        padding-left: 0;
      }
    }

    #links {
      display: flex;
      flex-flow: row wrap;
      gap: 15px;

      margin-top: 25px;

      i {
        color: var(--theme-accent-dark);
        font-size: 32px;
      }
    }
  }

  nav {
    > ul {
      /* remove standard ul styling */
      list-style-type: none;
      padding-left: 0;

      margin-top: 2em;
      font-size: 24px;

      display: flex;
      flex-flow: column nowrap;
      gap: 10px;
      text-align: center;

      > li > a {
        color: black;
        text-decoration: none;
      }

      > li:not(.selected) > a:hover {
        color: var(--theme-accent-dark);
      }
    }
  }

  #events {
    flex-grow: 1;

    max-width: 1050px;
    margin: auto;

    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

    /* margin-left: 100px; */

    .event-header {
      max-width: 600px;

      /* date */
      td:first-child {
        width: 100px;
        height: 100%;
        margin-right: 25px;
      }
    }
  }

  #projects {
    display: flex;
    flex-flow: column nowrap;
    justify-content: center;
    align-items: center;

    max-width: 800px;
  }
}