@font-face {
  font-family: "Times-Dot-Italic";
  src: url("type/Times\ Dot-Italic.otf") format("opentype");
  font-style: italic;
}

@font-face {
  font-family: "Times-Dot-Rom";
  src: url("type/TimesDotRom.otf") format("opentype");
  font-weight: normal;
}

@font-face {
  font-family: "Times-Dot-Bol";
  src: url("type/TimesDotBol.otf") format("opentype");
  font-weight: bold;
}

body {
  margin-top: 0;
  font-family: "Times-Dot-Rom";
  background: linear-gradient(transparent, yellow, transparent);
}

.wrapper {
  position: relative;
  z-index: 9;
}

#perche {
  width: 60%;
  position: absolute;
  left:30em;
  bottom: 100px;
}

#dos {
  width: 40%;
  position: absolute;
  left:42em;
}

#couv {
  width: 40%;
  position: absolute;
  z-index: 1;
}

.what {
  font-size: 80pt;
}

p {
  margin: 0;
  line-height: 1em;
  text-indent: 0;
}

li {
  list-style-type: circle;
}


li:first-child {
  list-style-type: none;
  text-transform: uppercase;
  letter-spacing: 1.2em;
}

ul {
  line-height: 1;
  font-size: 80pt;
  padding-left: 1em;
  margin-top: 15px;
}

contenu a:link {
  text-decoration: none;
}

a:visited {
  text-decoration: none;
  color: black;
}

a:hover {
  text-decoration: none;
}

a:active {
  text-decoration: none;
}

#but {
  text-decoration: underline yellow;
  font-size: 80pt;
}

#regle {
  text-decoration: underline overline;
  font-style: italic;
  font-size: 80pt;
}

#date {
  text-align: center;
}

#wk,
#date,
#contenu {
  font-size: 80pt;
}

#explication {
  font-size: 40pt;
  background-color: whitesmoke;
  line-height: 1;
}

#wk {
  font-family: "Times-Dot-Bol";
  text-align: center;
}

footer {
  margin: 0;
  font-family: "Times-Dot-Rom";
  text-align: center;
  font-size: 25pt;
}

svg {
  stroke-width: 1.7;
}

hr {
  border-top: 4px dashed #000000;
  border-bottom: 1px dashed transparent;
}

img {
  filter: grayscale(1);
  text-align : center;
}