.section {
  width: 100%;
  height: auto;
  display: flex;
  padding: 5px;
  flex-direction: column-reverse;
}

.bookCenter {
  display: flex;
  flex-wrap: wrap;
  vertical-align: top;
  overflow: hidden;
  background-color: #ECEFF1;
}


.header {
  width: 100%;
  height: auto;
  font-size: xx-large;
}

.chessboard {
  width: 100%;
  display: block;
  margin-left: auto;
  margin-right: auto;
  justify-content: center;
  align-items: center;
}

.book {
  width: 100%;
  margin: 32px;
  padding: 20px;
  background: white;
  box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
  border-radius: 5px;
  display: inline-block;
}

.engine {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  z-index: 1500;
  background-color: #ECEFF1;
}

.puzzle {
  width: 100%;
  height: 100%;
  overflow-y: scroll;
  z-index: 2500;
  background-color: #ECEFF1;
}

.mobileShow {
  display: none;
  /*margin-left: 5px;*/
}

.mobileHide {
  display: block;
  /*margin-left: 5px;*/
}

.overflow-mobil {
  white-space: nowrap;
  max-width: 600px;
  overflow: hidden;
  text-overflow: ellipsis;
}

.logoMobile {
  display: none;
}


.logo-text {
  font-family: FuturaPT, serif;
  font-style: normal;
  font-weight: bold;
  font-size: 20px;
  line-height: 100%;
  color: black;
  display: inline-block;
  align-items: center;
  text-transform: uppercase;
  padding-left: 10px;
}

.page-title-text {
  font-style: normal;
  font-weight: bold;
  font-size: 24px;
  line-height: 100%;
  /* identical to box height, or 24px */
  align-items: center;
  text-transform: capitalize;
  color: black;
}

.center {
  display: block;
  margin-left: auto;
  margin-right: auto;
  height: auto;
}

.nav-menu-title-text {
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 20px;
  color: #000000;
}

