_sv_custom.css

/* installation */
.sv-feed-item.00bbinderycontrols,
.sv-feed-item.00abindery {
  display: none;
}

@font-face {
    font-family: "GT Alpina";
    src: url('_assets/_fonts/GT-Alpina-Regular.otf') format('otf'),
         url('_assets/_fonts/GT-Alpina-Regular.otf') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "GT Alpina Italic";
    src: url('_assets/_fonts/GT-Alpina-Regular-Italic.otf') format('otf'),
         url('_assets/_fonts/GT-Alpina-Regular-Italic.otf') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: 'GT America Regular';
    src: url('_assets/_fonts/GT-America-Regular.woff2') format('woff2'),
         url('_assets/_fonts/GT-America-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "GT America Mono Regular";
    src: url('_assets/_fonts/GT-America-Mono-Regular.woff2') format('woff2'),
         url('_assets/_fonts/GT-America-Mono-Regular.woff') format('woff');
    font-weight: normal;
    font-style: normal;
}

@font-face {
    font-family: "FreizeitTrial";
    src: url('_assets/_fonts/FreizeitTrial-Regular.otf') format('woff2');
    font-weight: normal;
    font-style: normal;
}

/* variables */
:root {
  --bg-color: white;
  --main-color: #7741AF;
  --gray: #eaeaea;
  --ff-primary: 'GT Alpina';
  /* --ff-secondary: 'GT America Regular'; */
  --ff-secondary: 'FreizeitTrial';
}

/* helpers */
.text-primary {
  font-family: var(--ff-primary);
}

.text-secondary {
  font-family: var(--ff-secondary);
}

.text-reverse {
  color: white;
}

.text-centered {
  text-align: center;
  display: block;
}

/* bindery controls updates */
@media only screen {

  .📖-zoom-content {
   background: black !important;
  }

  .📖-page {
    background: #f3f0ff !important;
  }

  .📖-controls,
  .📖-view-print.📖-controls {
    background: black !important;
  }

  .📖-controls .📖-select, .📖-control {
    color: white !important;
  }

  .📖-controls button {
    background: white !important;
    color: black !important;
  }

  .📖-page {
    background: pink;
  }

}

/* styles */

* {
  font-weight: normal;
}

body {
  font-family: var(--ff-primary);
  color: var(--main-color);
  font-size: 16pt;
  line-height: 1.1;
}

h1, h2, h3, h4, h5, h6 {
  font-family: var(--ff-secondary);
  line-height: 1.1;
  margin: 0;
  padding: 0;
}

h1.cover {
  text-align: center;
  line-height: .9;
  color: white;
  padding: 24pt 0 32pt;
}

h1 {
  font-size: 56pt;
}

h2 {
  font-size: 36pt;
  padding-bottom: 12pt;
}

h3 {
  font-size: 18pt;
}

p {
  margin-bottom: 0;
  padding-bottom: 18pt;
}

p + p, p + ol, p + ul {
  /* text-indent: 48pt; */
  /* margin-bottom: 24pt; */
  /* padding-top: 18pt; */
}

code, pre {
  font-family: 'GT America Mono Regular';
  letter-spacing: -.035em;
  font-size: 80%;
  color: #ff69b4;
}

pre {
  background: transparent;
  border: 1px solid var(--main-color);
  padding: 12pt;
}

a {
  text-decoration: none;
  border: 1px solid var(--main-color);
  border-radius: 10px;
  color: var(--main-color);
  padding: 0 4px 1px 4px;
}

a:hover {
  text-decoration: none;
  background: var(--main-color);
  color: white;
}

ul, ol {
  padding: 0;
  margin: 0;
  margin-bottom: 18pt;
}

ul li, ol li {

}

ul li, ul .from-previous {
  list-style-type: disc;
  list-style-position: inside;
}

ol li, ol .from-previous {
  list-style-type: decimal;
  list-style-position: inside;
}

a.button, .button, button {
  border: 1px solid var(--main-color);
  border-radius: 20px;
  padding: 16pt 24pt;
  margin: 16pt 0;
  text-transform: uppercase;
  text-decoration: none;
  display: inline-block;
  background-color: transparent;
}

a.button:hover, .button:hover, button:hover {
  text-decoration: none;
  background: var(--main-color);
  color: var(--bg-color);
}

hr {
  height: 1px;
  border: 0;
  outline: none;
  background: var(--main-color);
  margin: 24pt 0;
}

a sup, sup {
  text-decoration: none !important;
  text-decoration-style: none !important;
  text-decoration-color: white;
}

img {
  margin: 8pt 0;
  margin-right: 12pt;
  background: var(--main-color);
  background-blend-mode: multiply;
  mix-blend-mode: multiply;
  filter: grayscale(100%);
}

img.spread {
  width: 200%;
  background-blend-mode: normal;
  filter: none;
}

.caption {
  font-size: 10pt;
  clear: right;
  padding: 0 8pt;
  text-align: center;
}

.back-cover p {
  font-size: 10pt;
}