/* Globals and Constants */
:root.landscape {
  --content-width: 960px;
}

:root {
  --ink-black: #000000;
  --sunset-red: #CE0A0A;
  --evening-blue: #0A0ACE;
  --morning-green: #16C60C;
  --page-margin: 20px;
  --content-border: 0px;
  --content-min-margin: 20px;
  --content-width: 720px;
  --content-margin: max(calc((100vw - (var(--content-width) + 2 * var(--page-margin))) / 2 - 2 * var(--content-border)), var(--content-min-margin));
  --content-margin-embedded: calc((100vw - var(--content-width)) / 2);
  --hl-yellow: #fffac8;
  --hl-pink: #fabed4;
  --hl-purple: #dcbeff;
  --hl-green: #aaffc3;
}

@media screen {
    body {
        background-color: #f8f8f8;
    }
}
@media print {
    body {
        background-color: #fff;
    }
}
.markover-content {
    background-color: #fff;
}

/* Fonts */
.serif-regular, .serif {
  font-family: "IBM Plex Serif", serif;
  font-weight: 400;
  font-style: normal;
}
.serif-bold {
  font-family: "IBM Plex Serif", serif;
  font-weight: 700;
  font-style: normal;
}
.serif-regular-italic {
  font-family: "IBM Plex Serif", serif;
  font-weight: 400;
  font-style: italic;
}
.serif-bold-italic {
  font-family: "IBM Plex Serif", serif;
  font-weight: 700;
  font-style: italic;
}
.sans-regular, .sans {
  font-family: "IBM Plex Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
.sans-bold {
  font-family: "IBM Plex Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  font-variation-settings: "wdth" 100;
}
.sans-regular-italic {
  font-family: "IBM Plex Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: italic;
  font-variation-settings: "wdth" 100;
}
.sans-bold-italic {
  font-family: "IBM Plex Sans", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: italic;
  font-variation-settings: "wdth" 100;
}
.mono-regular, .mono {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 400;
  font-style: normal;
}
.mono-bold {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  font-style: normal;
}
.mono-regular-italic {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 400;
  font-style: italic;
}
.mono-bold-italic {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 700;
  font-style: italic;
}
.icebox24 {
    font-family: Icebox;
    font-size: 24px;
}
.icebox36 {
    font-family: Icebox;
    font-size: 36px;
}
.icebox48 {
    font-family: Icebox;
    font-size: 48px;
}

@font-face {
  font-family: 'OchreA';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/OchreA.woff2) format('woff2');
}
@font-face {
  font-family: 'Framingham';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Framingham-Regular.woff2) format('woff2');
}
@font-face {
  font-family: 'PuzzlehuntIcons';
  font-style: normal;
  font-weight: 400;
  font-display: block;
  src: url(fonts/PuzzlehuntIcons-Regular.woff2) format('woff2');
}
@font-face {
  font-family: 'Icebox';
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url(fonts/Icebox-Regular.woff2) format('woff2');
}
@font-face {
  font-family: 'Icebox';
  font-style: bold;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/Icebox-Bold.woff2) format('woff2');
}
@font-face {
  font-family: 'Icebox0';
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url(fonts/Icebox0-Regular.woff2) format('woff2');
}

/* General rules */
html {
  margin: 0px;
  padding: 0px;
}

body {
  min-width: calc(var(--content-width) + 2 * (var(--page-margin) + var(--content-border) + var(--content-min-margin)));
  margin: 0px;
  padding: 0px;
  color: var(--ink-black);
  font-size: 18px;
  font-family: "IBM Plex Serif", serif;
}

.page-div {
  min-width: calc(var(--content-width) + 2 * (var(--content-border) + var(--content-min-margin)));
  padding: 0px;
  margin: var(--page-margin);
}

.markover-content {
  position: relative;
}

.flex-wrapper, .flexwrapper{
  display: flex;
  align-self: flex-start;
  gap: 10px;
}

.flex-wrapper img, .flexwrapper img {
  margin-top: 5px;
}

.inline-wrapper, .inlinewrapper {
  display: inline;
  text-align: right;
}

.header-div {
  margin: 30px var(--page-margin);
  position: relative;
  display: grid;
  gap: 5px;
  grid-template-columns: auto 125px;
}

.header-div-solution {
  grid-template-columns: auto 125px;
  margin-bottom: 10px;
}

.header-div-email-solution {
  margin-bottom: 10px;
}

.header-div h1 {
  padding: 0px;
  margin: 0px;
  font-family: Icebox0;
  font-size: 48px;
}

.email .header-div h1 {
    font-size: 35px;
}
.dc-icon-customizable {
    display: none;
}
.icons-container {
  margin-left: 12px;
  white-space: nowrap;
  font-weight: 400;
}

.puzzle-icon {
  height: 90px;
  width: 90px;
}

.flex-wrapper img.color-icon {
  width: 65px;
  margin-top: 4px;
}

.font-icon {
  display: inline-block;
  font-family: PuzzlehuntIcons;
  font-display: block;
  font-size: 20px;
  vertical-align: middle;
}

.meta-icon {
  font-family: Framingham;
  font-size: 30px;
  white-space: nowrap;
  text-align: right;
}

h1.solution-h1::before {
  content: "✔"; 
  font-size: 36px; 
  display: inline-block;
  vertical-align: top;
  color: var(--morning-green); 
}

