/************************************************************************************
 * Stuff that got split out for organizational purposes
 ************************************************************************************/
@import url(./base-print.css);
@import url(./nav.css);
@import url(./map.css);
/* @import url(./base-old.css); */

/************************************************************************************
 * Vars, base structure
 ************************************************************************************/

html {
  /* colors */
  --bg-color-top: #5e7678; /*#98acae;*/
  --bg-color-bottom: #d1cfb8; /* #fffcdf; */
  --content-frame-color: #fff8e7;
  --btn-hover-color: #f7dd9c;

  --text-color-light: #fff8e7;
  --text-color-dark: #1e3353;
  --text-color-link: #5e7678;

  /* size breaks */
  --max-width: 960px;

  /* misc */
  --main-bg: linear-gradient(var(--bg-color-top), var(--bg-color-bottom));
  --input-font: 'Red Hat Mono', monospace;
  --answer-font: 'Red Hat Mono', monospace;
}

body {
  font-family: 'Red Hat Text', sans-serif;
  font-optical-sizing: auto;
  font-weight: 400;
  font-style: normal;
  font-variation-settings: 'wdth' 100;
  font-variant-ligatures: none;
  line-height: 2.6rem;
  font-size: 1.75rem;
  overflow-wrap: break-word;
  position: relative;
  color: var(--text-color-dark);
}

main {
  padding: 20px 30px;
  position: relative;
}

@media screen {
  body {
    background-image: var(--main-bg);
    min-height: 100vh;
  }

  main {
    display: table;
    min-width: 100%;
    box-sizing: border-box;
    background-color: var(--content-frame-color);
    position: relative;
  }

  .content {
    margin: 0 auto 60px;
    padding: 20px;
    max-width: var(--max-width);
    min-height: 80vh;
    /* background-image: url('https://www.transparenttextures.com/patterns/paper.png'); */
  }
}

.pagechunk {
  display: table;
  min-width: 100%;
  box-sizing: border-box;
  background-color: var(--content-frame-color);
  padding: 20px 30px;
  margin-bottom: 4rem;
  position: relative;
}

footer {
  text-align: center;
  opacity: 0.5;
  font-size: 80%;
  padding-bottom: 10px;
}

/************************************************************************************
 * Text stuff
 ************************************************************************************/
a {
  color: var(--text-color-link);
}

.victory a {
  color: var(--text-color-dark);
}

.victory a:hover {
  color: var(--btn-hover-color);
}

code {
  padding: 0.2rem 0.5rem;
  margin: 0 0.2rem;
  font-size: 90%;
  white-space: nowrap;
  background: #f1f1f1;
  border: 1px solid #e1e1e1;
  border-radius: 4px;
}

code,
pre {
  font-family: 'Red Hat Mono', monospace;
}

.flavor {
  text-align: center;
  font-size: 1.8rem;
  line-height: 1.5;
  letter-spacing: -0.05rem;
  font-style: italic;
}

h1 {
  text-align: center;
  text-transform: uppercase;
  font-size: 3.5rem;
}

/* h1 -- page headers, titles, etc. use in a separate block */
h1 {
  background-color: var(--content-frame-color);
  padding: 2rem;
  margin-top: 2.5rem;
  margin-bottom: 4rem;
  line-height: 1.2;
  font-weight: 300;
}

/* h4 -- page subheaders. use in a separate block */
h4 {
  text-align: center;
  background-color: var(--content-frame-color);
  padding: 2rem;
  margin: 1.5rem 0;
  line-height: 1.2;
  font-weight: 300;
}

/* h2, h3, h5 -- header-level emphasis within blocks */
h2,
h3,
h5 {
  margin-top: 2rem;
  font-weight: bold;
}

/************************************************************************************
 * tables
 ************************************************************************************/

.list-table tr:last-child td {
  border-bottom: none;
}

.list-table {
  min-width: 100%;
  max-width: 100%;
  table-layout: fixed;
}

.list-table td,
.list-table th {
  padding: 4px 8px;
  word-break: break-word;
  overflow-wrap: anywhere;
}

@media screen {
  .list-table th {
    border: none;
    position: sticky;
    top: 0;
    box-shadow: inset 0 -1px 0 0 var(--main-primary);
  }
}

/************************************************************************************
 * Buttons 
 ************************************************************************************/

.btn,
.btn-outline {
  display: inline-block;
  padding: 0 20px;
  text-decoration: none;
  font-weight: bold;
  border-radius: 5px;
  font-family: 'Red Hat Text', sans-serif;
  text-transform: none;
  letter-spacing: 0;
  line-height: 30px;
  font-size: 1.5rem;
  vertical-align: center;
  text-transform: uppercase;
}

.btn-outline {
  border: solid #bbb;
  border-width: 1px;
}

@media screen {
  .btn {
    transition: background-color 0.3s;
    color: var(--font-link-light);
    background-color: var(--content-frame-color);
    border: none;
  }

  .btn:hover,
  .btn:focus,
  .btn-outline:hover,
  .btn-outline:focus {
    color: var(--font-link-light);
    background-color: var(--btn-hover-color);
    border-color: transparent;
  }
}

/************************************************************************************
 * Puzzle list display 
 ************************************************************************************/

.map {
  margin-bottom: 2rem;
}

.puzzles-list {
  font-size: 2.4rem;
  width: 100%;
}

.puzzles-list a {
  text-decoration: none;
}

.puzzles-list h1 {
  margin: 0;
}

.puzzles-list th {
  border: none;
}

.puzzles-list tbody:not(:first-child) th {
  padding-top: 2em;
}

.puzzles-list td {
  border: none;
  padding-left: 0;
  padding-right: 0.5ch;
  vertical-align: top;
  word-break: break-word;
  overflow-wrap: anywhere;
}

.puzzles-list td:nth-child(2) {
  width: 0;
  white-space: nowrap;
}

.puzzles-list td:last-child {
  padding-right: 0;
}

.puzzles-new {
  display: inline-block;
  font-size: 1.2rem;
  padding: 0 0.5rem;
  border-radius: 0.5rem;
  vertical-align: top;
  background-color: var(--btn-hover-color);
  text-transform: uppercase;
}

.puzzles-new::first-letter {
  font-size: 1.5rem;
}

/*
.puzzles-answer {
  font-family: var(--answer-font);
}
*/

/************************************************************************************
 * Puzzle pages
 ************************************************************************************/

.solved-title-marker {
  font-size: 60%;
  color: var(--neutral-color);
}

.solved-title-answer {
  color: #4a2;
  font-family: var(--answer-font);
  font-weight: bold;
}

.solved-prefix {
  display: inline-block;
  border-radius: 1rem;
  padding: 0 1rem;
  background-color: var(--btn-hover-color);
  text-transform: uppercase;
  font-weight: bold;
}

.puzzle-erratum {
  color: #c32;
  margin-bottom: 1rem;
}

/************************************************************************************
 * Registration page
 ************************************************************************************/

.errorlist {
  background-color: red;
  color: var(--text-color-light);
}

.errorlist li {
  margin-bottom: 0;
  list-style-type: none;
  text-indent: 0;
  padding-left: 0;
}

/************************************************************************************
 * Copy to clipboard
 ************************************************************************************/

.copy-only {
  display: none;
}

.clipboard-button {
  border-radius: 50%;
  bottom: 1.5em;
  box-shadow: 0.1em 0.1em 0.5em var(--info-bg-color);
  font-size: 2em;
  height: 2.25em;
  position: fixed !important;
  right: 1.5em;
  width: 2.25em;
  padding: 0;
  z-index: 100; /* Needed so hover & click work even when button floats outside of its parent. */
}