@media (max-width: 768px){
    .banner-header{ flex-direction: column; align-items: center; text-align: center; }
    .banner-left{ margin: 0 0 .5rem 0; }
    .banner-logo{ margin: 0; }
    nav{ flex-wrap: wrap; justify-content: center; gap: .5rem; font-size: 1rem; }


    .theme-toggle {
	position: static;
	order: 2; 
	margin-left: .5rem;
	padding: .3rem .6rem;
	background: transparent;
  }

    .banner-header {
	flex-wrap: wrap;
	justify-content: center;
    }
    .banner-header nav {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
    }

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

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

}
@media (max-width: 1250px){
    #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 dotted color-mix(in oklab, var(--fg) 8%, transparent);
      margin-right: 0;
  }
    .fullwidth{
	max-width: calc(100vw - 2 * var(--body-pad));
    }
    .sidenote, .marginnote{
	border-left: 3px dotted 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 dotted color-mix(in oklab, var(--fg) 12%, transparent);
      background: color-mix(in oklab, var(--bg) 96%, var(--fg) 4%);
      border-radius: 4px;
  }

}