/* DrowsyGuard documentation theme.
 *
 * Material for MkDocs ships a good default; this file changes three things
 * about it and then gets out of the way.
 *
 *   1. Colour.  Material only accepts its own named primaries (teal, indigo,
 *      blue, ...), so a specific one has to go through `primary: custom` in
 *      mkdocs.yml plus the token overrides in section 1.
 *   2. Width.   Material centres every page in a 61rem column, which leaves
 *      most of a laptop screen empty and forces the wide reference tables -
 *      the GPIO map, the CLI flags, the /state keys - to wrap or scroll.
 *      Section 2 removes that cap and makes the page full-bleed instead.
 *   3. Surface. Sections 3-8 are ordinary polish: type scale, tables that read
 *      as tables, code blocks with real corners, cards that respond to a
 *      pointer.
 *
 * Everything here is written against Material's public class names. Nothing
 * overrides a `.md-*` element's box model where a token would do, because the
 * tokens survive a theme upgrade and the layout hacks are the part that breaks.
 */

/* ==========================================================================
   1. Tokens
   ========================================================================== */

[data-md-color-primary=custom] {
  --md-primary-fg-color:        #1e90ff;   /* dodgerblue */
  --md-primary-fg-color--light: #5aabff;
  --md-primary-fg-color--dark:  #0b6ecb;

  /* Text drawn *on* the primary colour - the header title and icons. */
  --md-primary-bg-color:        #ffffff;
  --md-primary-bg-color--light: #ffffffb3;
}

/* The project mark remains recognisable in the compact header: the sleepy face
 * and ZZZ are the product cue, while the cyan corners echo face tracking. */
.md-header__button.md-logo img,
.md-nav__button.md-logo img {
  width: 1.75rem;
  height: 1.75rem;
  border-radius: 0.42rem;
  box-shadow: 0 0.16rem 0.45rem rgb(3 20 46 / 24%);
}

/* Body links.
 *
 * Material derives these from the primary colour, and dodgerblue on white is
 * only 3.2:1 - fine for the large header title, short of the 4.5:1 that body
 * text needs. These are the same hue darkened (light) and lightened (dark)
 * until they clear it: 5.1:1 on white, 5.9:1 on the slate background.
 */
[data-md-color-scheme=default] {
  --md-typeset-a-color: #0b6ecb;

  /* A hair of blue in the code background so a fenced block reads as a
   * surface rather than as a gap in the page. */
  --md-code-bg-color: hsl(214deg 38% 97%);
}

/* Material's stock slate sits at 21% lightness, which is grey rather than dark
 * and washes the dodgerblue out. Deepening the page and *lifting* the code
 * surface above it inverts the default relationship on purpose: on this site
 * the fenced blocks are the thing you are looking for.
 */
[data-md-color-scheme=slate] {
  --md-hue: 220;
  --md-typeset-a-color: #4da3ff;

  --md-default-bg-color:           hsl(220deg 20% 10%);
  --md-default-bg-color--light:    hsl(220deg 20% 10% / 54%);
  --md-default-bg-color--lighter:  hsl(220deg 20% 10% / 26%);
  --md-default-bg-color--lightest: hsl(220deg 20% 10% / 7%);

  --md-code-bg-color:   hsl(220deg 18% 14%);
  --md-footer-bg-color: hsl(220deg 24% 7%);
  --md-footer-bg-color--dark: hsl(220deg 26% 5%);
}

/* Project tokens.
 *
 * Declared on `body`, not `:root`, and that is load-bearing: Material puts
 * `data-md-color-scheme` on the body element, so `--md-default-bg-color` and
 * friends only have their scheme-specific values there. A custom property is
 * substituted where it is *declared*, so the same block on `:root` would derive
 * every surface below from the light palette and then inherit those light
 * values into the dark page - white table stripes on a near-black background.
 */
