@media print, screen and (max-width: 1023px) {
 
  body {
    grid-template-areas:
      "header"
  		"main"
  		"footer"
    ;
  }

  div[class='x-scrollable'] {
    margin: 0 auto;
    max-width: 90vw;
    overflow-x: auto;  
  }
  
  form fieldset {
    display: grid;
    grid-auto-flow: row;
    grid-gap: 1rem;
  }

  body > header {
    grid-template-areas:
  		"title"
  	;
    background-color: var(--bg);
    background-image: none;
    height: auto;
    margin-top: 3.5rem;
  	min-height: 5rem;
  	padding: 1rem 0;
  	text-align: center;
  }

  body > header h1 {
    font-size: 2rem;
  }
  
  body > header h1 small {
    font-size: 1rem;
    margin-top: 0.75rem;
  }
  
  body > header > img {
  	display: none;
  }

  body > header > section {
  	margin: 0 auto;
  	width: 95vw;
  }
  
  body > header h1 {
    display: block;
  }
    
  body > nav {
    z-index: 102;
  }
  
  body > nav > nav[id='menu'] {
    display: none;
  }
    
  body > nav > section[id='mainindex'] {
    display: block;
  	height: 3.5rem;
  	left: 0;
  	margin: 0;
  	position: fixed;
  	top: 0;
  	transition-duration: 0.5s;
  	transition-property: height;
  	width: 100vw;
  }
  
  body > nav > section[id='mainindex'] > h2 {
  	margin: 1rem;
  }
  
  body > nav > section[id='mainindex'] > h2 > span {
    display: inline-block;
    float: right;
    margin-top: -6px;
  }
  
  body > nav > section[id='mainindex'] > h2 > span i {
    display: block;
    width: 35px;
    height: 5px;
    background-color: white;
    margin: 6px 0;
  }
 
  body > main {
  	margin-left: var(--border-margin);
  }
  
  body > main article blockquote {
    margin: 1.5rem 0;
    padding: 1.5rem;  
  }
  
  body > main article button {
  	display: block;
  	width: 100%;
  }
  
  body > main article *[class="LaTex"] > img {
  	max-width: 96%;
  }

  body > main article pre {
    max-width: calc(100vw - 4rem);
  }  
  
  body > main > aside[class='restricted'] {
  	margin: 2rem 0.02rem 4rem 0.02rem;
  }
  
  body > main > aside[class='restricted'] div > a:first-child {
  	margin-right: 0;
  }
  
  body > main > aside[class='restricted'] div > a {
    margin: 0 0 0.5rem 0;
    display: block;
  }
  
  body > footer {
  	bottom: 0;
  	left: 0;
  	position: fixed;
  	width: 100vw;
  }
  
}