@import url('https://fonts.googleapis.com/css2?family=Iosevka+Charon+Mono:ital,wght@0,300;0,400;0,500;0,700;1,300;1,400;1,500;1,700&family=Overpass:ital,wght@0,100..900;1,100..900&display=swap');
/* Before this line, a CSS @import will be added by main.py */

/* templates/main.css
 * Copyright 2026 Christopher Phan <https://chrisphan.com/>
 * 2026-W27
 * SPDX-License-Identifier: MIT
 */

:root {
  --main-font: "Overpass", sans-serif;
  --mono-font: "Iosevka Charon Mono", monospace;
  --background-color: white;
  --text-color: black;
  --sign-background-color: #168847;
  --sign-background-hover: #034063;
  --sign-text-color: white;
  --sign-border-radius: 20px;
  --hover-color-delay: 500ms ease-in-out;
}

q:before {
  content: "“";
}

q:after {
  content: "”";
}

body {
  margin-left: 4em;
  margin-right: 4em;
  margin-top: 3em;
  margin-bottom: 3em;
  background-color: white;
  color: black;
  font-family: var(--main-font);
  font-size: 12pt;
  line-height: 1.3;
}

figure {
  float: right;
  margin: 1em;
}

p {
  text-indent: 2em;
}

sub {
  vertical-align: sub;
  font-size: 75%;
}

sup {
  vertical-align: super;
  font-size: 75%;
}

img {
  max-width: 100%;
}

hr {
  color: #066;
  border-bottom: thin solid white;
}

h1.title {
  font-size: 3em;
  font-weight: bold;
  text-align: center;
  padding-bottom: 1em;
  padding-top: 1em;
  border: thick solid var(--sign-text-color);
  border-radius: var(--sign-border-radius);
}

.roadsign {
  background-color: var(--sign-background-color);
  color: var(--sign-text-color);
  padding: 5px;
  border-radius: var(--sign-border-radius);
}

.subtitle {
  font-size: 0.5em;
  padding-top: 1em;
}

.author {
  padding-top: 1em;
  font-size: 0.6em;
}

.main_map svg {
  max-height: 90vh;
}

.copyright_footer {
  text-indent: 0;
  border: thick solid var(--text-color);
  border-radius: var(--sign-border-radius);
  padding: 1em;
}

h1 {
  font-size: 1em;
  font-weight: bold;
  padding-top: 1em;
  padding-bottom: 0.5em;
  break-after: avoid;
}

h2 {
  font-size: 1em;
  font-weight: bold;
  padding-top: 1em;
  padding-bottom: 0.5em;
  break-after: avoid;
}

h3 {
  font-size: 1em;
  font-style: italic;
  text-indent: 0.5em;
  padding-top: 0.5em;
  padding-bottom: 0.25em;
}

b,
strong,
i,
em,
cite,
tt,
code,
img,
span {
  display: inline;
}

ul,
ol {
  margin-top: 0.25em;
  margin-bottom: 0.25em;
  margin-left: 1em;
}

ul {
  list-style: square outside;
}

ol {
  list-style: decimal outside;
}

ol ol {
  list-style: lower-alpha outside;
}

ol ol ol {
  list-style: lower-roman outside;
}

ul ul {
  list-style: disc outside;
}

ul ul ul {
  list-style: "- " outside;
}

li {
  display: list-item;
  padding-top: 2px;
}

b,
strong {
  font-weight: bold;
}

i,
em {
  font-style: italic;
}

cite {
  font-style: italic;
}

tt,
code,
pre,
.aurl,
.filename {
  font-family: var(--mono-font);
}

blockquote {
  padding: 0.25em;
  margin-left: 2em;
  color: black;
  background-color: #ccc;
}

table {
  border-collapse: collapse;
}

table,
td,
th {
  border: none;
  padding-right: 12px;
  padding-left: 2px;
  padding-bottom: 5px;
  padding-top: 5px;
  text-align: left;
}

td {
  padding: 0.5em;
}

th {
  font-weight: bold;
  border-bottom: thick black solid;
}

tr:nth-child(odd) {
  background-color: #eee;
}