body {
  /* Page gutter. Grows with the viewport instead of stepping at a breakpoint,
   * because the whole point of section 2 is that there is no fixed column. */
  --dg-gutter: clamp(0.8rem, 3vw, 4rem);

  --dg-radius:    0.55rem;
  --dg-radius-lg: 0.9rem;
  --dg-radius-pill: 999px;

  --dg-border:      color-mix(in srgb, var(--md-default-fg-color) 13%, transparent);
  --dg-border-soft: color-mix(in srgb, var(--md-default-fg-color)  7%, transparent);
  --dg-surface:     color-mix(in srgb, var(--md-default-fg-color) 2.5%, var(--md-default-bg-color));
  --dg-surface-raised: color-mix(in srgb, var(--md-default-fg-color) 5%, var(--md-default-bg-color));
  --dg-tint:        color-mix(in srgb, var(--md-primary-fg-color) 10%, transparent);
  --dg-tint-soft:   color-mix(in srgb, var(--md-primary-fg-color) 5%, transparent);

  --dg-shadow:      0 0.1rem 0.2rem rgb(4 24 48 / 4%), 0 0.5rem 1.4rem rgb(4 24 48 / 7%);
  --dg-shadow-lift: 0 0.2rem 0.4rem rgb(4 24 48 / 7%), 0 0.9rem 2rem rgb(4 24 48 / 12%);

  /* Line length. `none` is the full-width behaviour this site asks for; set it
   * to a value such as 80ch here to cap prose without giving up the wide
   * tables, code blocks and figures, which ignore it. */
  --dg-measure: none;
}

[data-md-color-scheme=slate] {
  --dg-shadow:      0 0.1rem 0.2rem rgb(0 0 0 / 30%), 0 0.5rem 1.4rem rgb(0 0 0 / 34%);
  --dg-shadow-lift: 0 0.2rem 0.4rem rgb(0 0 0 / 36%), 0 0.9rem 2rem rgb(0 0 0 / 46%);
}

/* ==========================================================================
   2. Full-bleed layout
   ========================================================================== */

/* `.md-grid` is the 61rem cap, and it is on all five bars at once - header,
 * tabs, main, footer nav and footer meta. Removing it there rather than on
 * `.md-content` keeps every one of them aligned to the same edge. */
.md-grid {
  max-width: none;
}

/* The cap was also the horizontal padding: with `max-width: none` the bars run
 * to the window edge, so the gutter has to be put back explicitly. */
.md-header__inner,
.md-tabs > .md-grid,
.md-footer__inner,
.md-footer-meta__inner {
  padding-inline: var(--dg-gutter);
}

/* Below 60em there is no sidebar and `.md-content__inner` already carries its
 * own margin, so a gutter here would only double it up. */
@media screen and (min-width: 60em) {
  .md-main__inner {
    padding-inline: var(--dg-gutter);
  }
}

/* Wider screen, wider navigation: at full bleed the sidebars are no longer
 * competing with the content for room, and the nav labels on this site are
 * long ("Toolchain and firmware install"). */
@media screen and (min-width: 76.25em) {
  .md-sidebar {
    width: 14.5rem;
  }

  .md-sidebar--secondary {
    width: 13.5rem;
  }

  /* Material's own margin is `[dir=ltr] .md-content__inner`, so a bare class
   * selector here would lose to it. */
  .md-content > .md-content__inner {
    margin-inline: 1.6rem;
  }
}

@media screen and (min-width: 100em) {
  .md-sidebar {
    width: 16.5rem;
  }

  .md-sidebar--secondary {
    width: 15rem;
  }

  .md-content > .md-content__inner {
    margin-inline: 2.2rem;
  }
}

/* Opt-in measure. Only the prose honours it; tables, figures, code, admonitions
 * and card grids stay full width, which is the reason for the layout change. */
.md-typeset > p,
.md-typeset > ul,
.md-typeset > ol,
.md-typeset > dl,
.md-typeset > blockquote {
  max-width: var(--dg-measure);
}

/* Both the header and the tabs bar are sticky, so an anchor that lands at
 * scroll position 0 lands underneath them. */
.md-typeset :target {
  scroll-margin-top: 5.4rem;
}

/* ==========================================================================
   3. Type
   ========================================================================== */

.md-typeset {
  font-size: 0.82rem;
  line-height: 1.72;
}

.md-typeset p,
.md-typeset li {
  text-wrap: pretty;
}

.md-typeset h1,
.md-typeset h2,
.md-typeset h3 {
  color: var(--md-default-fg-color);
  text-wrap: balance;
}

