html{
scroll-behavior:smooth
}
body {
background: linear-gradient( yellow, greenyellow );
}
main {
margin: auto;
max-width: min( 100%, 40rem );
}
h1, h2, h3, h4, h5 {
color: red;
}
section {
display: none;
}
section:target,
:target section,
section section {
display: block;
}
#nav {
display: none;
}
#toc {
position: fixed;
right: calc( -1 * ( 30% - 2rem ) );
box-sizing: border-box;
min-width: 30%;
width: 30%;
height: calc( 100vh );
top: 0;
padding-right: 1rem;
transition: right 0.2s linear;
overflow:scroll;
}
img {
min-width: 100%;
max-width: 100%;
height: auto;
}
#toc:hover {
right: calc( 0% );
}
#toc .toctitle {
display: none;
}
#toc ul {
padding-left: 1rem;
list-style: none;
}
#toc > ul > li {
border-radius: 1rem;
background-color: lightgray;
box-shadow: 0 0 1rem 0 fuchsia;
padding: 1rem;
margin: 0;
}
.toclevel-2 {
display: none;
}
.toclevel-1 .selected + ul .toclevel-2 {
display: list-item;
}
#impakttoc {
border-radius: 1rem;
background-color: lightgray;
box-shadow: 0 0 1rem 0 fuchsia;
}