/* ROOT */

  :root {
    --teal: #458588;
    --beige: #a79a84;
    --grey: #686156;
    --dark: #4e4a44;
    --black: #282828;
    --red: #cd241c;
    --alt: #eeb24a;

    /* --white: #fbf7f1; */
    /* --black: #17120f;  [> 27221f <] */
    /* --grey: #5e4a3d;  [> b9a193 <] */

    /* --blue: #1e88e5; */
    /* --green: #22ac7b; */
    /* --yellow: #ffc107; */
    /* --orange: #ff5430; */
    /* --red: #d81b60; */
    /* --purple: #7c1d6f; */

    /* [> --gold: #d79921; <] */
    /* --gold: #ea9c00; */
    /* --ndblue: #0c2340; */
    /* --ndgold: #ae9142; */
    /* --nddarkgold: #8c7535; */

    --arxiv: #b31b1b;
    --arxiv-red: #b31b1b;
    --arxiv-grey: #b3aca5;

    --link: var(--black);
    --hover: var(--gold);

    --code-white: #ebdbb2;  /* 27221f */
    --code-black: #282828;  /* 27221f */

    /* --red: #ea6962; */
    /* --green: #a9b665; */
    /* --yellow: #d8a657; */
    /* --blue: #83a598; */
    /* --purple: #d3869b; */
    /* --orange: #e78a4e; */

    /* --lain: #dda9a1; */
  }

  @font-face {
    font-family: 'Berkeley Mono';
    src: url(fonts/BerkeleyMono-Regular.woff2) format(woff2),
        url(fonts/BerkeleyMono-Regular.woff)  format(woff);
  }
  @font-face {
    font-family: 'Berkeley Mono Ligatures';
    src: url(fonts/BerkeleyMonoLigatures-Regular.woff2) format(woff2),
        url(fonts/BerkeleyMonoLigatures-Regular.woff)  format(woff);
  }

  html {
    scroll-behavior: smooth;
    font-family: "Berkeley Mono", monospace;
    font-size: 16px;
  }

  span.displaynone { display: none; }

  .floatright { float: right; }

  .center {
    display: block;
    margin-left: auto;
    margin-right: auto;
  }

  .emph {
    display: inline;
    /* font-weight: 300; */
  }

/* BODY */

  body {
    padding: 0px;
    margin: 0px;

    color: var(--black);
    background-color: var(--teal);

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

    width: 100vw;
    min-height: 100vh;
  }

  body div.container {
    /* position: fixed; */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;

    width: auto;
    height: auto;

    padding: 24px;
    margin: 48px 32px;

    background-color: var(--beige);
    box-shadow: var(--black) 8px 16px;
    /* box-shadow: var(--black)   8px   8px, */
                /* var(--beige)  8px  17px inset, */
                /* var(--beige) -8px -17px inset, */
                /* var(--black)  9px  18px inset, */
                /* var(--black) -9px -18px inset; */
  }

  body div.head {
    display: flex;
    align-self: top;
    align-items: center;
    justify-content: center;

    padding: 0px;
    margin: 0px;

    color: var(--beige);
    background-color: var(--black);

    width: 100%;

    /* border-left: var(--grey) solid 1px; */
    /* border-right: var(--grey) solid 1px; */
  }

  body div.main {
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: left;
    flex-direction: column;

    width: auto;
    min-width: auto;
    max-width: auto;

    padding: 0px;
    margin: 0px;
  }

  /* div.main#teaching { */
    /* [> font-family: "Jacquard 12", serif; <] */
  /* } */
  /* div.main#teaching textarea { */
    /* padding: 8px; */
    /* border-radius: 4px; */
    /* color: var(--code-white); */
    /* background-color: var(--code-black); */
    /* font-family: "Berkeley Mono", monospace; */
  /* } */
  /* div.main#teaching textarea.input { */
    /* font-family: "Berkeley Mono", monospace; */
  /* } */
  /* div.main#teaching textarea.output { */
    /* font-family: "Berkeley Mono Ligatures", monospace; */
  /* } */

  /* div.main#teaching button#runCode { */
    /* border-radius: 4px; */
    /* text-align: center; */
    /* color: var(--code-white); */
    /* background-color: var(--code-black); */
    /* font-family: "Berkeley Mono", monospace; */
  /* } */