.md-typeset h1 {
  margin-bottom: 0.8rem;
  font-size: 2rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.15;
}

/* A hairline above every H2. On a page this wide the eye needs a horizontal
 * cue to find the next section; whitespace alone stops working once the column
 * is 1500px across. */
.md-typeset > h2 {
  margin-top: 2.4rem;
  padding-top: 1.1rem;
  border-top: 1px solid var(--dg-border-soft);
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: -0.015em;
}

/* ...except immediately under the H1, where there is nothing to separate. */
.md-typeset > h1 + h2 {
  border-top: 0;
  padding-top: 0;
  margin-top: 1.6rem;
}

.md-typeset h3 {
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.md-typeset h4 {
  font-weight: 700;
}

.md-typeset a {
  text-underline-offset: 0.15em;
  transition: color 125ms;
}

.md-typeset strong {
  font-weight: 700;
}

.md-typeset hr {
  border-bottom-color: var(--dg-border-soft);
}

/* ==========================================================================
   4. Header, tabs, search
   ========================================================================== */

/* Translucent only where the browser can blur what is behind it; without the
 * blur a semi-transparent header just shows text sliding under text. */
@supports (backdrop-filter: blur(0.5rem)) or (-webkit-backdrop-filter: blur(0.5rem)) {
  .md-header {
    background-color: color-mix(in srgb, var(--md-primary-fg-color) 88%, transparent);
    -webkit-backdrop-filter: saturate(180%) blur(0.6rem);
    backdrop-filter: saturate(180%) blur(0.6rem);
  }
}

.md-header__title {
  font-weight: 700;
  letter-spacing: -0.01em;
}

.md-header__topic:first-child {
  font-weight: 700;
}

.md-tabs__link {
  opacity: 0.72;
  font-weight: 500;
  transition: opacity 125ms;
}

.md-tabs__link:hover,
.md-tabs__link--active {
  opacity: 1;
}

/* Material marks the active tab by weight alone, which is nearly invisible on
 * a coloured bar. An underline is the cue people look for. */
.md-tabs__item--active .md-tabs__link {
  position: relative;
  font-weight: 700;
}

.md-tabs__item--active .md-tabs__link::after {
  content: "";
  position: absolute;
  inset-inline: 0;
  bottom: -0.5rem;
  height: 2px;
  border-radius: 2px;
  background-color: currentcolor;
}

.md-search__form {
  border-radius: var(--dg-radius-pill);
}

[data-md-toggle=search]:checked ~ .md-header .md-search__form {
  border-radius: var(--dg-radius) var(--dg-radius) 0 0;
}

.md-search__output {
  border-radius: 0 0 var(--dg-radius) var(--dg-radius);
}

/* ==========================================================================
   5. Navigation
   ========================================================================== */

.md-nav {
  font-size: 0.7rem;
}

.md-nav__title {
  color: var(--md-default-fg-color--light);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* The drawer title on mobile is a header bar, not a section label. */
.md-nav--primary > .md-nav__title {
  text-transform: none;
  letter-spacing: normal;
}

.md-nav__link {
  border-radius: var(--dg-radius);
  padding: 0.22rem 0.45rem;
  transition: background-color 125ms, color 125ms;
}

a.md-nav__link:hover {
  background-color: var(--dg-border-soft);
}

.md-nav__link--active,
.md-nav__link--active:hover {
  background-color: var(--dg-tint);
  font-weight: 700;
}

/* Section headings inside the sidebar are labels, not targets. */
.md-nav__item--section > .md-nav__link:hover {
  background-color: transparent;
}

.md-nav__item--section > .md-nav__link {
  color: var(--md-default-fg-color--light);
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
}

/* A rail down the table of contents, so a long page's headings read as one
 * list rather than as scattered lines of text. */
@media screen and (min-width: 60em) {
  .md-nav--secondary > .md-nav__list {
    padding-left: 0.7rem;
    border-left: 1px solid var(--dg-border-soft);
  }
}

/* ==========================================================================
   6. Content surfaces
   ========================================================================== */

/* --- Tables -------------------------------------------------------------
 *
 * Material makes a content table `inline-block`, so it is only ever as wide as
 * its widest row. On a 61rem column that reads fine; at full bleed it leaves a
 * three-column table stranded against the left edge of a very wide page.
 *
 * `min-width`, not `width`, and the `display` is deliberately left alone:
 * `inline-block` plus Material's `overflow: auto` is what lets a table too wide
 * for a phone scroll *inside itself*. Switching it to `display: table` makes it
 * push the whole page sideways instead, and then every paragraph on the page
 * runs off the right edge of the screen.
 *
 * `.md-typeset__table` is the wrapper Material adds around the table in the
 * browser; making it a block is the other half of filling the width.
 */
.md-typeset__table {
  display: block;
}

.md-typeset table:not([class]) {
  min-width: 100%;
  border: 1px solid var(--dg-border);
  border-radius: var(--dg-radius);
  box-shadow: none;
  font-size: 0.74rem;
}

.md-typeset table:not([class]) th {
  background-color: var(--dg-surface-raised);
  color: var(--md-default-fg-color);
  font-weight: 700;
  letter-spacing: 0.01em;
}

.md-typeset table:not([class]) th,
.md-typeset table:not([class]) td {
  padding: 0.6rem 0.9rem;
  border-top: 1px solid var(--dg-border-soft);
  vertical-align: top;
}

.md-typeset table:not([class]) tr:first-child th {
  border-top: 0;
}

.md-typeset table:not([class]) tbody tr:nth-child(even) {
  background-color: var(--dg-surface);
}

.md-typeset table:not([class]) tbody tr:hover {
  background-color: var(--dg-tint-soft);
}

/* The header and the zebra stripes are filled cells, so they square off the
 * table's rounded corners unless the corner cells are rounded to match. */
.md-typeset table:not([class]) thead tr:first-child th:first-child {
  border-top-left-radius: calc(var(--dg-radius) - 1px);
}

.md-typeset table:not([class]) thead tr:first-child th:last-child {
  border-top-right-radius: calc(var(--dg-radius) - 1px);
}

.md-typeset table:not([class]) tbody tr:last-child td:first-child {
  border-bottom-left-radius: calc(var(--dg-radius) - 1px);
}

.md-typeset table:not([class]) tbody tr:last-child td:last-child {
  border-bottom-right-radius: calc(var(--dg-radius) - 1px);
}

.md-typeset table:not([class]) tbody tr {
  transition: background-color 125ms;
}

/* --- Code ---------------------------------------------------------------- */

/* `div.highlight`, not `.highlight`: pymdownx.inlinehilite puts the same class
 * on inline `<code>`, which must not grow a border and a shadow. */
.md-typeset div.highlight {
  margin: 1em 0;
  border: 1px solid var(--dg-border-soft);
  border-radius: var(--dg-radius);
  overflow: hidden;
}

.md-typeset div.highlight > pre {
  margin: 0;
}

.md-typeset div.highlight > pre > code {
  border-radius: 0;
}

.md-typeset pre > code {
  padding: 0.85rem 1.1rem;
}

/* Material gives inline code no vertical padding at all, which reads as a
 * colour change rather than as a chip. There is room for a little here because
 * the body line-height above is 1.72. */
.md-typeset code {
  border-radius: 0.25rem;
  padding: 0.1em 0.38em;
}

.md-clipboard {
  border-radius: 0.3rem;
}

/* --- Admonitions and details --------------------------------------------- */

.md-typeset .admonition,
.md-typeset details {
  border-width: 0 0 0 0.22rem;
  border-radius: var(--dg-radius);
  box-shadow: var(--dg-shadow);
  font-size: 0.76rem;
  overflow: hidden;
}

.md-typeset .admonition-title,
.md-typeset summary {
  border-radius: 0;
  padding-block: 0.5rem;
  font-weight: 700;
}

/* --- Blockquotes --------------------------------------------------------- */

.md-typeset blockquote {
  border-left-width: 0.22rem;
  border-radius: 0 var(--dg-radius) var(--dg-radius) 0;
  padding: 0.5rem 1rem;
  background-color: var(--dg-surface);
  color: var(--md-default-fg-color--light);
}

/* --- Card grids ---------------------------------------------------------- */

/* Material's minimum is 16rem, and rem is the wrong unit for it here: the theme
 * scales the root font size with the viewport, so a rem minimum grows at the
 * same rate as the page and the column count never changes. In px the grid
 * actually earns the extra width - two cards on a laptop, four on a monitor. */
.md-typeset .grid {
  grid-gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr));
}

