/* Font Definitions */
@font-face {
  font-family: "AtkinsonNext";
  src: url("/fonts/AtkinsonHyperlegibleNext-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: "AtkinsonMono";
  src: url("/fonts/AtkinsonHyperlegibleMono-Regular.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

/* VMD brand colors */
:root {
  --vmd-teal-light: #57a6bf;
  --vmd-teal: #008ca8;
  --vmd-teal-dark: #045f77;
  --vmd-blue: #2d6ea7;
  --vmd-blue-grey: #56779b;
  --vmd-orange-accent: #ff7a24;
  --vmd-red-accent: #db1811;
  --vmd-grey-light: #c3c7c2;
  --vmd-grey-dark: #8f9395;
  --vmd-white-off: #dedfe0;
  --vmd-dotted-border: #8f9395;
  --vmd-dark-mode-background: rgb(48, 48, 48);
}

/* Pico Variable Overrides*/
:root {
  --pico-font-family-sans-serif: AtkinsonNext;
  --pico-font-family-monospace: AtkinsonMono;
}

h2 {
  --pico-h2-color: var(--vmd-blue);
}

/* Top down definitions from html. */

/* nav ========================= */
.headline-color {
  color: white;
  background: var(--vmd-blue);
}

.top-sticky {
  position: -webkit-sticky;
  position: sticky;
  top: 0;
  z-index: 999;
  align-items: center;
}

.left-edge {
  padding-left: 0.5rem;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  margin: 0;
}

.nav-h1 {
  margin-bottom: 0;
  margin-left: 0;
  --pico-font-size: 1.9rem;
  color: white;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

nav > ul > li {
  padding-top: 0 !important;
  padding-bottom: 0 !important;
}

.nav-email-anchor {
  /* --pico-border-radius: 0; */
  margin: 0.25rem;
  padding: 0.25rem;
  /* Text color */
  --text-decoration-color: yellow;
  --pico-color: white; /* no hover */
  --pico-primary-hover: white; /* color hover */
  /* underline */
  --pico-primary-hover-underline: orange; /* text color hover */
}

.cta-button {
  color: black;
  background: var(--vmd-white-off);
  border: 2px solid black;
  --pico-background-color: yellow;
  --pico-border-color: black;
  --pico-color: black;
}

/* header ========================= */
.header-background {
  background: var(--pico-card-background-color);
}

.header-bottom {
  margin-bottom: 0;
  padding-bottom: 0;
  /* border-bottom: 2px dotted var(--vmd-dotted-border); */
}

/* headshot ========================= */
.headshot-bottom {
  margin-bottom: 0.75rem;
}

.headshot {
  aspect-ratio: attr(width) / attr(height);
  padding-left: 0;
  margin-bottom: 0.3rem;
}

/* asciidoc table css */
.tableblock {
  margin-bottom: 0;
}

.halign-left {
  text-align: left;
}

.valign-top {
  vertical-align: top;
}

/* ? */
hgroup > :not(:first-child):last-child {
  --pico-color: unset;
  --pico-font-weight: unset;
  font-size: 1rem;
}

/* ------------------------------------------------------------------------ */

/* Light/Dark mode header. */
@media only screen and (prefers-color-scheme: light) {
  :root:not([data-theme]) {
    background: var(--vmd-grey-light);
  }
}

@media only screen and (prefers-color-scheme: dark) {
  :root:not([data-theme]) {
    background: var(--vmd-dark-mode-background);
  }
}

.cta-article {
  align-items: center;
  padding-bottom: 0;
  padding-left: 1rem;
  padding-top: 1rem;
}

.dotted {
  border: 2px dotted var(--vmd-dotted-border);
}

footer {
  justify-content: left;
  align-items: center;
  display: flex;
}

.monospace {
  font-family: AtkinsonMono;
}

.center {
  align-items: center;
  justify-content: center;
  display: flex;
}

img {
  aspect-ratio: attr(width) / attr(height);
  width: 100%;
}

/* Larger than the largest breakpoint */
@media (min-width: 1536px) {
  .ruckus {
    width: 50%;
  }

  .headshot {
    width: 70%;
  }

  section {
    width: 70%;
  }

  header {
    width: 50%;
  }
}

/* Smaller than this. */
@media (max-width: 1536px) {
  .headshot {
    width: 75%;
  }

  section {
    width: 70%;
  }
}

/* Smaller than this. */
@media (max-width: 1280px) {
  .ruckus {
    width: 50%;
  }

  .headshot {
    width: 75%;
  }

  section {
    width: 70%;
  }
}

/* Smaller than this. */
@media (max-width: 1024px) {
  .nav-h1 {
    font-size: 1.5rem;
  }

  .headshot {
    width: 100%;
  }

  section {
    width: 100%;
  }
}

/* Smaller than this. */
@media (max-width: 768px) {
  .nav-h1 {
    font-size: 1.5rem;
  }
}

/* Smaller than this. */
@media (max-width: 576px) {
  .nav-h1 {
    font-size: 1.5rem;
  }
}