/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
   
   @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:ital,wght@0,100..800;1,100..800&display=swap');
   @import url('https://fonts.googleapis.com/css2?family=Bpmf+Zihi+Kai+Std&display=swap');

body {
  background-color: #ffd6eb;
  color: #006e44;
  font-family: 'JetBrains Mono', mono;
  font-size: 11pt;
  font-weight: 300;
  max-width: 1000px;
  margin: auto;
  padding: 1em;
  line-height: 1.5;
}
a {
  color: red;
  text-decoration: none;
}
b {
  line-height: 1.8;
  font-weight: 600;
}
h1 {
  font-family: 'Bpmf Zihi Kai Std', serif;
  font-size: 40pt;
}
h2 {
  font-size: 24pt;
  font-weight: 500;
  text-transform: uppercase;
  margin-top: 0.5em;
}
h3 {
  font-family: 'Bpmf Zihi Kai Std', serif;
  font-size: 34pt;
  margin-bottom: 0;
}
h4 {
  font-family: 'Bpmf Zihi Kai Std', serif;
  font-size: 18pt;
  margin-bottom: 0.75em;
}
h5 {
  font-weight: 500;
}
h6 {
  color: #006e44;
  font-size: 10pt;
  font-weight: 300;
}
hr {
  border: 0;
  border-top: 1px dashed #006e44;
}
img {
  pointer-events: none;
}
li {
  margin-bottom: 0.5em;
}
blockquote {
  color: red;
  border-top: 1px dotted red;
  border-bottom: 1px dotted red;
  font-style: italic;
  padding: 1em 1em 1em 0;
  margin: 1em 1em 1em 0;
  text-align: center;
}
blockquote a {
  font-style: normal;
  color: #006e44;
  font-weight: 400;
}

.table-container {
  border: 1px solid #cce2da;
  overflow: auto;
}
table {
  border-collapse: collapse;
  width: 100%;
  font-weight: 400;
  table-layout: auto;
}

td, th {
  border: 1px solid #cce2da;
  padding: 8px;
  text-align: center;
}

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