.md-typeset .grid.cards > ol > li,
.md-typeset .grid.cards > ul > li,
.md-typeset .grid > .card {
  padding: 1.15rem 1.25rem;
  border: 1px solid var(--dg-border-soft);
  border-radius: var(--dg-radius-lg);
  background-color: var(--dg-surface);
  transition: transform 180ms, border-color 180ms, box-shadow 180ms;
}

.md-typeset .grid.cards > ol > li:hover,
.md-typeset .grid.cards > ul > li:hover,
.md-typeset .grid > .card:hover {
  transform: translateY(-2px);
  border-color: color-mix(in srgb, var(--md-primary-fg-color) 45%, transparent);
  box-shadow: var(--dg-shadow-lift);
}

/* The `:material-...:` shortcode that opens a card renders inline, ahead of the
 * title. Promoting it to its own line turns the list item into a card with an
 * icon; leaving it inline just makes the title start in a strange place. */
.md-typeset .grid.cards > ol > li > p:first-child > .twemoji:first-child,
.md-typeset .grid.cards > ul > li > p:first-child > .twemoji:first-child {
  display: flex;
  justify-content: flex-start;
  width: 1.85rem;
  height: 1.85rem;
  margin-bottom: 0.5rem;
  color: var(--md-primary-fg-color);
}

