::selection {
  background-color: #555;
  color: #f5f5f5;
}
html {
  background-color: #f2f2f2;
  font-family: monospace, sans-serif;
  color: #555;
  font-size: 16px;
  font-family: monospace;
  min-width: 320px;
}
body {
  margin: 2rem auto 5rem;
  padding: 1.5rem calc(0.601rem * 8) 7.5rem;
  box-sizing: content-box;
  font-size: 1rem;
  line-height: 1.5rem;
  max-width: 80ch;
  box-shadow: 0 0.2rem 0.5rem rgba(0, 0, 0, 0.4);
  background-color: #bbb;
  background-image: repeating-linear-gradient(to bottom, #fff 0, #fff 1.5rem, #f5faf5 1.5rem, #f5faf5 calc(2 * 1.5rem));
  position: relative;
  overflow-x: hidden;
}
body::after,
body::before {
  position: absolute;
  content: "";
  background-image: url("../images/trous.svg");
  background-repeat: repeat-y;
  background-size: 30px 90px;
  background-color: #fff;
  background-position: center top;
  width: 50px;
  height: 100%;
  top: 0;
  left: 0;
  border-right: thin dotted #ddd;
}
body::after {
  left: unset;
  right: 0;
  border-right: none;
  border-left: thin dotted #ddd;
}
@media screen and (max-width: 500px) {
  body body {
    padding-top: 1.2rem;
    padding: 1.2rem calc(0.601rem * 4) 7.5rem;
    font-size: 0.8rem;
    line-height: 1.2rem;
    background-image: repeating-linear-gradient(to bottom, #fff 0, #fff 1.2rem, #f5faf5 1.2rem, #f5faf5 2.4rem);
  }
  body body::after,
  body body::before {
    background-size: 20px 60px;
    width: 30px;
  }
}
h1,
h2,
h3,
h4,
h5,
h6 {
  line-height: 1.5rem;
  padding: 0;
  margin: 1.5rem 0;
  font-size: 1rem;
  font-weight: 900;
}
@media screen and (max-width: 500px) {
  h1,
  h2,
  h3,
  h4,
  h5,
  h6 {
    line-height: 1.2rem;
    margin: calc(1.5rem * 0.8) 0;
    font-size: 0.8rem;
  }
}
h1 {
  margin: calc(1.5rem * 2) 0;
  text-transform: uppercase;
  text-align: center;
  outline: 2px dashed #7b7d7b;
}
@media screen and (max-width: 500px) {
  h1 {
    margin: calc(1.5rem * 1.6) 0;
  }
}
h2:after,
h2:before {
  content: " ====== ";
}
h3:after,
h3:before {
  content: " ##### ";
  font-weight: normal;
}
h4:after,
h4:before {
  font-weight: normal;
  content: " ++++ ";
}
h5:after,
h5:before {
  font-weight: normal;
  content: " === ";
  line-height: 1;
}
h6:after,
h6:before {
  font-weight: normal;
  content: " −− ";
}
hr {
  border-width: 0;
  padding: 0;
  margin: 3rem 0;
  height: 0;
  outline: dashed #7b7d7b 2px;
  outline-offset: -1px;
  transform: translateY(-1.5rem);
}
@media screen and (max-width: 500px) {
  hr {
    margin: 2.4rem 0;
    transform: translateY(-calc(1.2rem));
  }
}
p,
pre {
  line-height: inherit;
  padding: 0;
  margin: 1.5rem 0;
}
@media screen and (max-width: 500px) {
  p,
  pre {
    margin: calc(1.5rem * 0.8) 0;
  }
}
pre {
  overflow: hidden;
}
a {
  color: inherit;
}
a:focus,
a:hover {
  background-color: #555;
  background-color: #7b7d7b;
  color: #f5f5f5;
  text-decoration: none;
}
sub,
sup {
  vertical-align: baseline;
  line-height: 1rem;
}
@media screen and (max-width: 500px) {
  sub,
  sup {
    line-height: 0.8rem;
  }
}
sup {
  vertical-align: top;
}
ol,
ul,
menu {
  margin: 1.5rem 0;
}
@media screen and (max-width: 500px) {
  ol,
  ul,
  menu {
    margin: calc(1.5rem * 0.8) 0;
  }
}
ol li,
ul li,
menu li {
  counter-increment: listCounter;
  line-height: 1.5rem;
  display: block;
}
@media screen and (max-width: 500px) {
  ol li,
  ul li,
  menu li {
    line-height: 1.2rem;
  }
}
ol li::before,
ul li::before,
menu li::before {
  content: "• ";
}
ol > li::before {
  content: counter(listCounter) ". ";
}
table {
  margin: 1.5rem auto;
  border-collapse: collapse;
}
@media screen and (max-width: 500px) {
  table {
    margin: calc(1.5rem * 0.8) 0;
  }
}
table td,
table th {
  position: relative;
  padding: 1.5rem;
  line-height: 1.5rem;
  vertical-align: top;
  height: 1.5rem;
  border-collapse: collapse;
}
@media screen and (max-width: 500px) {
  table td,
  table th {
    padding: 1.2rem;
    line-height: 1.2rem;
    height: 1.2rem;
  }
}
table td::after,
table th::after {
  content: "";
  position: absolute;
  display: block;
  outline: 2px dashed #7b7d7b;
  height: auto;
  right: 2px;
  left: 0;
  top: 0;
  bottom: 2px;
}
form {
  margin: 1.5rem 0;
}
@media screen and (max-width: 500px) {
  form {
    margin: calc(1.5rem * 0.8) 0;
  }
}
fieldset {
  border-width: 0;
  border-left: 2px dashed #7b7d7b;
  padding: 1.5rem calc(0.601rem * 2) 0;
  margin: 1.5rem 0;
}
@media screen and (max-width: 500px) {
  fieldset {
    padding: calc(1.5rem * 0.8) calc(0.601rem * 2) 0;
    margin: calc(1.5rem * 0.8) 0;
  }
}
legend {
  line-height: 1.5rem;
}
@media screen and (max-width: 500px) {
  legend {
    line-height: 1.2rem;
  }
}
legend::before {
  content: "--- ";
  font-weight: bold;
  margin-left: calc(-0.601rem * 2);
}
input,
select {
  border-width: 0;
  outline: 2px dotted #7b7d7b;
  line-height: 1.5rem;
  padding: 0 0.75rem;
  font-family: inherit;
  font-size: 1rem;
  font-weight: bold;
  color: #555;
  background-color: transparent;
  margin: 0;
}
@media screen and (max-width: 500px) {
  input,
  select {
    font-size: 0.8rem;
    line-height: 1.2rem;
    padding: 0 0.375rem;
  }
}
input:focus-visible,
select:focus-visible {
  background-color: #7b7d7b;
  color: #f5f5f5;
}
input[type="button"],
select[type="button"] {
  background-color: #fff;
  font: inherit;
  padding: 0 1em;
  margin: 0 0 0 1em;
  border: none;
  outline: 2px dashed #7b7d7b;
  cursor: pointer;
}
input[type="button"]:hover,
select[type="button"]:hover {
  outline-color: #555;
}
input[type="button"]:active,
select[type="button"]:active {
  outline-color: #555;
  background-color: #f5f5f5;
}
input[type="button"][disabled],
select[type="button"][disabled] {
  outline-color: #7b7d7b;
}
input[type="checkbox"],
select[type="checkbox"],
input[type="radio"],
select[type="radio"] {
  outline: none;
}
@media screen and (max-width: 500px) {
  input[type="checkbox"],
  select[type="checkbox"],
  input[type="radio"],
  select[type="radio"] {
    font-size: 0.8rem;
  }
}
input[type="checkbox"]:checked,
select[type="checkbox"]:checked,
input[type="radio"]:checked,
select[type="radio"]:checked {
  accent-color: #7b7d7b;
}
input[type="checkbox"]:focus-visible,
select[type="checkbox"]:focus-visible,
input[type="radio"]:focus-visible,
select[type="radio"]:focus-visible {
  outline: 2px solid #7b7d7b;
  border-radius: 50%;
}
input option,
select option {
  background-color: transparent;
}
input:invalid::after,
select:invalid::after {
  content: "invalid";
}
button {
  background-color: #fff;
  font: inherit;
  padding: 0 1em;
  margin: 0 0 0 1em;
  border: none;
  outline: 2px dashed #7b7d7b;
  cursor: pointer;
  color: inherit;
}
button:hover {
  outline-color: #555;
}
button:active {
  outline-color: #555;
  background-color: #f5f5f5;
}
button[disabled] {
  outline-color: #7b7d7b;
}
kbd::before {
  content: "[";
}
kbd::after {
  content: "]";
}
label {
  line-height: 1.5rem;
  vertical-align: baseline;
}
@media screen and (max-width: 500px) {
  label {
    line-height: 1.2rem;
  }
}
details {
  padding: 0 calc(0.601rem * 5);
  border-left: solid #7b7d7b 2px;
}
details summary {
  margin-left: calc(-0.601rem * 4);
  cursor: pointer;
}
details summary:focus {
  outline: none;
}
details summary::marker {
  content: "▶ ";
  color: #7b7d7b;
}
details summary:hover::marker {
  color: #555;
}
details[open] {
  border-left-style: dashed;
}
details[open] summary::marker {
  content: "▼ ";
}
img {
  filter: contrast(100%) brightness(200%) grayscale(100%) opacity(1) blur(0.75px);
  mix-blend-mode: multiply;
  mask-image: url("../images/trame.svg");
  -webkit-mask-image: url("../images/trame.svg");
  margin: 0 auto;
  height: 24rem;
  display: block;
  box-shadow: 0 0 0 #000;
  outline: 0 solid #888888;
  transition: transform ease 0.2s, box-shadow ease 0.2s, outline ease 0.2s;
  transform-origin: right bottom;
}
@media screen and (max-width: 500px) {
  img {
    height: 12rem;
  }
}
figure {
  margin: 0;
  padding: 0;
}
figure figcaption {
  text-align: center;
}
samp,
small {
  line-height: 1.5rem;
  vertical-align: bottom;
}
meter {
  background-image: linear-gradient(#e6e6e6, #e6e6e6, #eeeeee 20%, #cccccc 45%, #cccccc 55%);
  background: #555;
}
mark {
  background-color: rgba(255, 255, 0, 0.4);
  color: #555;
}
video {
  margin: 0 0 1.5rem 0;
}
dd {
  list-style-type: ">> ";
  list-style-position: outside;
  display: list-item;
}
dt {
  list-style-type: "> ";
  list-style-position: inside;
  display: list-item;
}
blockquote {
  margin-left: 4ch;
  padding-left: 2ch;
  border-left: dashed 2px #7b7d7b;
}