#main>h1 {
    text-align: left;
}

#main>.content {
    padding-top: 1rem;
}

#main>.warning {
    background-color: brown;
    color: white;
    font-size: 1.1rem;
    margin: 2rem 0;
    padding: 1rem 0;
    text-align: center;
}

#main .toc {
    background-color: #EEEEEE;
    border: black 1px dashed;
    display: inline-block;
    margin: 1rem;
    padding: .5rem 1rem;
}

#main .toc a:hover {
    text-decoration: underline;
}

#main .toc li>ul {
    margin-left: 1.5rem;
}

#main .toc ul {
    list-style: none;
}

#main :target {
    background-color: azure;
}

#main .content-thumb-wrapper {
    position: relative;
    width: 700px;
    max-width: 100%;
    overflow: hidden;
    border-radius: 10%;
    white-space: nowrap;
}

#main .content-thumb-wrapper:before {
    content: "";
    display: inline-block;
    padding-top: 100%;
    width: 0px;
}

#main .content-thumb-wrapper>.content-thumb {
    position: absolute;
    display: inline-block;
    top: 50%;
    transform: translateY(-50%);
}

#main .content-thumb-wrapper:has(img[src=""]),
#main .content-thumb-wrapper:has(img[src="#"]),
#main .content-thumb-wrapper:has(img:not([src])) {
    display: none;
}

@media screen and (min-width: 768px) {
    #main .content-thumb-wrapper {
        width: 300px;
        height: 300px;
        margin-left: 1rem;
        float: right
    }
}