.md-typeset .grid.cards > ol > li > p:first-child,
.md-typeset .grid.cards > ul > li > p:first-child {
  margin-top: 0;
  font-size: 0.92rem;
}

.md-typeset .grid.cards > ol > li > p:last-child,
.md-typeset .grid.cards > ul > li > p:last-child {
  margin-bottom: 0;
}

/* --- Buttons ------------------------------------------------------------- */

.md-typeset .md-button {
  border-radius: var(--dg-radius-pill);
  padding: 0.5em 1.4em;
  font-weight: 600;
  transition: transform 150ms, background-color 125ms, border-color 125ms, box-shadow 150ms;
}

.md-typeset .md-button--primary {
  border-color: transparent;
  box-shadow: 0 0.25rem 0.8rem color-mix(in srgb, var(--md-primary-fg-color) 32%, transparent);
}

.md-typeset .md-button:hover {
  transform: translateY(-1px);
}

/* --- Odds and ends ------------------------------------------------------- */

.md-typeset kbd {
  border-radius: 0.3rem;
}

.md-typeset img,
.md-typeset video {
  border-radius: var(--dg-radius);
}

/* Tutorial figures are line drawings on white; on the dark scheme they need a
 * ground of their own or they float. */
[data-md-color-scheme=slate] .md-typeset img {
  background-color: hsl(0deg 0% 100% / 4%);
}

.md-typeset .tabbed-set > label {
  font-weight: 600;
}

.md-top {
  border-radius: var(--dg-radius-pill);
  box-shadow: var(--dg-shadow-lift);
}

/* ==========================================================================
   7. Home page and research proposal
   ========================================================================== */

.dg-hero {
  display: grid;
  /* Both tracks stay proportional - an absolute cap on the figure column would
   * starve the text one, because Material sets the root font size to 125% and
   * every rem here is 20px, not 16. The figure is capped on `.dg-hero__visual`
   * instead, where overshooting costs whitespace rather than the headline. */
  grid-template-columns: minmax(0, 1.15fr) minmax(min(100%, 16rem), 0.85fr);
  gap: clamp(1.5rem, 4vw, 3.5rem);
  align-items: center;
  margin: 0 0 2.5rem;
  padding: clamp(1.25rem, 3vw, 3rem);
  overflow: hidden;
  /* Material floats the edit/view buttons at the top right of every article,
   * and a grid container establishes a block formatting context, so without
   * this the hero shortens itself by the width of those two icons and stops
   * lining up with the prose underneath it. */
  clear: both;
  border: 1px solid color-mix(in srgb, var(--md-primary-fg-color) 22%, transparent);
  border-radius: var(--dg-radius-lg);
  background:
    radial-gradient(circle at 12% 8%, rgb(30 144 255 / 16%), transparent 38%),
    linear-gradient(145deg, rgb(30 144 255 / 8%), transparent 58%);
  box-shadow: var(--dg-shadow);
}

