body {
   margin: 4px 0; text-align: center; font-family: sans-serif;
   background: #f8f8ff;}

in-fo {
   position: absolute; top: calc(50vh - 150px); left: calc(50vw - 100px);
   width: 200px; height: fit-content; background: #708090; color: white;
   border-radius: 8px; z-index: 999999; display: none;}
in-fo h4 {margin: 12px 0; font-size: 16px; font-weight: normal;}
in-fo table {
   display: block; width: 180px; margin: auto; background: transparent;
   border-collapse: collapse; text-align: center;}
in-fo td, in-fo th {
   font-weight: normal; text-align: center; padding: 4px;
   border: 1px solid #f8f8ff;}
in-fo th:first-child {width: 100%}
in-fo td:first-child {text-align: right; padding-right: 8px;}
in-fo table tr:nth-child(even) {background: transparent;}
in-fo button {
   display: block; width: 80%; background-color: #f8f8ff; border: none;
   border-radius: 4px; margin: 12px auto; font-size: 14px;}

h1, h2 {font-weight: normal; color: #4b0082; text-align: center;}
h1 {font-size: 18px; margin: 4px 0;}
h2 {font-size: 16px; margin: 12px 4px;}
header {
   width: fit-content; padding: 12px; background: #708090;
   margin: 10% auto 0; border-radius: 8px;}
input, select, textarea, button {padding: 4px 8px; outline: none;}
header input, header button, header output, select {
   display: block; font-size: 17px; margin: 8px auto; border: none;
   border-radius: 4px;}
aside input, aside textarea, aside button {
   font-size: 15px; margin: 4px; padding: 2px 4px;}
textarea, article {
   display: block; width: calc(100% - 24px); border: 1px solid #708090;
   resize: none; height: 7ex;}
textarea#topUr {line-height: 100%;}
textarea#htask {height: 2.7ex;}
article {
   height: calc(100vh - 278px); background: white; text-align: left;
   padding: 4px; overflow: scroll; font-size: 14px;}
article p {margin: 6px 0 0 12px; text-indent: -12px;}
article p span:first-child {color: #d2691e; cursor: pointer;}
article p span.home {text-decoration: none; color: gray;}
article p span.weight {display: none;}
article p.vsego {color: #4b0082; font-size: 15px;}
header input {width: 12em;}
select {background: white; border: 1px solid #708090;}
header output {color: #f8f8ff;}
main {display: none;}
section, aside {
   display: inline-block; margin: 4px; height: calc(100vh - 96px);
   vertical-align: top;}
section {
   position: relative; width: calc(100vw - 430px); overflow-x: hidden;
   overflow-y: scroll; background: white; border: 1px solid #708090;
   text-align: left; white-space: nowrap;}
aside {width: 392px; max-width: calc(100vw - 28px); font-size: 14px;}
p {hyphens: auto;}
section p {color: #4b0082; text-align: center; font-size: 16px;}
tt {font-size: 0.9em;}

table {
   border-collapse: collapse; font-size: 14px; background: white;}
table#list, div#marks table {display: inline;}
table#list  {position: absolute; top: 0; left: 0;}
div#marks {
   position: absolute; top: 0; left: calc(10em - 2px); overflow-x: scroll;
   width: calc(100vw - 10em - 438px);}
tr:nth-child(even) {background: #f8f8ff;}
tr.w td {color: #708090;}
table#list tr, div#marks table tr {height: 3.5ex;}
td {
   padding: 0 8px; border: 1px solid #708090;
   text-align: center; position: relative;}
td.pa {color: #d2691e;}
table#list td {text-align: left; width: 10em; max-width: 10em;
   white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
   cursor: pointer;}
table#list tr:first-child td, table#list tr:nth-child(2) td {
   text-align: right; color: #708090;}
table#list tr:nth-child(2) td, div#marks table tr:nth-child(2) td {
   border-bottom: 2px solid #708090;}
table#pup {width: 100%;}
table#stat {margin: 0 auto 20px;}
table#pup td, table#pup th, table#stat td, table#stat th {
   padding: 4px; border: 1px solid #708090; text-align: center;
   overflow-x: auto; white-space: normal; vertical-align: top;}
table#stat td, table#stat th {padding: 4px 8px;}
table#pup th, table#stat th {
   font-weight: normal; background: #708090; color: white;
   border-color: #f8f8ff;}
table#pup td:nth-child(3), table#pup td:nth-child(4) {text-align: left;}
tr.pap {color: #d2691e; font-weight: bold;}

input.mrk {
   width: 98%; max-width: 3.8em; height: 3.3ex; margin: 0; padding: 0;
   border: none; background: #cce; text-align: center; font-size: 1em;}

@media (max-width: 960px) {
   section {width: calc(100vw - 24px);}
   div#marks {width: calc(100vw - 10em - 32px);}
}