.wrapper {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

@media only screen and (max-width: 991px) {
  .logoMobile {
    display: block;
  }
}

.studyButton {
  font-style: normal;
  font-weight: normal;
  font-size: 16px;
  line-height: 20px;
  padding-left: 3px;
  padding-right: 3px;
  color: white;
}

.sysLine {
  position: fixed;
  bottom: 0;
  width: 100%;
  background: transparent;
  z-index: 2000;
  margin-bottom: 13px;
}

.sysLineInner {
  width: 135px;
  margin: 0 auto;
  height: 5px;
  background: black;
  border-radius: 3px;
  z-index: 2000;
}


/* Mobile Styles */
@media only screen and (max-width: 600px) {
  .chessboard {
    width: 100%;
  }

  .book {
    width: 100%;
    height: 50%;
  }

  .bookCenter {
    flex-direction: column-reverse;
  }

  .mobileShow {
    display: block;
  }

  .mobileHide {
    display: none;
  }

  .overflow-mobil {
    max-width: 250px;
  }

  .sysLine {
    display: inline-block;
  }

  .logo-text {
    font-size: 16px;
  }
}

/* Tablet Styles */
@media only screen and (min-width: 601px) and (max-width: 960px) {
  .chessboard {
    width: 35%;
  }

  .book {
    width: 65%;
  }

  .mobileShow {
    display: none;
  }

  .mobileHide {
    display: block;
  }

  .sysLine {
    display: none;
  }

  .engine {
    background-color: white;
  }

  .puzzle {
    background-color: white;
  }
}

/* Desktop Styles */
@media only screen and (min-width: 961px) {
  .chessboard {
    width: 40%;
  }

  .book {
    width: 60%;
  }

  .mobileShow {
    display: none;
  }

  .mobileHide {
    display: block;
  }

  .sysLine {
    display: none;
  }

  .engine {
    background-color: white;
  }

  .puzzle {
    background-color: white;
  }
}

.over-img {
  padding-left: 20px;
  padding-top: 20px;
  max-width: 64px;
  display: block;
}

@font-face {
  font-family: dialast;
  src: url('/fonts/DIALAST.TTF');
}

@font-face {
  font-family: SemFig;
  src: url('/fonts/SEMFIGN_0.TTF');
}

@font-face {
  font-family: SemFig;
  src: url('/fonts/SEMFIGB_1.TTF');
  font-weight: bold;
}


@font-face {
  font-family: Verfig;
  src: url('/fonts/verfig.ttf');
}

@font-face {
  font-family: Verfig;
  src: url('/fonts/verfigb.ttf');
  font-weight: bold;
}


@font-face {
  font-family: Figgeorg;
  src: url('/fonts/FIGGN_.TTF');
}

@font-face {
  font-family: Figgeorg;
  src: url('/fonts/FIGGB_.TTF');
  font-weight: bold;
}

@font-face {
  font-family: ISChess;
  src: url('/fonts/IS-TT-01.TTF');
}

@font-face {
  font-family: Chess Leipzig;
  src: url('/fonts/LEIPFONT.otf');
}

@font-face {
  font-family: Linares;
  src: url('/fonts/linares.ttf');
}

@font-face {
  font-family: Chess Merida;
  src: url('/fonts/MERIFONT.TTF');
}

@font-face {
  font-family: FuturaPT;
  src: url('/fonts/FuturaPTBold.otf');
}

a.board {
  background: white;
  color: black;
  text-decoration: none;
}

a.board:hover {
  color: black;
  background-color: #FFFFFF;
}

a.moveLink {
  color: #000099;
  text-decoration: none;
  cursor: pointer;
}

a.moveLink:hover {
  color: #FFFFFF;
  background-color: #000099;
}

p.dia12 {
  font-family: dialast;
  font-size: 14pt;
  line-height: 0%;
  margin-top: 0%;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin: 1em;
  position: relative;
  /*display: block;*/
}

/* for position search, else line-height caused it to break in dark/sepia modes*/
p.diaps {
  font-family: dialast;
  font-size: 14pt;
  line-height: 0%;
  margin-top: 0%;
  margin-block-start: 1em;
  margin-block-end: 1em;
  margin: 1em;
  position: relative;
  background-color: bisque;
}

p.diagram {
  font-family: dialast;
  font-size: 14pt;
  line-height: 0;
  margin-top: 0;
  margin-block-start: 1em;
  margin-block-end: 1em;
  position: relative;
  top:10px;
}

p.diagram > a:hover {
  color: #000099;
  background-color: transparent
}

span.chess {
  font-family: SemFig;
}

span.chessAdditional {
  font-family: SemFig;
}

p.normal {
  font-family: Times New Roman, serif;
  margin-bottom: 1%;
  margin-top: 0%;
  line-height: 130%
}

p.main {
  font-family: Times New Roman, serif;
  font-weight: bold;
  line-height: 130%
}

p.after {
  font-family: Times New Roman, serif;
  font-style: italic;
  line-height: 100%;
}

span.bold {
  font-family: Times New Roman, serif;
  font-weight: bold;
}

span.normal {
  font-family: Times New Roman, serif;
  font-style: normal;
  font-weight: normal;
}

span.italic {
  font-family: Times New Roman, serif;
  font-style: italic;
  font-weight: normal;
}

p.game {
  font-family: Times New Roman, serif;
  margin-bottom: 1.5%;
  margin-top: 1.5%;
  line-height: 130%;
  font-weight: bold;
  border: 3px;
  background-color: #F2F2F2;
  border-color: #E6E6E6;
  border-style: ridge;
  border-radius: 13px;
  padding-right: 10px;
  padding-left: 10px;
}

p.chap {
  font-family: Times New Roman, serif;
  font-style: italic;
  font-weight: bold;
  margin-bottom: 0%;
  margin-top: 0%;
  font-size: x-large;
  line-height: 130%;
}

p.head {
  font-family: Times New Roman, serif;
  font-weight: bold;
  margin-bottom: 0%;
  margin-top: 0%;
  font-size: x-large;
  line-height: 130%;
}

p.smhead {
  font-family: Times New Roman, serif;
  font-weight: bold;
  margin-bottom: 0%;
  margin-top: 0%;
  font-size: large;
  line-height: 130%;
}

p.conc {
  font-family: Times New Roman, serif;
  margin-bottom: 1%;
  margin-top: 0%;
  line-height: 130%;
  border: 3px;
  background-color: #F2F2F2;
  border-color: #AAAAAA;
  border-style: double;
  padding-right: 10px;
  padding-left: 10px;
}

p.mode {
  font-family: "Times New Roman", Times, serif;
  margin-left: 35%;
  margin-right: 35%;
  font-weight: bold;
  text-align: center;
  border-color: #535353;
  margin-bottom: 3%;
  border-style: solid;
  border-width: 0.5px;
  border-radius: 3px;
  padding-top: 10px;
  padding-bottom: 10px;
  background: #E6E6E6;
}

.maingame {
  font-family: Times New Roman, Times, serif;
  font-weight: bold;
  line-height: 130%;
  margin-bottom: 1.5%;
  margin-top: 0%;
}

.annotation {
  font-family: Times New Roman, Times, serif;
  margin-bottom: 1.5%;
  margin-top: 0%;
  line-height: 130%;
}

.comment {
  font-family: "Times New Roman", Times, serif;
  font-weight: normal;
}

.toc a {color:blue; text-decoration:none;}