:root {
    --background-rgb: 4, 4, 7;
    --background: rgb(4, 4, 7);
    --text: rgb(180, 180, 180);
    --text-strong: rgb(200, 200, 200);
    --text-secondary: grey;
    --text-focus: white;
    --graphic: #17142b;
    --graphic-strong: rgb(71, 120, 47);
}

body {
    background-color: var(--background);
    margin: 0;

    /* leave a bit of space at the bottom for comfort */
    padding-bottom: 200px;

    background-image: linear-gradient(var(--background), var(--background)), url("/assets/cosmos.png");
    /* background-image: linear-gradient(rgba(var(--background-rgb), 0.5), rgba(var(--background-rgb), 1)), url("/assets/cosmos.png"); */
}

body::before {
    background-color: var(--background);
}

/* subtle fade to make it clear when the bottom of the content is reached */
body::after {
    content: "";
    display: block;
    width: 100%;
    height: 100px;
    background-image: linear-gradient(rgba(var(--background-rgb), 0), rgba(var(--background-rgb), 0.8));
    position: fixed;
    bottom: 0%;
}

/* GENERAL SITE CONTENT */

h1,
h2,
h3,
h4,
h5,
h6,
p,
ul,
td,
li {
    color: var(--text);
    transition: color 0.2s ease-in-out;
    -webkit-text-stroke: 0.5px #8f9891fa;
}

table {
    width: 100%;
}

thead {
    display: none;
}

td {
    padding: 0;
    font-size: small;
}

td:last-child {
    text-align: right;
}

h1:hover,
h2:hover,
h3:hover,
h4:hover,
h5:hover,
h6:hover,
p:hover,
ul:hover,
li:hover,
td:hover,
a:hover {
    color: rgb(245, 245, 245);
}

a {
    color: var(--text);
    text-decoration-line: underline;
    text-decoration-thickness: 1px;
}

strong {
    color: var(--text-strong);
}

section {
    padding: 1em;
}

article {
    max-width: 30em;
    margin: 0 auto;
    padding: 0 1em;
    font-family: 'Georgia', 'Times New Roman'
}

.gallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    max-width: 50em;
}

@media screen and (max-width: 700px) {
    .gallery {
        max-width: 100%;
    }

    .gallery-item img {
        width: 175px !important;
        height: 175px !important;
    }
}

.gallery-item {
    padding: 4px;
}

.gallery-item img {
    width: 240px;
    height: 240px;
    image-rendering: crisp-edges;
    object-fit: cover;
    /* fix misalignment caused by the parent <a> */
    /* https://stackoverflow.com/questions/8997532/a-tag-taking-some-extra-space-in-html */
    vertical-align: bottom;
}

img,
video {
    width: 100%;
    max-width: 30em;
    margin: 0 auto;
    transition: opacity 0.5s ease-in-out;
}

.trinkets {
    display: block;
    outline: none;
    border: 0;
    width: 200px;
    height: 200px;
    
    image-rendering: pixelated;

    mask-image: url("/assets/trinkets.png");
    mask-repeat: no-repeat;
    mask-size: 100% 100%;

    background-color: var(--graphic);
    transition: background-color 10s;

    margin-top: 10em;
}

@keyframes trinket {
    0% { mask-image: url("/assets/trinkets.png"); }
    50% { mask-image: url("/assets/trinkets_2.png"); }
}

.trinkets:hover {
    background-color: var(--text-focus);
    animation: trinket 1s infinite none;
}

.cv hr {
    /* keep it boring for the cv */
    background-color: var(--text);
}

hr {
    display: block;
    background-color: var(--graphic-strong);

    /* strip the default border styling, we'll just display it minimally using a block */
    border: 0;
    height: 2px;
}

/* NAV */

nav {
    display: block;
    width: auto;
    margin: 0;
    padding: 2em;
    background-image: linear-gradient(rgba(169, 149, 224, 0.02), rgb(0, 0, 0, 0));
    font-family: 'Lucida Console', 'Verdana', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
}

nav p,
nav a {
    font-size: xx-large;
    margin: 0;
    color: var(--text-focus);
    text-decoration-line: none;
}

nav section {
    display: inline-block
}

nav section a {
    color: var(--text-secondary);
    font-size: x-large;
}

.cv p,
.cv a,
.cv ul,
.cv li {
    font-size: small;
}