@media (max-width: 600px){
    .banner-header {
	align-items: stretch;
	gap: 0.7rem;
	margin-top: 0.75rem;
    }

    .site-brand {
	justify-content: center;
    }

    .site-nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	justify-content: center;
	width: 100%;
	gap: 0.2rem;
	font-size: 0.92rem;
    }

    .site-nav a {
	padding: 0.42rem 0.55rem;
    }

    .site-actions {
	width: 100%;
	flex: 1 1 100%;
	justify-content: center;
    }

    .site-search {
	display: none;
    }

    #updated {
	text-align: center;
    }

    body.no-sidenotes {
	margin-left: 1em;
	margin-right: 1em;
    }

    #mobile-move-panel {
	display: block;
    }

}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
      --bg: #0f1115;
      --fg: #e6e6e6;
      --link: #8ab4ff;
      --heading: #9ecbff;
      --code-bg: #1a1d24;
      
      --note-color: #c2c7cf;
      --note-bg: transparent;
	      
	      --border: #2a2f3a;
	      --chip-bg: #1f2330;
	      --chip-fg: #cfd3da;
	      --muted: #a9b0bb;
	      --surface: #151820;
	      --surface-soft: #1b202a;
	      --accent: #8ab4ff;
	  }
    .countdown-wrap {
	color: var(--fg, #ddd);
    }
    time.countdown {
	color: var(--accent, #7abfff);
	background: color-mix(in srgb, var(--accent, #7abfff) 15%, transparent);
	box-shadow: 0 0 6px rgba(255,255,255,0.05);
    }
    time.countdown.expired {
	color: #777;
    }
}

@media (max-width: 1250px){
    :root {
	--content-min: 0px;
	--content: min(var(--content-max), calc(100vi - 2 * var(--body-pad)));
    }

    #preamble.status{
	padding-right: var(--body-pad);
    }
    
    #content.content{
	padding-right: var(--body-pad);
    }
    .sidenote,
  .marginnote{
      float: none;
      clear: both;
      width: auto;
      display: block;
      margin: 0.5rem 0 0.75rem;
      padding-left: 0.75rem;
      border-left: 3px solid rgba(0,0,0,.08);
      margin-right: 0;
  }
    .fullwidth{
	max-width: calc(100vw - 2 * var(--body-pad));
    }
    .sidenote, .marginnote{
	border-left: 3px solid color-mix(in oklab, var(--fg) 12%, transparent);
    }
    .sidenote .mn-img,
  .marginnote .mn-img{
      border-color: color-mix(in oklab, var(--fg) 12%, transparent);
  }
   
  #table-of-contents{
      float: none;
      position: static;
      width: auto;
      margin: 0 0 1rem;
      padding: .5rem .75rem;
      border-right: 0;
      border-left: 3px solid color-mix(in oklab, var(--fg) 12%, transparent);
      background: color-mix(in oklab, var(--bg) 96%, var(--fg) 4%);
      border-radius: 4px;
  }

}