tr:hover {background-color: #cce2da;}

th {
  padding-top: 12px;
  padding-bottom: 12px;
  background-color: #1a7d57;
  color: white;
  position: sticky;
  z-index: 2;
  top: 0;
}

.header-img img {
  max-width: 600px;
  max-height: 400px;
  box-shadow: 0 0 2px #333;
}
.archive {
  display: flex;
  max-width: 380px;
  border: 1px solid #006e44;
  box-shadow: 10px 10px #006e44;
  margin: 1em;
  padding: 2em;
  text-align: left;
}
.archive .scroll {
  height: 500px;
  overflow-y: scroll;
  scrollbar-color: red transparent;
  padding-right: 1.5em;
}
.archive .timeline li::before {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0.1rem;
  width: 0.5rem;
  height: 0.5rem;
  background: #ebebeb;
  border: 1px solid red;
  border-radius: 999px;
}
.articles {
  border: 1px solid #006e44;
  border-radius: 4px;
  margin: 0 0 2em 0;
  padding: 0 1.5em 1em 2em;
  text-align: left;
  width: 400px;
  font-weight: 400;
}
.articles li {
  display: flex;
  align-items: flex-start;
  border-bottom: 1px dotted #006e44;
  padding: 0.25rem 0 0.25rem 0;
}
.articles p {
  margin-bottom: 0;
  padding-bottom: 0.3rem;
}
.articles h3 {
  font-size: 26pt;
}
.articles h2 {
  font-size: 18pt; 
  font-weight: 400; 
  margin-top: 0;
} 
.articles svg {
  max-width: 24px;
  max-height: 24px;
  padding-right: 0.5em;
}
.articles a {
  color: #006e44;
}
.articles a:hover {
  color: red;
}

.box {
  width: 400px;
}

.container {
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
}
.container-2 {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 2em;
}
.container div {
  display: flex;
  margin: auto;
  min-width: 0;
  min-height: 0;
}

.container-col {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.container-book {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: flex-start;
  flex-wrap: wrap;
  gap: 3em;
  height: 600px;
  background-color: #fffbf9;
  box-shadow: 0 0 4px #807570;
  border-radius: 4px;
  margin: 0 1em 0 1em;
  color: #333;
  background-image: 
    linear-gradient(#ffd9d9 1px, transparent 1px),
    linear-gradient(90deg, #ffd9d9 1px, transparent 1px);
  background-size: 25px 25px;
}
.container-book hr {
  border-top: 1px solid red;
}
.container-book p {
  font-size: 10pt;
  margin: 0;
  max-width: 150px;
  text-align: center;
  font-weight: 400;
}
.box .wrapper {
  margin: 0;
}
.spine {
  border-left: 1px solid #ccc;
  box-shadow: 0 0 5px #807570;
  height: 600px;
  position: relative;
  margin-left: -3px;
  top: 0;
}

div img {
  max-width: 600px;
  max-height: 400px;
}

.icons {
  column-count: 2;
  column-gap: 1em;
}
.icons li {
  display: flex;
  align-items: flex-start;
  border-bottom: 1px dotted #006e44;
  padding: 0.25rem 0 0.25rem 0;
}
.icons p {
  margin-bottom: 0;
}
.icons svg {
  max-width: 24px;
  max-height: 24px;
  padding-right: 0.5em;
}
.icons a {
  color: #006e44;
}
.icons a:hover {
  color: red;
}

.link {
  font-size: 36pt;
  margin: 0;
  padding-bottom: 0.35em;
  line-height: 0.9;
}
.link a {
  color: #006e44;
}
.link a:hover {
  color: red;
}
.link-text {
  color: red;
  font-size: 10pt;
  font-weight: 300;
}
.media img {
  max-width: 200px;
  max-height: 200px;
}
.note::before {
  display: inline-block;
  content: '';
  position: static;
  margin-left: 9em;
  margin-top: -1.5em;
  background-color: #ff6e63;
  border-radius: 50%;
  box-shadow: 0px 0px 3px #7a3935;
  height: 2.75em;
  width: 2.75em;
}
.note {
  display: block;
  border: none;
  border-radius: 4px;
  background-color: #faf9de;
  box-shadow: 0 0 5px #999;
  color: #333;
  margin: 2em 1em 1em 1em;
  padding: 0 2em 2em 2em;
  text-align: left;
  width: 300px;
  background-image: 
    linear-gradient(#ccc 1px, transparent 1px),
    linear-gradient(90deg, #ccc 1px, transparent 1px);
  background-size: 20px 20px;
}
.note h3 {
  font-size: 26pt;
}
.note h2 {
  font-size: 18pt; 
  font-weight: 400; 
  margin-top: 0;
}

p {
  margin: 0 0 1em 0;
}

.scallop-border {
  border-image-source: url(/images/doily.png);
  border-bottom-style: solid;
  border-bottom-width: 7px;
  border-image-outset: 0;
  border-image-repeat: round;
  border-image-slice: 7 fill;
  border-image-width: 1;
  border-left-style: solid;
  border-left-width: 7px;
  border-right-style: solid;
  border-right-width: 7px;
  border-top-style: solid;
  border-top-width: 7px;
}
.scalloped-box {
  margin-bottom: 2em;
  --r: 8px; /* radius of circles */
  width: 400px;
  aspect-ratio: 1;
  padding: calc(1.5*var(--r));
  background: white;
  box-shadow: 0 0 5px #666;
  mask: 
    linear-gradient(#000 0 0) no-repeat
     50%/calc(100% - 2*var(--r)) calc(100% - 2*var(--r)), 
    radial-gradient(farthest-side,#000 97%,#0000) 
     0 0/calc(2*var(--r)) calc(2*var(--r)) round;
}
@media screen and (max-width: 600px) {
.scalloped-box {
  max-width: 90%;
  }
}

.scroll {
  height: 360px;
  overflow-y: scroll;
  scrollbar-color: red transparent;
}

.status {
  border: 1px solid #006e44;
  border-radius: 4px;
  margin: 2em;
  padding: 2em;
  text-align: left;
}
.status-text {
  border: 1px solid #006e44;
  border-radius: 4px;
  margin: 0 1em 1em 0;
  padding: 1em;
  text-align: left;
}

.text {
  column-count: 2;
  column-gap: 1em;
}

.timeline {
  margin-block: 2em;
}
.timeline ul {
  list-style: none;
  margin: 0;
  padding: 0;
  position: relative;
  font-size: 12pt;
}
.timeline ul::before {
  content: "";
  position: absolute;
  top: 0.25em;
  bottom: 0.25em;
  left: 0.35rem;
  width: 1px;
  background: color-mix(in srgb, red 40%, transparent);
}
.timeline li {
  position: relative;
  padding-inline-start: 2rem;
  margin-block: 2em;
}
.timeline li::before {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0.1rem;
  width: 0.5rem;
  height: 0.5rem;
  background: white;
  border: 1px solid red;
  border-radius: 999px;
}
.timeline li > :last-child {
  margin-block-end: 0;
}
.timeline h3 {
  font-family: 'Bpmf Zihi Kai Std', serif;
  font-size: 20pt;
  margin-top: 0;
}
.timeline h4 {
  margin: 0 0 0.4em;
  font-size: 0.95em;
  line-height: 1.2;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: red;
  font-family: 'JetBrains Mono', mono;
}
.timeline h4 + p {
  margin-block-start: 0.7em;
}
.timeline p {
  font-size: 11pt;
  margin-bottom: 0.5em;
}

.timestamp {
  color: red;
  font-size: 9pt;
  text-transform: uppercase;
  margin: 1em 0 1em 0;
  text-align: right;
  border-top: 1px dotted #006e44;
  padding: 0.5em 0 0 0;
}

.todo-list {
  margin: 0.5rem 0 1rem 0;
}
.todo-list ul {
  list-style-position: outside;
  margin: 0;
  padding: 0 0 0 1.4rem;
}
.todo-list ul li::marker {
  content: "☐ ";
  font-size: 1.25em;
}
.todo-list ol {
  list-style-position: outside;
  margin: 0;
  padding: 0 0 0 1.35rem;
}
.todo-list ol li::marker {
  content: "☑ ";
  font-size: 1.2em;
}

.wrapper {
  margin: 0em 2em 2em 2em;
}
.wrapper h3 {
  font-size: 26pt;
}
.wrapper h2 {
  font-size: 18pt; 
  font-weight: 400; 
  margin-top: 0;
}

/* Mobile */
@media screen and (max-width: 768px) {
.container div {
  gap: 0;
  overflow: hidden;
}
img {
  width: 50%
 }
.articles {
  width: 95%;
}
.box {
  width: 75%;
  align-content: center;
}
.container-2 {
  margin-left: 1em;
  margin-right: 1em;
  gap: 0;
 }
 .container-2 .container-col {
   margin-top: 1em;
 }
 .container-book {
   height: 100%;
 }
 .main {
   width: 200px;
 }
 div img {
   width: 200px;
 }
.icons {
   column-count: 1;
 }
 .link {
   padding: 3px;
 }
 .media img {
   width: 100%;
 }
 .table-container {
   height: 400px;
 }
 .text {
   column-count: 1;
 }
 .spine {
   display: none;
 }
}