@font-face {
  font-family: IMFellEnglishSC;
  src: url(/style/fonts/IMFellEnglishSC-Regular.ttf);
}

@font-face {
  font-family: IMFellGreatPrimer;
  src: url(/style/fonts/IMFellGreatPrimer-Regular.ttf);
}

@font-face {
  font-family: PermanentMarker-Regular;
  src: url(/style/fonts/PermanentMarker-Regular.ttf);
}

body {
  font-family: IMFellGreatPrimer;
  font-size: 1.5em;

  background: rgb(149, 219, 255);
  background-image: url('/images/Left-margincritters-grey.png'), url('/images/Right-margincritters-grey.png'), linear-gradient(to bottom, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 1) 100%);
  background-position: top left, top right;
  background-size: 10%, 10%, 100%;
  background-repeat: repeat-y;
  color: #28170b;

  margin: 0px;
  padding-top: 0px;
}

div.main {
  margin-top: 0;
  margin-bottom: 0;
  margin-left: 10%;
  margin-right: 10%;
}

div.main-title {
  position: relative;
  margin: 0;
  background-color: #e2af72;
  background-image: url('/images/distressed-paper.jpg');
  background-size: cover;
  padding-left: 0;
  padding-right: 0;
  padding-top: .6em;
  padding-bottom: .6em;
  z-index: 0;
}

div.main-title::before {
  content: "";
  position: absolute;
  z-index: -1;
  background-image: url('/images/triskelion-of-beasts.png');
  background-position: 50% 25%;
//center;
  background-size: cover;
  top: 0px;
  right: 0px;
  bottom: 0px;
  left: 0px;
  opacity: 20%;
}

div.main-body {
  margin: 0;
  padding-top: 3em;
  padding-bottom: 1em;
  padding-left: 2em;
  padding-right: 2em;
  background: rgb(255, 254, 250);
}

h1, h2 {
  font-family: IMFellEnglishSC;
  font-weight: normal;
  font-style: normal;
  text-align: center;
  line-height: 0.8em;
}

.author_name {
  font-family: PermanentMarker-Regular;
  color: #28170b;
  text-decoration: none;
}

a.author_name:visited, a.author_name:hover, a.author_name:active {
  color: #28170b;
}

span.author_of {
  font-family: IMFellGreatPrimer;
  font-style: italic;
  font-size: 0.5em;
}

span.hint {
  display: block;
  text-align: center;
  font-size: 0.66em;
  opacity: 50%;
  margin-top: 0px;
}

/* h1 is smaller than h2 */
h1 {
  font-size: 2em;
  margin-top: 0em;
  margin-bottom: 0em;
  padding-top: 0em;
}

/* h2 is larger than h1 */
h2 {
  font-size: 3em;
  margin-top: 0em;
  margin-bottom: 0em;
  padding-bottom: 0em;
}

h3 {
  font-family: IMFellEnglishSC;
  font-size: 1.5em;
  font-weight: bold;
  font-style: normal;
  margin-top: 0em;
  margin-bottom: 0em;
  padding-bottom: 0.5em;
}

p {
  // text-align: justify;
  // https://caniuse.com/css-text-justify -- not yet in Chrome (118)
  // text-justify: inter-character;
  margin-top: 0px;
}

div.social {
  font-size: 2em;
  margin-top: 0px;
  padding-top: 0.5em;
  padding-bottom: 0.5em;
  background-color: #e2af72;
  background-image: url('/images/distressed-paper.jpg');
  background-size: cover;
  text-align: center;
}

.social img {
  display: inline;
  max-height: .8em;
  margin-left: 1em;
  margin-right: 1em;
}

/* Wide screens */
@media (min-width: 1025px) {
  p.tagline {
    font-size: 1.2em;
  }

  img.sketch {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 30%;
    padding-right: 20%; // same as cover
  }

  div.cover {
    display: table-cell;
    width: 20%;
    vertical-align: top;
    padding-right: 1em;
  }

  div.descr {
    display: table-cell;
    vertical-align: top;
    position: relative;
  }

  a.button1 {
    display:inline-block;
    padding:0.15em 0.2em;
    border:0.1em solid #000;
    margin:0.5em 0.3em 0.3em 0;
    border-radius:0.25em;
    box-sizing: border-box;
    text-decoration:none;
    font-family:'IMFellEnglishSC',serif;
    font-size: smaller;
    color:#28170b;
    text-align:center;
    transition: all 0.2s;
    width: 100%;
  }

  div.two-col-on-wide {
    display: flex;
    flex-direction: row;
    margin: auto;
  }

  .two-col-on-wide div {
    width: 100%;
  }
}

/* Narrow screens */
@media (max-width: 1024px) {
  body {
    font-size: 3.25vw;
  }

  div.main-body {
    padding-left: 1em;
    padding-right: 1em;
  }

  p.tagline {
    font-size: 1.5em;
    text-shadow: 2px 2px 2px #e1af74;
  }

  img.sketch {
    display: block;
    margin-left: auto;
    width: 100%;
    max-width: 800px;
  }

  div.cover {
    display: block;
    width: 100%;
    text-align: center;
  }

  div.descr {
    display: block;
    font-size: 1.25em;
  }

  p {
    font-size: 1.2em;
  }

  a.button1 {
    display:block;
    width: 100%;
    padding:0.15em 0.2em;
    border:0.1em solid #000;
    margin:0.5em 0.3em 0.3em 0;
    border-radius:0.25em;
    box-sizing: border-box;
    text-decoration:none;
    font-family:'IMFellEnglishSC',serif;
    font-size: 1.5em;
    color:#28170b;
    text-align:center;
    transition: all 0.2s;
  }
}

.two-col-on-wide div {
  padding-left: 1em;
  padding-right: 1em;
  border: 1px solid #e1aa72;
}

h3.book-title {
  text-align: center;
}

a.button1:hover{
  color:rgb(255, 254, 250);
  background-color:#28170b;
}

a {
  text-decoration-line: underline;
  text-decoration-thickness: 1px;
}
a:link { color: #302030; }
a:visited { color: #403050; }
a:hover { color: #6050F0; }
a:active { color: #40F0F0; }

.social a {
  color: #fff;
  white-space: nowrap;
  text-decoration: none;
}

p.tagline {
  margin-top: 0.5em;
  text-align: center;
//  font-family: IMFellGreatPrimer;
  font-family: IMFellEnglishSC;
  line-height: 1.0em;
  margin-left: 10%;
  margin-right: 10%
}

p.readlinks {
  text-align: center;
}

a.readlink {
  margin-right: 1em;
}

hr {
  border: 0px solid #000;
}

span.fileinfo {
  font-size: 0.75em;
  color: #888;
}

.invisibar {
  display: none;
}