.dg-hero__content h1 {
  max-width: 19ch;
  margin: 0.35rem 0 0.85rem;
  padding-top: 0;
  border-top: 0;
  font-size: clamp(1.9rem, 2.5vw, 2.9rem);
  line-height: 1.04;
  letter-spacing: -0.035em;
}

.dg-hero__content > p:not(.dg-eyebrow) {
  max-width: 34rem;
  font-size: 0.95rem;
}

.dg-eyebrow {
  margin: 0;
  color: var(--md-primary-fg-color--dark);
  font-size: 0.7rem;
  font-weight: 800;
  letter-spacing: 0.12em;
}

[data-md-color-scheme=slate] .dg-eyebrow {
  color: #75baff;
}

.dg-hero .md-button {
  margin: 0.35rem 0.35rem 0.2rem 0;
}

.dg-hero__visual {
  width: 100%;
  max-width: 30rem;
  margin: 0;
  justify-self: end;
}

/* md_in_html wraps the image in a paragraph on its way through the Markdown
 * parser - which is what gets the relative path rewritten per page - so the
 * paragraph's own margins have to come back off. */
.dg-hero__visual p,
.dg-proposal-cover p {
  margin: 0;
}

.dg-hero__visual img,
.dg-proposal-cover img {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 0.8rem;
  box-shadow: 0 0.8rem 2rem rgb(1 24 47 / 22%);
}

.dg-hero__visual figcaption {
  margin-top: 0.55rem;
  color: var(--md-default-fg-color--light);
  font-size: 0.72rem;
  text-align: center;
}

.dg-proposal-cover {
  max-width: 52rem;
  margin: 1.25rem auto 2rem;
}

.dg-download {
  margin: 1.5rem 0 2rem;
  padding: 1.1rem 1.25rem;
  border: 1px solid var(--dg-border-soft);
  border-left: 0.25rem solid var(--md-primary-fg-color);
  border-radius: var(--dg-radius);
  background-color: var(--dg-tint-soft);
}

.dg-download > :first-child {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}

@media screen and (max-width: 760px) {
  .dg-hero {
    grid-template-columns: 1fr;
  }

  .dg-hero__content h1 {
    max-width: 16ch;
  }
}

/* ==========================================================================
   8. Footer and chrome
   ========================================================================== */

.md-footer__link {
  border-radius: var(--dg-radius);
  padding: 0.6rem;
  transition: background-color 125ms;
}

.md-footer__link:hover {
  background-color: rgb(255 255 255 / 8%);
  opacity: 1;
}

.md-footer-meta {
  font-size: 0.68rem;
}

/* Also on `body` rather than `html`, for the reason given in section 1: the
 * palette token does not exist on the root element. */
body {
  scrollbar-color: var(--md-default-fg-color--lighter) transparent;
  scrollbar-width: thin;
}

::selection {
  background-color: color-mix(in srgb, var(--md-primary-fg-color) 28%, transparent);
}

:focus-visible {
  outline: 2px solid var(--md-primary-fg-color);
  outline-offset: 2px;
}

/* The lifts and slides above are decoration. Anything that conveys state -
 * colour, the active-tab underline - is left alone. */
@media (prefers-reduced-motion: reduce) {
  .md-typeset .grid.cards > ol > li,
  .md-typeset .grid.cards > ul > li,
  .md-typeset .grid > .card,
  .md-typeset .md-button {
    transition: none;
  }

  .md-typeset .grid.cards > ol > li:hover,
  .md-typeset .grid.cards > ul > li:hover,
  .md-typeset .grid > .card:hover,
  .md-typeset .md-button:hover {
    transform: none;
  }
}

@media print {
  .md-typeset .admonition,
  .md-typeset details,
  .md-typeset .grid.cards > ul > li,
  .dg-hero {
    box-shadow: none;
  }
}