/* CONTENT */

  div.heading {
    padding: 0px;
    margin: 0px 0px 8px 0px;
    /* margin-top: -9px; */
    font-size: 32px;
    /* font-family: "Jacquard 12", serif; */
  }

  /* .content { margin-bottom: 10px; } */
  /* dialog { */
    /* display: flex; */
    /* align-self: top; */
    /* align-items: center; */
    /* justify-content: left; */
  /* } */

  .file, .file a, .file label {
    display: flex;
    align-self: center;
    align-items: center;
    justify-content: left;
    padding: 0px 4px;
    margin: 0px;
    width: 100%;
  }
  /* .file a, .file label { */
    /* padding: 0px 4px; */
  /* } */
  .file a:hover {
    color: var(--beige);
    background: var(--red);
  }
  .file#blank {
    /* -webkit-touch-callout: none; */
    /* -webkit-user-select: none; */
    /* -moz-user-select: none; */
    /* -ms-user-select: none; */
    /* user-select: none; */
    /* padding: 1.2em 0px 0px 0px; */
    padding: 0px;
    margin: 0px;
    /* margin: 0px; */
  }
  .file#directory {
    color: var(--grey);
  }
  .file p#directory {
    color: var(--grey);
    margin-right: -8px;
    white-space: nowrap;
  }

  .disclaimer {
    display: flex;
    align-self: center;
    align-items: top;
    /* justify-content: left; */
    flex-direction: row;

    padding: 0px 4px;
    margin: 0px;

    color: var(--beige);
    background-color: var(--dark);

    /* width: 100%; */
  }

  .pub {
    display: flex;
    align-self: center;
    align-items: top;
    justify-content: left;
    flex-direction: row;

    padding: 0px;
    margin: 0px;

    width: 100%;
  }
  .pub .car {
    margin: 0px 1em 0px 0px;
    width: 100%;
  }
  .pub .car .title {
    padding: 0px 8px 0px 4px;
    margin: 0px;

    color: var(--beige);
    background-color: var(--black);
  }
  .pub .car .authors {
    padding: 0px;
    margin: 0px;
  }
  .pub .cdr {
    display: flex;
    align-self: right;
    align-items: right;
    justify-content: left;
    flex-direction: column;
    margin: 0px 0px 0px 4px;
  }
  .pub .cdr .year {
    padding: 0px 4px;
    color: var(--beige);
    background-color: var(--black);
    white-space: nowrap;
  }
  .pub .cdr a { padding: 0px 4px; }
  .pub .cdr a:hover {
    color: var(--beige);
    background: var(--red);
  }

  .bullet {
    display: inline;
    padding: 0px 4px;
  }
  .bullet#me {
    /* color: var(--beige); */
    /* background-color: var(--black); */
  }

  .container input {
    display: none;
  }

  input#dialog-toggle:checked ~ dialog {
    display: block !important;
  }

  .selected, .selected a {
    color: var(--beige);
    background: var(--red);
  }

  :focus {
    outline: none !important;
  }
  a:hover, a:focus {
    color: var(--beige) !important;
    background: var(--red) !important;
  }

  /* HYPERLINK */
  a {
    padding: 0px;
    margin: 0px;
    color: var(--black);
    white-space: nowrap;
    text-decoration: none;
  }

  /* PAR */
  p {
    padding: 0px 4px;
    margin: 0px;
  }
  p.about {
    /* max-width: 1028px; */
    /* max-width: 768px; */
    max-width: 640px;
  }
  /* p.desc { */
    /* max-width: 600px; */
    /* font-size: 16px; */
    /* padding: 4px 0px; */
  /* } */

  /* SUPERSCRIPT */
  sup { font-size: 10px; }

  /* HORIZONTAL RULE */
  hr {
    margin: 0px;
    width: 100%;
    border-style: dotted none none;
    border-width: 6px;
    border-color: var(--black);
  }

/* MEDIA */

  object { }
  embed { }
  iframe { }

  div.headshot {
    position: absolute;
    display: block;
    top: 160px;
    /* margin-top: 16px; */
    width: 256px;
    height: 256px;
    /* min-width: 256px; */
    /* max-width: 256px; */
    border-radius: 0px;
    background-image: url("images/gonzalez-2024-gravity-fest_thumbnail.jpg");
  }

  img { }
  img.headshot {
    /* margin: 0px auto; */
    /* padding-top: 32px; */
    width: 256px;
    min-width: 256px;
    max-width: 256px;
    border-radius: 0px;
    /* image-rendering: pixelated; */
  }
  img.icon {
    position: relative;
    top: 2px;
    height: 1em;
    fill: var(--white);
  }
  /* img.icon:hover { fill: var(--hover); } */
  img.png {
    display: inline-block;
    image-rendering: crisp-edges;
    margin-left: auto;
    margin-right: auto;
  }

  #keyboards {
    display: flex;
    text-align: center;
    justify-content: space-between;
  }

/* TABLE */

  caption { font-size: 24px; }

  table {
    /* border: 1px solid var(--white); */
    box-sizing: border-box;
    border-top: 1px solid var(--black);
    border-bottom: 1px solid var(--black);
    border-collapse: collapse;
    margin: 0px;
    padding: 0px;
    font-size: 16px;
    /* font-family: "Kode Mono", sans-serif; */
  }
  table.single {
    width: 100%;
    min-width: 450px;
    max-width: 500px;
    margin: 10px;
  }
  table.double {
    width: 100%;
    max-width: 300px;
  }

  .row {
    display: flex;
    width: 100%;
    max-width: 600px;
    justify-content: space-evenly;
    align-items: top;
  }

  .column { }

  tr { }
  tr.rule { border-bottom: 1px dotted var(--black); }

  th, td { padding: 2px 4px; }

  th {
    text-align: left;
    font-weight: normal;
  }
  td { text-align: right; }

/* UPDATE */

  div.lastupdate {
    position: fixed;
    left: 0px;
    bottom: 0px;
    margin: 8px;
    padding: 8px;
    text-align: center;
    color: var(--black);
    /* font-size: 12px; */
  }

  div.date {
    white-space: nowrap;
    display: inline-block;
    margin: 0px;
    padding: 2px 6px;
    font-size: 18px;
  }