* {
    font-variant-ligatures: none;
}

:root {
    --nc-font-sans: -apple-system, BlinkMacSystemFont, avenir next, avenir, segoe ui, helvetica neue, helvetica, Cantarell, Ubuntu, roboto, noto, arial, sans-serif;
    --nc-font-mono: Menlo, Consolas, Monaco, Liberation Mono, Lucida Console, monospace;
    
    /* Custom theme colors */
    --nc-bg-1: #303030;
    --nc-bg-2: #165D00;
    --nc-bg-3: #000000;
    --nc-bg-contrast: #242424; /* slight contrast to bg-1 */
    --nc-tx-1: #FFFFFF;
    --nc-tx-2: #d1d1d1;
    --nc-lk-1: #00BDFF;
    --nc-lk-2: #008ABA;
    --nc-ac-1: #FFFFFF;
    --nc-ac-tx: #000000;
    --code: #1F4025;

    --base: 0.8rem;
    --grid-gutter: var(--base);
    --grid-height: calc(2 * var(--base));
}

/* Some resets: https://andy-bell.co.uk/a-more-modern-css-reset/ */

/* Prevent font size inflation */
html {
  -moz-text-size-adjust: none;
  -webkit-text-size-adjust: none;
  text-size-adjust: none;
}
/* Balance text wrapping on headings */
h1, h2,
h3, h4 {
  text-wrap: balance;
}

/* End of resets */

span.nobr { white-space: nowrap; }

#site-title {
    font-size: calc(3vw + 2vh);
}

nav {
    background-color: var(--nc-bg-1);
    width: fit-content;
    padding: 0.15em 0.6em;
    border-radius: 5px;
}
nav > ul {
    margin: 0;
    padding: 0;
    list-style: none;
}
nav > ul > li {
    display: inline;
    border-left: 1px var(--nc-tx-2) solid;
    padding-left: 0.7ch;
}
nav > ul > li:first-of-type {
    list-style-type: none;
    border-left: none;
    padding-left: 0;
}

#home-container {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    color: var(--nc-tx-1)
}
#home-text {
    margin-top: 1em;
    margin-left: 1.5em;
    width: 100%;
}
@media only screen and (max-width: 480px) {
    #home-container {
        flex-direction: column;
    }
    #home-text {
        margin-top: 0;
        margin-left: 0;
    }
}
#face {
    margin-bottom: 1.5em;
}

html {
    font-size: 110%;
}

h1, h2, h3 {
    padding-bottom: 5px;
    margin-bottom: 15px;
}

code, kbd, samp {
    background: var(--code);
    /* Increase border size from default and reduce padding */
    border: 2px solid var(--nc-bg-3);
    padding: 2px 4px;
    font-style: normal;
}

pre {
    background: var(--code);
    border: 2px solid var(--nc-bg-3);
    tab-size: 4;
    -moz-tab-size: 4;
}

/* codeblock */
pre.highlight {
    color: var(--nc-tx-1);
}

blockquote {
    font-style: italic;
}

footer {
    font-size: 0.8rem;

    /* Keep same width as body text - taken from new.css for header */
	margin: 8rem calc(0px - (50vw - 50%)) 2rem;
    padding-left: calc(50vw - 50%);
    padding-right: calc(50vw - 50%);
}

#headshot {
    height: 10em;
    display: block;
    object-fit: contain;
    margin-left: 5%;
    margin-right: auto;
    margin-top: 1em;
}

/* Reset table colours */
th {
    background: var(--nc-bg-contrast);
}
tr:nth-child(even) {
    background: var(--nc-bg-contrast);
}

a.wiki-link {
    text-transform: capitalize;
    font-style: italic;
}


/* Specific stuff */

/*
Center images that are just regular images from markdown, and give them a good margin
*/
body > img, p > img, video, p > a > img {
    display: block;
    margin: var(--grid-height) auto;
}

video {
    max-width: 100%;
}

/* Special div for putting images beside each other */
div.sidebyside {
    text-align: center;
    margin: calc(0.5 * var(--grid-height)) 0;
}
div.sidebyside > img {
    text-align: center;
    margin: calc(0.5 * var(--grid-height)) var(--grid-gutter);
}

/*
The image carousel stuff below is copied from:
https://github.com/surma/surma.dev/blob/master/static/styles.css
*/

figure {
  margin: calc(var(--grid-height) + 2 * var(--grid-gutter)) 0 0;
}
figure {
  position: relative;
  z-index: 999;
  display: flex;
  flex-direction: column;
  align-items: center;
}
figure > * {
  max-width: 100%;
  height: auto;
}
figure > p:first-child,
figcaption > p:first-child {
  display:contents;
}
figcaption {
  margin-top: var(--grid-height);
  max-width: calc(100% - 2 * var(--grid-height));
  margin: calc(0.5 * var(--grid-height)) auto var(--grid-height); /* smaller top margin */
  text-align: center;
  font-style: italic; /* Replaces the weird slanting that was done by Surma before */
}
.carousel {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory;

  /* by me */
  margin-top: var(--grid-height);
  margin-bottom: calc(2 * var(--grid-height));
}
.carousel > * {
  flex: 0 0 calc(100% - 10 * var(--grid-gutter));
  scroll-snap-align: center;
  margin: 0 calc(2 * var(--grid-gutter));
}

/* No longer image carousel copied stuff */

.carousel img {
    object-fit: contain;
    display: block;
    max-width: initial;
}
.carousel img:not(.dithered) {
    /* This messes up dithered images */
    width: 100%;
    height: 100%;
}

.dithered {
    /* Make pixelated */
    image-rendering: optimizeSpeed;             /* Legal fallback */
    image-rendering: -moz-crisp-edges;          /* Firefox        */
    image-rendering: -o-crisp-edges;            /* Opera          */
    image-rendering: -webkit-optimize-contrast; /* Safari         */
    image-rendering: optimize-contrast;         /* CSS3 Proposed  */
    image-rendering: crisp-edges;               /* CSS4 Proposed  */
    image-rendering: pixelated;                 /* CSS4 Proposed  */
    -ms-interpolation-mode: nearest-neighbor;   /* IE8+           */

    /* Don't allow it to be scaled up in carousel */
    max-width: 100%;
    max-height: 100%;
}

.center {
    text-align: center;
}

.gallery-img {
    display: contents;
}

.gallery-img img {
    width: 100%;
    height: 65vh;
    object-fit: contain;
}

@media only screen and (hover: none) and (pointer: coarse) {
    /* Mobile - images not as high */
    .gallery-img img {
        height: 60vh;    
    }
}