/* Font */

@font-face {
  font-family: InterVariable;
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: local("Inter Variable"), local("Inter"), url(fonts/InterVariable.woff2), format("woff2");
}
@font-face {
  font-family: InterVariable;
  font-style: italic;
  font-weight: 100 900;
  font-display: swap;
  src: local("Inter Variable Italic"), local("Inter Italic"), url(fonts/InterVariable-Italic.woff2), format("woff2");
}

@font-feature-values InterVariable {
    @character-variant {
        cv01: 1; cv02: 2; cv03: 3; cv04: 4; cv05: 5; cv06: 6; cv07: 7; cv08: 8;
        cv09: 9; cv10: 10; cv11: 11; cv12: 12; cv13: 13;
        alt-1:            1; /* Alternate one */
        alt-3:            9; /* Flat-top three */
        open-4:           2; /* Open four */
        open-6:           3; /* Open six */
        open-9:           4; /* Open nine */
        lc-l-with-tail:   5; /* Lower-case L with tail */
        simplified-u:     6; /* Simplified u */
        alt-double-s:     7; /* Alternate German double s */
        uc-i-with-serif:  8; /* Upper-case i with serif */
        uc-g-with-spur:  10; /* Capital G with spur */
        single-story-a:  11; /* Single-story a */
        compact-lc-f:    12; /* Compact f */
        compact-lc-t:    13; /* Compact t */
    }
    @styleset {
        ss01: 1; ss02: 2; ss03: 3; ss04: 4; ss05: 5; ss06: 6; ss07: 7; ss08: 8;
        open-digits: 1;                /* Open digits */
        disambiguation: 2;             /* Disambiguation (with zero) */
        disambiguation-except-zero: 4; /* Disambiguation (no zero) */
        round-quotes-and-commas: 3;    /* Round quotes & commas */
        square-punctuation: 7;         /* Square punctuation */
        square-quotes: 8;              /* Square quotes */
        circled-characters: 5;         /* Circled characters */
        squared-characters: 6;         /* Squared characters */
    }
}

:root {
  /* default Inter settings */
  font-feature-settings: 'liga' 1, 'calt' 1, 'cv05' 1; /* Inter features */
}

p, a, h1, h2, h3, li, span, div, .catalogue-title, .post-title, .post-details, .catalogue-time {
  font-family: "InterVariable";
}

/* General */

html, body {
  font-size: 18px;
  background-size: 1920px 1080px;
  background-position: center top;
  background-image: url(graphics/background.png);
}

main {
  display: block;
  margin: 24px auto;
  width: 80%;
  max-width: 768px;
  
  color: #FFFFFF;

  background-blend-mode: normal;
  image-rendering: pixelated;
  image-rendering: -moz-crisp-edges;
  image-rendering: crisp-edges;
}

h1, h2, p {
  margin-top: 12px;
  margin-bottom: 12px;
}

a {
  font-style: normal;
  text-decoration: none;
  color: #FFFFFF;
}

.post a {
  font-style: italic;
  color: #99C1F1;
}

/* Titles */

img.title {
  width: 100%;
  max-height: 192px;
  height: auto;
  object-fit: contain;
  
  mask-repeat: no-repeat;
  mask-position: center; 
  mask-type: alpha;
  mask-size: 192px 192px;
}

p.title {
  text-align: center;
}

/* Basic elements */

