:root {
  --first-letter: 2rem;
}

body {
  font-family: Georgia, serif;
  counter-reset: section;
  font-size: 1rem;
  max-width: 40rem;
  text-align: justify;
  text-justify: inter-character;
  line-height: 1.4rem;
  padding-left: 2rem;
  padding-right: 2rem;
  line-height: 1.6rem;
}
h1, h2, h3 {
  position: relative;
  left: -2rem;
}
h4 {
  position: relative;
  left: -1rem;
}
h3:before {
  counter-increment: section;
  content: counter(section)".";
}
h3 {
  margin-top: 3rem;
}
a:link, a:visited, a:hover, a:active {
  color: black;
  text-decoration: none;
}
a:hover {
  color: blue;
}

.red {
  color: red;
}

.green {
  color: green;
}

.blue {
  color: blue;
}

hr.fade-in-out {
	background-image: linear-gradient(to right, rgba(200, 200, 200, 0), rgba(10, 10, 10, 0.25), rgba(200, 200, 200, 0));
	border: 0 none;
	height: 0.1rem;
  margin-top: 4rem;
  margin-bottom: 4rem;
}

.clear {
  clear: both;
}

.clearfix {
  overflow: auto;
}

.clearfix::before, .clearfix::after {
  content: '';
  display: table;
}

.clearfix::after {
  clear: both;
}

.spacer {
  height: 4rem;
}

table, th, td {
  border: 1px solid;
  border-collapse: collapse;
  text-align: center;
  padding-left: 0.4rem;
  padding-right: 0.4rem;
}
th {
  padding-top: 0.2rem;
  padding-bottom: 0.2rem;
}

.no-margin {
  margin: 0;
}

.no-margin-wide {
  margin: 0;
}

.pcapital {
}

.pcapital:first-letter {
  font-size: var(--first-letter);
}

.pstart {
  margin-bottom: 0;
}

.pstart-noindent {
  margin-bottom: 0;
}

.pstart:first-letter {
  font-size: var(--first-letter);
}

.pmid {
  text-indent: 2rem;
  margin-top: 0;
  margin-bottom: 0;
}

.pmid-noindent {
  margin-top: 0;
  margin-bottom: 0;
}

.pend {
  text-indent: 2rem;
  margin-top: 0;
}

.pend-noindent {
  margin-top: 0;
  margin-bottom: 1rem;
}

/* monospace font */
.mono {
  font-family: monospace;
}

/* no line break */
.nlb {
	white-space: nowrap;
}

/* Overline */
.ol {
  text-decoration:overline;
}

/* functions */
.fn {
  font-family: monospace;
	white-space: nowrap;
}

/* float to the right to wrap with text */
.float-right {
  float: right;
  margin-left: 1rem;
  margin-bottom: 1rem;
}

.float-right-surrounded {
  float: right;
  margin-top: 1rem;
  margin-left: 1rem;
  margin-bottom: 1rem;
}

.float-left {
  float: left;
  margin-right: 1rem;
  margin-bottom: 1rem;
}

.float-left-surrounded {
  float: left;
  margin-top: 1rem;
  margin-right: 1rem;
  margin-bottom: 1rem;
}

.flex-row {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  padding-top: 1rem;
}

.flex-col {
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

@media only screen and (max-width: 449px) {
  body {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  h1, h2, h3 {
    position: relative;
    left: -1rem;
  }
  h3 {
    margin-top: 2rem;
  }

  .clearfix-narrow:before,.clearfix-narrow:after {
    content: " ";
    display: table;
  }
  .clearfix-narrow:after {
    clear: both;
  }
  .float-left, .float-right,
  .float-right-surrounded,
  .float-right-surrounded{
    float: none;
  }
  .flex-col-narrow {
    display: flex;
    flex-flow: wrap;
  }
  .flex-row-narrow {
    display: flex;
    flex-flow: wrap;
    gap: 0.5rem;
  }
  .no-margin-wide {
    margin-top: 1rem;
  }
}

@media only screen and (min-width: 721px) {
  body {
    padding-left: 5rem;
    padding-right: 2rem;
  }

  h1, h2, h3 {
    position: relative;
    left: -5rem;
  }
  h4 {
    position: relative;
    left: -2.5rem;
  }

  h3 {
    margin-top: 6rem;
    margin-bottom: 4rem;
  }
}