/* Theme */
:root {
    --bg: #282b27;
    --fg: #c7c7c7;
    --bg1: #0b0f10;
    --high: skyblue;
    --anim: 0.2s;
    --round: 20px;
    --blur: 10px;
}

/* Global elements */
body {
    font-family: "DM Sans", sans-serif;
    background: top no-repeat url("/banner2.png") var(--bg);
    background-size: 100%;
    color: var(--fg);
    display: flex;
    flex-direction: column;
    align-items: stretch;
    min-height: 100vh;
    margin: 0;
}

a {
    color: var(--fg);
    transition: color var(--anim), box-shadow var(--anim);
}

a:hover {
    color: var(--high);
}

header h1 {
    text-align: center;
    margin: 2em
}

h1, h2, h3, h4 {
    font-family: "Playfair Display", serif;
    font-weight: normal;
}

h1 a{
    text-decoration: none;
}

h2 a, h3 a, h4 a {
    display: inline-block;
    color: white;
    cursor: pointer;
    transition: all var(--anim) ease;
}

div.center {
    display: flex;
    justify-content: center;
}

/* Main website structure */
main {
    flex-grow: 1;
    margin: 0 10vw;
}
header a.back-button {
    font-family: "Playfair Display", serif;
    font-size: 18pt;
    text-decoration: none;
    position: absolute;
    left: 18pt;
    top: 18pt;
}
footer {
    width: 100%;
    padding: 3em 0;
    display: flex;
    flex-direction: column;
    align-items: center;
}
footer ul {
    padding: 0;
    margin: 0;
    display: flex;
    gap: 1em;
}
footer ul li {
    list-style: none;
    text-align: center;
}
footer span.copyright {
    margin-top: 2em;
}

/* Item lists */
section.list h1 {
    text-align: center;
}
div.list {
    display: flex;
    align-items: start;
    justify-content: center;
    flex-wrap: wrap;
}

div.item-card {
    width: 35em;
    margin: 1em;
    border-radius: var(--round);
    background: var(--bg1);
    display: flex;
    flex-direction: column;
    align-items: stretch;
}

div.item-card h2 {
    text-align: center;
    margin: 0;
}
div.item-card h2 a {
    width: 100%;
    box-sizing: border-box;
    padding: 1em;
    padding-bottom: 0;
}

div.item-card a.see-more {
    text-align: center;
    color: var(--high);
    padding-bottom: 1em;
    text-decoration: none;
    text-wrap: nowrap;
}

div.item-card div.content {
    display: flex;
    flex-direction: column;
    padding: 2em;
    gap: 1em;
}

div.item-card p {
    margin: 0;
}

div.item-card p a.see-more {
    text-decoration: underline;
}

div.item-card div.links {
    justify-content: center;
}

/* Single Pages */
section.single h1 {
    margin-bottom: 0;
}

/* Links */
div.links {
    display: flex;
    gap: 1em;
    margin-bottom: 1em;
}

/* Tags */
div.tags {
    display: flex;
    align-items: start;
    font-weight: bold;
    gap: 0.5em;
    flex-wrap: wrap;
    
}

div.tags div.tag {
    border-radius: 1em;
    padding: 0 0.5em;
    background: #ccc;
    color: #111;
}

/* Image and video zooming */
*.zoomable {
    cursor: zoom-in;
    transform: scale(100%);
    transition: transform var(--anim);
    max-height: 40em;
}
*.zoomable:hover {
    transform: scale(105%);
}
div#zoomed-in-display {
    position: fixed;
    left: 0;
    top: 0;
    width: 100vw;
    height: 100vh;
    cursor: zoom-out;
    background: rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(var(--blur));
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 100%;
    transition: opacity var(--anim);
}
div#zoomed-in-display.hidden {
    opacity: 0%;
    pointer-events: none;
}
div#zoomed-in-display img, div#zoomed-in-display video {
    max-width: 80vw;
    max-height: 80vh;
}
img.hidden, video.hidden {
    display: none;
}
div.captionedimage, div.captionedvideo {
    display: flex;
    flex-direction: column;
    font-family: "Playfair Display", serif;
    font-size: 18.72px;
}
div.row{
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
div.row.gap{
    gap: 1em;
}

model-viewer{
    width:700px;
    height:700px;
}