@font-face {
          font-family: "F1532 Bastarde Lyon Normal";
          src: url("https://db.onlinewebfonts.com/t/611766d311c6e09cd93b7cf4f62039cf.eot");
          src: url("https://db.onlinewebfonts.com/t/611766d311c6e09cd93b7cf4f62039cf.eot?#iefix")format("embedded-opentype"),
          url("https://db.onlinewebfonts.com/t/611766d311c6e09cd93b7cf4f62039cf.woff2")format("woff2"),
          url("https://db.onlinewebfonts.com/t/611766d311c6e09cd93b7cf4f62039cf.woff")format("woff"),
          url("https://db.onlinewebfonts.com/t/611766d311c6e09cd93b7cf4f62039cf.ttf")format("truetype"),
          url("https://db.onlinewebfonts.com/t/611766d311c6e09cd93b7cf4f62039cf.svg#F1532 Bastarde Lyon Normal")format("svg");
      }
      section{
        justify-content: flex-start;
        min-height: calc(100vh - 85px);
        flex:1;
        position: relative;
        display: flex;
        min-width: 100%;
        overflow: hidden;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        color:#eee;
        background-size: 1em 1em;
        background-color: #1a1a1a;
        opacity: 1;
      }
      .titre{
        display: flex;
        max-width: 983px;
        width: 90%;
        justify-content: space-between;
        align-items:flex-end;
        margin-top : 50px;
        margin-bottom: 50px;
      }
      .titre img{
        height: 100px;
        filter: invert(100%) drop-shadow(0px 3px 10px black);
      }
      .titre img:last-child{
        transform: scaleX(-100%);
      }
      h2{
        text-align: center;
        font-family: "F1532 Bastarde Lyon Normal";
        font-variant: none;
        font-feature-settings: "hist";
        font-size: 35px;
      }
      h2 span{
        display: block;
        margin-left: 5px;
        margin-right: 5px;
      }
      .text{
        max-width: 983px;
        width: 90%;
        margin-top: 5px;
        margin-left: 30px;
        margin-right: 30px;
        margin-bottom: 30px;
        text-align: justify;
        font-size: 18px;
      }
      .book{
        max-width: 1100px;
        width: 90vw;
        height: 90vh;
        border-radius: 5px;
        box-shadow: 0 0 4px #ccc;
        margin-bottom: 15px;
        background-color: #fffaf5;
      }
      #titleChap{
        width: 80%;
        height: 30px;
        text-align: center;
        font-family: arial, sans-serif;
        font-size: 13px;
        margin: auto;
        color: #888;
      }
      #toc{
        max-width: 100%;
        height: 30px;
        appearance: none;
      }
      #toc:focus{
        outline: none;
      }
      #mask{
        width: 28px;
        height: 28px;
        border-radius: 50%;
        z-index: 1000;
        position: absolute;
        transform: translate(6px, -29px);
        background-color: white;
        pointer-events: none;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 3px;
        background-color: #fffaf5;
      }
      #mask div{
        height: 3px;
        width: 15px;
        border-radius: 20px;
        background-color: #aaa;
      }
      option { text-align: left;}
      option:checked {
        font-weight: bolder;
        color: #555;
      }
      .bookParam{
        height: 40px;
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-right: 5px;
      }
      .bookParam button, .bookParam select, .bookParam a{
        border-radius: 50%;
        width: 30px;
        height: 30px;
        border: 1px #ccc solid;
        background-color: white;
        margin: 0 5px;
        box-shadow: 0 0 2px #ccc;
        cursor: pointer;
        font-weight: bold;
        color: #aaa;
        text-align: center;
        background-color: #fffaf5;
      }
      .bookParam button:hover, .bookParam select:hover, .bookParam a:hover{
        box-shadow: 0 0 5px #aaa;
        transition: box-shadow 0.3s ease-in-out;
      }
      .bookParam a i{
        margin-top: 7px;
      }
      #fontSize, .settings{
        display: flex;
        justify-content: center;
      }
      #growBtn{
        font-size: 20px;
      }
      #shrinkBtn{
        font-size: 12px;
      }
      #viewer{
        width: 100%;
        height: calc(100% - 69px);
        opacity: 0;
      }
      #viewer::after{
        position: absolute;
        width: 1px;
        border-right: 1px #ccc solid;
        height: 50vh;
        z-index: 1000;
        left: 50%;
        transform: translateY(-65vh);
        margin-left: -2px;
        content:"";
        box-shadow: 0 0 5px #ccc;
      }
      .arrows{
        width: 100%;
        position:relative;
        height: calc(100% - 69px);
        top:calc(70px - 100%);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        pointer-events: none;
      }
      #prev, #next{
        width: 100px;
        font-size: 64px;
        color: #E2E2E2;
        font-family: arial, sans-serif;
        font-weight: bold;
        cursor: pointer;
        -webkit-user-select: none;
        -moz-user-select: none;
        user-select: none;
        text-decoration: none;
        transition: transform 0.3s ease-in-out;
        display: flex;
        align-items: center;
        pointer-events:auto;
      }
      #prev:hover{
        transform: translateX(3px);
      }
      #next:hover{
        transform: translateX(-3px);
      }
      #next{
        transform: translateX(-8px);
        justify-content: flex-end;
      }
      #prev{
        transform: translateX(8px);
      }
      .back{
        display: block;
        font-family:'Cardo', serif;
        text-align: center;
        width : 250px;
        font-size: 1.1em;
        padding: 10px;
        margin-top: 10px;
        margin-bottom: 20px;
        cursor: pointer;
        border: none;
        border-radius: 5px;
        color: #555;
        background-color: #ddd;
        border: 2px solid transparent;
        transition: all 0.3s ease-in-out;
      }
      .back:hover{
        background-color: transparent;
        border: 2px solid #ddd;
        color: #ddd;
      }

      @media (max-width: 888px) {
        #viewer::after{
          display: none;
        }
      }
      @media (max-width: 650px) {
        h2{
          flex-direction: column;
        }
      }
      @media (pointer: coarse) {
        #prev:hover{
          transform: translateX(8px);
        }
        #next:hover{
          transform: translateX(-8px);
        }
      }