div.bordered {
  border-radius: 18px;
  
  text-decoration: none;
  font-style: normal;

  color: #FFFFFF;
  background-color: #282828;
  background-size: 100% auto;
  
  border-image-slice: 8 8 8 8;
  border-image-width: 24px 24px 24px 24px;
  border-image-outset: 0px 0px 0px 0px;
  border-image-repeat: repeat repeat;
  border-image-source: url('graphics/pixel/button-border.png');
  mask: linear-gradient(#000 0 0);
}

div.button a {
  height: 72px;
  display: flex;
  justify-content: center;
  align-items: center;
}

div.button img {
  margin: 12px;
}

img.icon {
  position: absolute;
  height: 48px;
  width: 48px;
  float: left;
  justify-content: center;
  
  background-image: url("graphics/pixel/chequered-dither.png");
  background-repeat: repeat;
  background-size: 48px 48px;
  
  mask-repeat: no-repeat;
  mask-position: center; 
  mask-type: alpha;
  mask-size: 40px 40px;
}

div.spacer {
  height: 12px;
}

/* Effects */

div.highlight {
  color: #242424;

  background-color: #FFFFFF;
  border-image-source: url('graphics/pixel/button-border-highlight.png');
}

.highlight a {
  color: #242424;
}

.highlight img.icon {
  content:url("graphics/pixel/chequered-dither-highlight.png");
}

div.darken-border {
  border-image-source: url('graphics/pixel/button-border-darken.png');
}

div.darken-background {
  background-image: url('/graphics/pixel/dither-darken.png');
}

img.icon.wizard {
  background-image: url("graphics/pixel/chequered-dither-wizard.png");
}

img.icon.alien {
  background-image: url("graphics/pixel/chequered-dither-alien.png");
}

/* Tips */

div.tip {
  position: relative;
  height: 96px;
  text-decoration: none;
  padding: 0;
  display: flex;
  align-items: center;
  
  color: #FFFFFF;
}

img.tip {
  height: 96px;
  width: 96px;
  margin: 0;
  
  background-image: url("graphics/pixel/chequered-dither.png");
  background-repeat: repeat;
  background-size: 48px 48px;
  
  mask-repeat: no-repeat;
  mask-position: center; 
  mask-type: alpha;
  mask-size: 80px 80px;
}

div.speech-bubble {
  width: fit-content;
  max-width: 672px;
  height: 72px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
  vertical-align: middle;
  padding-left: 24px;
  padding-right: 24px;
}

img.speech-bubble-triangle {
  width: 24px;
  height: 24px;
  
  background-image: url("graphics/pixel/chequered-dither.png");
  background-repeat: repeat;
  background-size: 48px 48px;
  
  mask-image: url('graphics/tips/speech-bubble-triangle.svg');
  mask-repeat: no-repeat;
  mask-position: center; 
  mask-type: alpha;
  mask-size: 24px 24px;
}

/* Characters */

div.character-half {
  display: flex;
  align-items: center;
  justify-content:	center;
}

div.character-half > * {
  width: 384px;
  box-sizing: border-box;
  flex: 0 0 384px;
}

div.character-half > div {
  margin: auto;
  margin-left: 12px;
  margin-right: 12px;

  position: relative;
  height: fit-content;
  min-height: 72px;
  padding: 12px;
}

a.wizard, div.wizard {
  background-color: #1A5FB4;
}

a.alien, div.alien {
  background-color: #26A269;
}

a.cowboy, div.cowboy {
  background-color: #E5A50A;
}

/* Post preview */

div.post-preview {
  position: relative;
  height: fit-content;
  min-height: 72px;
  display: flex;
  padding: 12px;
}

a.post-preview {
  width: 100%;
  height: 100%;
  padding-left: 60px;
  padding-right: 24px;
}

a.post-preview h1 {
  margin: 0;
}

i.metadata {
  color: #9A9996;
}

/* Posts */

.post img {
  width: 100%;
}

/* Videos */

div.button-half {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-gap: 24px;
  align-items: start;
}

div.video {
  padding: 12px;
}

div.video-thumbnail {
  height: 195px;
}

div.video-thumbnail .dithered-image {
  display: flex;
  justify-content: center;
  height: 100%
}

div.video-title {
  position: relative;
  height: fit-content;
  display: flex;
}

a.video-title {
  width: 100%;
  height: 100%;
  padding-left: 60px;
}

a.video-title h2 {
  margin: 0;
}


/* Dithered images */

.dithered-image input {
  display: none;
}

.dithered-image img {
  border-radius: 18px;
}

.dithered-image .image-alt {
  display: none;
}

/* Hide original image if '.image-box' contains a checked input */
.dithered-image:has(input:checked) .image {  
  display: none;
}

/* Show alternative image if '.image-box' contains a checked input */
.dithered-image:has(input:checked) .image-alt {  
  display: inline;
}

.hide {
  display: none;
}