.announcement {
    overflow-x: visible !important;
    height: auto !important;
    padding: .5em;
}

.announcement-content {
    display: flex;
    flex-wrap: wrap;
    font-size: .9em !important;
    gap: .2em;
    justify-content: center;
    white-space: normal !important;
}

.announcement-content p {
    margin: 0;
    padding: 0;
}

h1 img, h2 img, h3 img, p img {
    vertical-align: baseline;
    width: .8em;
}

figcaption > p {
    font-size: .9em;
    font-style: italic;
    margin: 0;
    padding: 0 2em;
}

.sidebar-logo {
    width: 80%;
}

.content-icon-container {
    padding-right: .5em;
}

.mermaid {
    text-align: center;
}

.title-container {
    margin: 1em 0;
    padding: 0 1em 1em;
    background: url("/cover.svg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

.title-contrast {
    height: 10em;
    margin: 0 -1em;
}

.title-contrast > hr {
    width: 100%;
    height: 2em;
    border: none;
    outline: none;
    background-color: var(--color-code-background);  /* Compatibility */
    background-color: rgb(from var(--color-code-background) r g b / 80%);
}

.title-container > h1 {
    margin: 0;
    padding: .2em .3em;
    border-radius: 0;
    color: var(--color-code-foreground);
    background-color: var(--color-code-background);  /* Compatibility */
    background-color: rgb(from var(--color-code-background) r g b / 80%);
}

@media (max-width: 63em) {
.title-contrast > hr {
    height: 0;
}
}

#cahute-version .toctree-wrapper > ul {
    display: flex;
    list-style-type: none;
    flex-wrap: wrap;
    padding-left: 0;
    gap: .5em 1em;
}

#cahute-version .toctree-wrapper > ul > li {
    display: inline-block;
    flex: 1 0 20em;
}

.feature-list {
    border-top: 1px solid var(--color-code-foreground);;
}
.feature {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    padding: .5em 0;
    border-bottom: 1px solid var(--color-code-foreground);
}
.feature-icons {
    flex: 0 0 2.5em;
    padding: 0 .5em;
    align-self: center;
}
.feature-detail {
    flex: 1 0 10em;
    padding: 0 .5em;
}
.feature-detail p {
    margin: 0;
}
.feature-title p {
    font-size: 1.1em;
    font-weight: bold;
}

.system-list {
    display: grid;
    grid-template-columns: 10em 1fr 1fr;
    grid-gap: 1em;
    padding: 1em 0;
}

.system-name {
    padding: 0 1em;
    text-align: center;
}

.system-name img {
    display: block;
    width: 100%;
    max-width: 4em;
    margin: 0 auto 1em;
}

.system-guides-title {
    background-color: var(--color-admonition-title-background--seealso);
    font-size: var(--admonition-title-font-size);
    font-weight: 500;
    line-height: 1.3;
    padding: .4rem .5rem .4rem 2rem;
    position: relative;
}

.system-guides-title::before {
    background-color: var(--color-admonition-title--seealso);
    -webkit-mask-image: var(--icon-abstract);
    mask-image: var(--icon-abstract);
    content: "";
    height: 1rem;
    left: .5rem;
    position: absolute;
    width: 1rem;
}

.admonition .system ul {
    font-size: .9em;
}

.bottom-of-page .icons svg,
.bottom-of-page .icons img {
    width: auto;
    height: 2em;
    vertical-align: middle;
}
