/* CSS for Paged.js interface */

/* Change the look */
:root {
    --color-background: whitesmoke;
    --color-pageBox: #666;
    --color-paper: white;
    --color-marginBox: transparent;
    --color-main: #354496;
    --pagedjs-width: 1080px;
    --pagedjs-height: 1080px;
    --pagedjs-width-right: 1080px;
    --pagedjs-height-right: 1080px;
    --pagedjs-width-left: 1080px;
    --pagedjs-height-left: 1080px;
    --baseline: 20px;
    --marginbaseline: 30px;
    --text-base: 1rem;    /* 16px */
    --text-lg: 1.25rem;   /* 20px */
    --text-xl: 1.5rem;    /* 24px */
    --text-2xl: 4.25rem;  /* 36px */
    --text-3xl: 6.375rem; /* 54px */
    --c1: #f0f8ff;
    --c2: var(--color-main);
}

@page:left {
  @bottom-left {
      content: "";
  }
}

@page:right {
  @bottom-right {
      content: "";
  }
}

body {
  font-size: 180%;
}

.pagedjs_page {
  --pagedjs-pagebox-width: 1080px !important;
  --pagedjs-pagebox-height: 1080px !important;
}

header {
  width: 100%;
}

.pagedjs_sheet {
  color: var(--color-main);
  /*background: rgb(0,127,255);*/
  /*background: linear-gradient(159deg, rgba(0,0,0,1) 0%, rgba(0,0,0,1) 100%);*/
}

header h1, header p {
  color: var(--color-main);
  width: max-content;
  max-width: 90%;
  line-height: 1.1;
}

h1,h2 {
  line-height: 1.2;
  margin-bottom:1.5em;
}

h1 {
  margin-top: 1em;
}

h2 {
  display: flex;
  align-items: center;
  min-height: 3.5em;
}

h1::before {
  position: absolute;
  right: -50px;
  bottom: -90px;
  content: "";
  width: 80%;
  height: 50px;
  background: url("../images/pen-brushes.svg");
  transform: rotate(-3deg);
}

h2 {
  background: url("../images/pen-brushes.svg");
}

.chapter:has(:not(:nth-child(5))) h2 {
  break-before: page;
}

h3 {
  font-size: 3.5rem !important;
}

p {
  font-size: 3.5rem !important;
}

ul {
  font-size: 3rem !important;
}

strong {
  font-weight: bold;
}

.author {
  font-size: 1.5em;
}

.chapter {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  min-height: 960px;
}

p {
  margin: 0.2em 0;
  font-size: var(--text-2xl);
  font-weight: 500;
  line-height: 1.3;
}

img {
  width: 100%;
}

blockquote {
  position: relative;
  margin: 2em 0 0;
  padding-left: 1.5em;
  font-size: 140%;
  border-color: #fff;
  background: transparent;
  border: none;
  box-shadow: none;
}

blockquote p {
  font-size: 3.2rem !important;
  font-weight: 300;
}

blockquote p:has(em) {
  display: block;
}

hr {
  break-before: page;
}

.chapter:has(:only-child) {
  justify-content: center;
}

.chapter hr:has(+ *) {
  display: none;
}

.chapter input[type="checkbox"] {
  width: 30pt;
  height: 30pt;
  /* Not removed via appearance */
  margin: 0;
  margin-left: 2rem;
  border: 1px solid;
  -webkit-appearance: none;
  appearance: none;
  color: currentColor;
  /* For iOS < 15 to remove gradient background */
  background-color: CanvasText;
  background-color: #fff;
  border: 0.15em solid currentColor;
  border-radius: 5pt;
  transform: translateY(-0.075em);
}

.chapter input[type="checkbox"]:checked {
  background: none;
  border: 0.15em solid currentColor;
}

input[type="checkbox"]::before {
  display: block;
  content: "";
  width: 30pt;
  height: 30pt;
  background: currentColor;
  transform: scale(0);
  transition: 120ms transform ease-in-out;
}

input[type="checkbox"]:checked::before {
  transform: scale(0.8);
  clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%);
}

blockquote {
	padding: 2.5rem 6rem 6rem;
	margin: 4rem 2rem;
	font-size: 1.6rem;
	background: conic-gradient(from 180deg at 100% calc(100% - 1rem), var(--c2) 0 25%, #fff0 0 100%), conic-gradient(from 180deg at 1rem 50%, var(--c2) 0 25%, #fff0 0 100%), conic-gradient(from 0deg at calc(100% - 1rem) 50%, var(--c2) 0 25%, #fff0 0 100%), conic-gradient(from 0deg at 0rem 1rem, var(--c2) 0 25%, #fff0 0 100%);
}

blockquote:before,
blockquote:after {
	content: "";
	font-size: 40%;
}

blockquote p:after {
	margin-right: 2rem;
	flex-direction: row;
	flex-wrap: nowrap;
	align-items: flex-start;
	content: " ";
	display: inline-flex;
	background: #f000;
	width: 8rem;
	height: 3rem;
}

blockquote p:has(em) em, blockquote p:has(strong) strong {
	font-weight: bold;
	position: absolute;
	bottom: 2.5rem;
	background: var(--c2);
	color: var(--c1);
	right: 8rem;
	padding: 0.5rem 1rem;
  font-size: 1.8rem;
}