#mg {
width: 70%;
display: block;
margin-left: auto;
margin-right: auto;
}

h1 {
margin: 0 0 14px 0;
font-size: 2rem;
display: block;
font-weight: 700;
padding: 0;
}

hr {
margin: 8px 0 8px 0;
display: block;
border-width: 1px;
}

main {
display: flex;
flex-direction: row-reverse;
justify-content: space-between;
}

.main-note {
position: relative;
width: 725px;
}

.sidebar {
position: fixed;
left: 0;
height: 90%;
width: calc(50% - 370px);
top: 3em;
}

.contents {
position: relative;
right: 0;
height: 95%;
overflow-y: auto;
}

div.contents > nav > div > ul {
margin-top: 0;
}

.toc {
position: sticky;
top: 3em;
right: 0;
height: 80vh;
width: calc(50vw - 355px);
}

div.cnote > details > summary {
font-size: 16px;
transition: font-size .3s;
}

div.cnote > details[open] > summary {
font-size: 2em;
font-weight: bold;
}

.toc > .button {
margin-bottom: 5px;
}

summary.button {
padding: 5px 1em 5px 1em;
}
summary.button > p {
margin: 0;
}
summary.button + p {
margin-left: 2em;
}

div.lec {
height: 0;
margin-left: -200px;
}
div.lec > div > hr {
width: 195px;
}

table {
  border-spacing: 0px;
}

td, th {
  border: 1px solid var(--foreground);
  padding: 2px 8px;
}

img {
    width: 100%
}