.answer-div {
  color: var(--sunset-red);
  font-size: 18px;
  font-family: "IBM Plex Mono";
  font-weight: bold;
  text-transform: uppercase;
  text-align: right;
  margin-right: var(--page-margin);
}

.answer-div::before {
  color: var(--ink-black);
  font-size: 18px;
  font-weight: bold;
  text-transform: none;
  content: "Answer: ";
}

.content-div {
  width: var(--content-width);
  min-width: var(--content-width);
  max-width: var(--content-width);
  margin: var(--page-margin) var(--content-margin);
  padding: 0px;
  border: var(--content-border) solid #FFFFFF;
}

.flavor-text {
  font-family: OchreA, sans-serif;
  font-size: 17px;
  border: 2px solid #000000;
  border-radius: 4px;
  padding: 10px;
  margin-bottom: 16px;
}
body.regular .flavor-text {
  font-size: 17px;
  color: #00dd00;
  background-color: black;
}
body.preflight .flavor-text,
body.video .flavor-text,
body.email .flavor-text {
  font-family: Icebox, sans-serif;
  font-size: 18px;
  color: black;
  background-color: white;
  font-family: Icebox;
  font-size: 18px;
}
body.preflight .flavor-text {
  font-size: 21px;
}
body.meta .flavor-text {
  color: #f8e71c;
  background-color: black;
}
body.endgame .flavor-text {
  font-family: Icebox, sans-serif;
  font-size: 21px;
  color: #f8e71c;
  background-color: black;
}
.flavor-text .question {
  color: white;
}
.flavor-div {
    margin: 0 auto 16px auto;
    width: var(--content-width);
}
.mtop {
    margin-top: 16px;
}
.mbottom {
    margin-bottom: 16px;
}

.tile-container, .tile-centered {
    box-sizing: border-box;
}

.tile-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 16px;
}
.tile {
    position: relative;
    text-align: left;
}
.tile-centered {
    position: relative;
    text-align: center;
}
.tile-centered > * {
    margin-left: auto;
    margin-right: auto;
    text-align: left;
}

div {
    box-sizing: border-box;
}

pre {
    margin: 0;
}

p {
    margin: 0;
    margin-block-start: 16px;
    margin-block-end: 16px;
    margin-inline-start: 0px;
    margin-inline-end: 0px;
}

pre, tt {
  font-family: "IBM Plex Mono", monospace;
}

.puzzle-entry td div {
  font-family: "IBM Plex Mono", monospace;
}

.blue-givens td.given-text {
    color: var(--evening-blue);
}

.sans {
  font-family: "IBM Plex Sans", sans-serif;
}

.text-left {
    text-align: left;
}
.text-center {
    text-align: center;
}
.text-right {
    text-align: right;
}

/* Classes .hl-N apply to any cell it is applied to; .xhl-N only apply to extracted cells (#). */
.hl-0, .hl-yellow, 
.puzzle-entry td.hl-0, 
.puzzle-entry td.hl-yellow, 
.puzzle-entry td.extract.xhl-0, 
.puzzle-entry td.extract.xhl-yellow {
    background-color: var(--hl-yellow);
    background-image: url(icons/dot.svg);
    background-size: 4px;
    background-repeat: no-repeat;
    background-position: top left;
}
.hl-00, 
.puzzle-entry td.hl-00, 
.puzzle-entry td.extract.xhl-00 {
    background-color: var(--hl-yellow);
}
.hl-1, .hl-pink, 
.puzzle-entry td.hl-1,
.puzzle-entry td.hl-pink, 
.puzzle-entry td.extract.xhl-1,
.puzzle-entry td.extract.xhl-pink {
    background-color: var(--hl-pink);
    background-image: url(icons/dot.svg);
    background-size: 4px;
    background-repeat: no-repeat;
    background-position: top right;
}
.hl-2, .hl-purple, 
.puzzle-entry td.hl-2,
.puzzle-entry td.hl-purple, 
.puzzle-entry td.extract.xhl-2,
.puzzle-entry td.extract.xhl-purple {
    background-color: var(--hl-purple);
    background-image: url(icons/dot.svg);
    background-size: 4px;
    background-repeat: no-repeat;
    background-position: bottom right;
}
.hl-3, .hl-green, 
.puzzle-entry td.hl-3,
.puzzle-entry td.hl-green, 
.puzzle-entry td.extract.xhl-3,
.puzzle-entry td.extract.xhl-green {
    background-color: var(--hl-green);
    background-image: url(icons/dot.svg);
    background-size: 4px;
    background-repeat: no-repeat;
    background-position: bottom left;
}

/* Usable on any puzzle content */
.answer-red {
  color: var(--sunset-red);
  text-transform: uppercase;
  font-weight: bold;
}

.answer-blue {
  color: var(--evening-blue);
  text-transform: uppercase;
  font-weight: bold;
}


@media screen {
  .printed-page-break-before {
      margin-top: 20px;
  }
  .tile-container.printed-page-break-before,
  .tile-centered.printed-page-break-before {
      margin-top: 0px;
  }
  .print-only {
    display: none;
  }
}
@media not screen {
  .screen-only {
    display: none;
  }
}
.puzzle-reset-button, #button-reset {
    display: none !important;
}
.author-name {
    text-transform: none; 
    color: initial; 
    font-family: 'IBM Plex Serif'; 
    font-weight: normal;
}