* {
    font-family: sans-serif;
}

main {
    max-width: 1000px;
    margin: 0 auto;
    text-align: left;
}

h1 {
    text-align: center;
}

.main-image {
    display: block;
    height: auto;
    margin: 0 auto;
    max-height: 400px;
    max-width: 100%;
    width: auto;
}

table {
    max-width: 1000px;
    width: 100%;
}

table:not(.no-border),
table:not(.no-border) tr,
table:not(.no-border) td,
table:not(.no-border) th {
    border: 1px solid black;
    border-collapse: collapse;
}

th,
td {
    padding: 5px;
    vertical-align: top;
}

.backstory {
    max-width: 700px;
}

div.image-gallery {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.colour-circle {
    border: 2px solid black;
    border-radius: 50%;
    display: inline-block;
    float: right;
    height: 0.8em;
    margin-left: 3px;
    position: relative;
    top: 1px;
    width: 0.8em;
}

.colour-hex {
    margin-left: 5px;
}

.nsfw {
    position: relative;
    overflow: hidden;
}

.nsfw img {
    filter: blur(10px);
}

.nsfw::after {
    background: black;
    border-radius: 10px;
    color: white;
    content: "NSFW";
    font-size: 22px;
    left: 50%;
    padding: 5px;
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

h1[title],
h2[title],
h3[title],
h4[title],
h5[title],
h6[title],
span[title] {
    cursor: help;
    text-decoration: underline dotted;
}

summary {
    cursor: pointer;
}

summary:hover {
    text-decoration: underline;
}

a:not(.no-icon)[target="_blank"]::after {
    background: url(/content/img/open-in-new.svg);
    background-size: 100%;
    content: "";
    display: inline-block;
    height: 0.75rem;
    margin: 0 0 0 0.1em;
    position: relative;
    top: -.125em;
    width: 0.75rem;
}