body {
    max-width: 95%;
    margin-left: 1ch;
}

main {
    height: 100%;
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    /* grid-auto-rows: minmax(100px, auto); */
}

div.maincolumn {
    grid-column: 1/8;
    grid-row: 1/4;
}

div#buttons {
    grid-column: 12;
    grid-row: 2;
    width: 88px;
}
div#buttons img { 
  display: block; 
  margin-bottom: 3px; 
  width: 88px;
}

@counter-style line-number {
  system: extends decimal;
  suffix: " | ";
}
ol#lines { 
    white-space: pre;
    font-family: monospace;
    list-style: line-number;
}

span.comment { color: gray; }
span.type { color: blue; font-style: italic; }

span.salink, a.salink, a.salink:visited { 
    color: black; 
    text-decoration: none; 
}
a.salink:hover { text-decoration: underline; }


div#declarations { height: 20ch; }

div#studytopics {
    padding: 10px;
    border-radius: 10px;
    background-color: white;
    font-family: Chicago;
}
div#studytopics li {
    list-style-type: "* ";
}


div#updates {
    /* border: 6px outset lightgray; */
    background-color: #f2efff;
    width: 100%;
    margin-top: 55px;
}
div#updates > h4 {
    text-align: center;
    margin: 0;
    padding: 10px 0;
    border: 1px solid gray;
}
div#updates > div > pre { 
    padding-left: 5px;
    overflow-x: hidden;
}


div#barnum {
  margin-top: 10px;
  padding: 11px;
  background-color: #d5dff9;
  color: #12176a;
}


div#floor {
    height: 100px;
    background-image: url('media/floor1.gif');
    background-repeat: repeat-x;
    width: 100%;
    position: absolute;
    left: 0;
    z-index: -1;
}
p#thought {
    font-family: Chicago;
    height: 40px;
    grid-row: 6;
    grid-column: 2;
    grid-column-end: 12;
}

@media only screen and (max-width: 1000px) {
    div#buttons { display: none; }
    .hcomment { display: none; }
}