tr:nth-child(even) {
  background-color: #ccc;
}

nav {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
}

nav a {
  text-decoration: none;
  padding: 0.5em;
  margin: 0.5em;
  font-size: 1.25em;
  background: var(--sign-background-color);
  color: var(--sign-text-color);
  border-radius: var(--sign-border-radius);
  transition: var(--hover-color-delay);
}

nav a:hover {
  background: var(--sign-background-hover);
}

#previous {
  text-align: left;
  grid-column: 1;
}

#next {
  text-align: right;
  grid-column: 3;
}

#toc_nav {
  text-align: center;
  grid-column: 2;
}

#previous .nav_label::before {
  content: "\002b05 ";
  text-decoration: none;
  padding-right: 1em;
}

#next .nav_label::after {
  content: " \002b95";
  text-decoration: none;
  padding-left: 1em;
}

#toc_nav .nav_label::before {
  content: "\002b06 ";
  text-decoration: none;
  padding-right: 1em;
}

.aurl::before {
  content: "<";
}

#entirebook #title_photo {
  display: none;
}

.aurl::after {
  content: ">";
}

.print_only {
  display: none;
}

.toc_middle,
.toc_page_num {
  display: none;
}

#entirebook .standalone_link {
  display: none;
}

@media print {
  body {
    margin: 0.25in;
    background-color: white;
    color: black;
    font-size: 10pt;
    line-height: 1;
    max-width: 6.5in;
    min-width: 6.5in;
  }

  .no_print {
    display: none;
  }

  .print_only {
    display: block;
  }
  a,
  a:link,
  a:visited {
    color: black;
    text-decoration: none;
  }

  #CE_source {
    padding-top: 2em;
  }
  #about,
  #toc {
    break-before: page;
  }

  .state_name {
    padding-top: 0em;
    padding-bottom: 1em;
    margin-top: 0em;
    margin-bottom: 0em;
    font-size: 1.25em;
  }

  .author {
    padding-top: 10em;
    font-size: 0.6em;
  }

  .main_map svg {
    height: 10in;
    padding-top: 0em;
    padding-bottom: 0em;
    margin-top: 0em;
    margin-bottom: 0em;
  }

  .main_map {
    break-after: avoid;
    padding-top: 0em;
    padding-bottom: 0em;
    margin-top: 0em;
    margin-bottom: 0em;
  }

  .copyright_footer {
    padding-top: 0em;
    padding-bottom: 0em;
    margin-top: 0em;
    margin-bottom: 0em;
    border: none;
  }

  #titlepage .copyright_footer,
  nav,
  .standalone_link {
    display: none;
  }

  .toc_item {
    display: grid;
    font-size: 0.8em;
    grid-template-columns: 5fr 5fr 1fr;
    border-bottom: thin dotted black;
  }

  .toc_listing {
    grid-column: 1;
    text-align: left;
  }

  .toc_middle {
    grid-column: 2;
    display: block;
  }

  .toc_page_num {
    grid-column: 3;
    text-align: right;
    display: block;
  }

  #entirebook .state_name,
  #entirebook #back_cover {
    break-before: page;
  }

  #entirebook #back_cover .copyright_footer {
    padding-top: 8in;
  }

  h1.title {
    border: thick solid var(--text-color);
  }

  .roadsign {
    background-color: var(--background-color);
    color: var(--text-color);
    border-radius: 20px;
  }
}

@page :left {
  font-family: var(--main-font);
  counter-increment: pageNumber 1;
  @bottom-left {
    content: counter(pageNumber);
  }
  @bottom-right {
    content: "Color the Counties (or Equivalents)";
  }
}
@page :right {
  font-family: var(--main-font);
  counter-increment: pageNumber 1;
  @bottom-left {
    content: "Phan";
  }
  @bottom-right {
    content: counter(pageNumber);
  }
}

@page :first {
  counter-reset: pageNumber 0;
  @bottom-left {
    content: "";
  }
  @bottom-right {
    content: "";
  }
}

@page #back_cover {
  @bottom-left {
    content: "";
  }
  @bottom-right {
    content: "";
  }
}