html {
    font-family: Arial;
}
body {
    padding: 0.5rem;
}
h2, h3 {
    margin: 0;
}
.category-container {
    display: flex;
    gap: 1rem;
}
.category-container > svg {
    pointer-events: none;
}
.category {
    flex: 1;
    width: fit-content;
    border: 1px solid grey;
    padding: 0.5rem;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    background-color: #eee;
}
.category > h3 {
    text-decoration: underline;
    margin-bottom: 0rem;
}
.item {
    border: 2px solid grey;
    padding: 0.5rem;
    display: flex;
    flex-wrap: wrap;
    background-color: white
}
.item > h3 {
    flex-basis: 100%;
    margin-bottom: 0.5rem;
}
.item > span:not(.full-width) {
    flex-basis: 50%;
}
.full-width {
    flex-basis: 100%;
}
.item > .key{
    font-style: italic;
}
.item > .key, .item > .value {
    margin-top: 0.25rem;
}
.value {
}
.info-link {
    color: blue;
    cursor: pointer;
}
.highlighted {
    border: 2px solid red;
}
.highlighted > h3 {
    background-color: red;
    color: white;
    padding: 0.5rem;
    margin: -0.5rem -0.5rem 0;
}
.highlighted-text {
    text-decoration: underline;
    color: red !important;
}
.info-link, a {
    color: rgb(64, 101, 197);
}
a:visited {
    color: rgb(104, 96, 171);
}
a:hover {
    opacity: 0.5;
}