#Page {
	margin: auto;
	display: grid;
	max-width: 1200px;
	padding: 5em clamp(0px, 10vw, 5em);
	grid-template: 
		"topbar topbar topbar"
		"navbar content sidebar"
		"footer footer footer"
		/ auto 1fr 270px;
}
@media only screen and (max-width: 1000px) {#Page {  
	grid-template: 
		"topbar topbar"
		"navbar navbar"
		"content sidebar"
		"footer footer"
		/ auto 230px;
}}
@media only screen and (max-width: 850px) {#Page {  
	grid-template: 
		"topbar"
		"navbar"
		"content"
		"footer"
		/ auto;
}}

#Topbar { 
	grid-area: topbar;
	border-bottom: 1px dotted; 
	margin-bottom: var(--std-spacing);
	padding-bottom:var(--cmp-spacing);
}
@media only screen and (max-width: 1000px) {#Topbar { margin-bottom: var(--min-spacing); }}

#Hero .name { margin-left: 0.5em; }
#Hero .title { font-size: 2.5em; }


@media only screen and (max-width: 600px) {#Authentication { margin-bottom: 1.5em; }}
#Username { width: 7rem; }

#Definition { margin-top: 0.6em; }
#Definition > .phonetic { letter-spacing: 0.05em; }

#Navbar { grid-area: navbar; }
@media only screen and (min-width: 1001px) {#Navbar {  
	position: sticky;
	align-self: flex-start; 
	top: var(--std-spacing);
	margin-right: var(--std-spacing);
}}
@media only screen and (max-width: 1000px) {#Navbar { margin-bottom: var(--cmp-spacing); }}

@media only screen and (max-width: 1000px) {#Navbar > .Box > .label { display: none; }}
@media only screen and (min-width: 1001px) {#Navbar > .Box > .links { flex-direction: column; }}

@media only screen and (max-width: 1000px) {#Sitenav {  
	border: none;
	border-radius: 0;
	border-bottom: 1px dotted;
	justify-content: flex-end;
	padding: 0 0 var(--min-spacing) 0;
}}
@media only screen and (max-width: 1000px) {#Sitenav > .links { justify-content: flex-end;}}

@media only screen and (max-width: 1000px) {#Actions { 
	align-self: flex-start;
	padding: var(--min-spacing);
}}
@media only screen and (max-width: 1000px) {#Jumper { display: none; }}

#Sidebar {
	padding: 1em;
	grid-area: sidebar; 
	background-size: 1.1em 1.1em;
	margin-left: var(--std-spacing);
	background-image: radial-gradient(var(--fg) 0.6px, transparent 0.6px);
	background-size: 9px 9px;
}
@media only screen and (max-width: 1000px) {#Sidebar { margin: -4.5em 0 0 var(--cmp-spacing); }}
@media only screen and (max-width: 850px) {#Sidebar { display: none; }}

#Content { grid-area: content; }

#Footer { 
	padding-top: 2em;
	grid-area: footer; 
	border-top: 1px dotted;
	margin-top: var(--cmp-spacing);
}