html, body {
width: 100%;
height: 100%;
}
pre {
font-family: 'IBM Plex Sans', sans-serif;
max-width: 100%;
white-space: pre-wrap;
overflow-wrap: normal;
text-wrap: wrap;
word-wrap: break-word;
}
textarea {
max-width: 100%;
}
img {
max-width: 100%;
}
header {
padding: 5px;
}
main {
flex: 1;
width: 100%;
}
footer {
}
table td, table th {
padding: 5px;
}
a {
color: var(--color-link);
font-weight: 900;
}
strong {
font-weight: bold;
}
code {
font-size: 100%;
font-style: italic;
font-weight: 500;
background-color: var(--color-text-code);
border-radius: 8px;
padding-left: 8px;
padding-right: 8px;
}
summary {
display: flex;
gap: 10px;
}
details {
width: fit-content;
}
::details-content {
width: 0;
overflow: hidden;
white-space: nowrap;
transition: width 0.3s ease;
}
details[open]::details-content {
width: auto;
}
details > summary::before {
content: "▶";
color: var(--color-bullet-text);
display: inline-block;
width: 20px;
height: 20px;
background-size: contain;
background-repeat: no-repeat;
}
details[open] > summary::before {
content: "▼";
color: var(--color-bullet-text);
display: inline-block;
width: 20px;
height: 20px;
background-size: contain;
background-repeat: no-repeat;
}
li::marker {
color: var(--color-bullet-text);
}