@font-face {
  font-family: "book";
  src: url("fontes/standard-book.ttf"); }
@font-face {
  font-family: "book-italic";
  src: url("fontes/standard-book-italic.ttf"); }
button:focus,
input:focus,
select:focus,
textarea:focus {
  outline: none; }

.on {
  display: block; }

.off {
  display: none; }

::selection {
  background: #ff00ff;
  color: white; }

.light {
  background: #FAFAFA;
  -webkit-transition: background-color 400ms linear;
  -ms-transition: background-color 400ms linear;
  transition: background-color 400ms linear; }

.dark {
  background-color: #080808;
  -webkit-transition: background-color 400ms linear;
  -ms-transition: background-color 400ms linear;
  transition: background-color 400ms linear; }

body {
  margin: 0;
  font-family: "book";
  font-size: 15px;
  letter-spacing: 0.5px;
  position: absolute;
  height: 100%;
  width: 100%; }
  body nav {
    position: fixed;
    z-index: 100;
    width: auto;
    height: auto;
    bottom: 0; }
    body nav #btnAbout,
    body nav #btnMuted {
      font-family: "book";
      font-size: 15px;
      padding: 5px;
      border: solid 1px #000413;
      background: #FAFAFA;
      cursor: pointer; }
    body nav #btnMuted {
      margin-bottom: 10px;
      margin-left: 5px; }
    body nav #btnMuted:hover {
      background: black;
      color: white; }
  body .hidden {
    display: none; }
  body main {
    position: fixed;
    height: 100%;
    width: 100%; }
    body main table {
      width: 100%;
      table-layout: fixed;
      position: fixed;
      z-index: 2; }
    body main .col-letter {
      color: black !important;
      text-align: center;
      height: 5vh;
      padding-bottom: 2vh;
      margin-bottom: 2vh; }
  body #about,
  body #list {
    height: 100%; }
  body #about {
    background: #FAFAFA;
    width: 100%;
    height: 100%;
    position: relative; }
    body #about p:nth-of-type(1) {
      margin-top: 0px;
      padding-top: 15px; }
    body #about table {
      height: 100%;
      top: 0px;
      table-layout: fixed;
      z-index: 1; }
      body #about table td {
        text-align: center; }
        body #about table td span {
          padding: 3px; }
      body #about table .col-letter > :nth-of-type(7n + 1) {
        color: #830738; }
      body #about table .col-letter > :nth-of-type(7n + 2) {
        color: #ff6300; }
      body #about table .col-letter > :nth-of-type(7n+3) {
        color: #ff00ff; }
      body #about table .col-letter > :nth-of-type(7n + 4) {
        color: #ff0054; }
      body #about table .col-letter > :nth-of-type(7n + 5) {
        color: #0cd933; }
      body #about table #btnAbout {
        height: 10%;
        vertical-align: top; }
        body #about table #btnAbout span {
          position: absolute; }
        body #about table #btnAbout td {
          outline: 1px solid transparent;
          border-bottom: 1px; }
        body #about table #btnAbout td:nth-last-of-type(10) span {
          margin-top: 30px; }
        body #about table #btnAbout td:nth-last-of-type(9) span {
          margin-top: 60px; }
        body #about table #btnAbout td:nth-last-of-type(8) span {
          margin-top: 120px; }
        body #about table #btnAbout td:nth-last-of-type(7) span {
          margin-top: 150px; }
        body #about table #btnAbout td:nth-last-of-type(6) span {
          margin-top: 180px; }
        body #about table #btnAbout td:nth-last-of-type(5) span {
          margin-top: 210px; }
        body #about table #btnAbout td:nth-last-of-type(4) span {
          margin-top: 270px; }
        body #about table #btnAbout td:nth-last-of-type(3) span {
          margin-top: 330px; }
        body #about table #btnAbout td:nth-last-of-type(2) span {
          margin-top: 360px; }
        body #about table #btnAbout td:nth-last-of-type(1) span {
          margin-top: 420px; }
        body #about table #btnAbout span:hover {
          cursor: pointer;
          border: 1px solid; }
    body #about .hovered [data-letter="infos"] {
      font-size: 50px;
      background: -webkit-gradient(linear, left top, left bottom, from(#000), to(#045FB4));
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent; }
    body #about .polyLeft {
      z-index: 10;
      float: left;
      shape-outside: polygon(21% 49%, 59% 70%, 0 100%, 0 0, 60% 28%);
      clip-path: polygon(21% 49%, 59% 70%, 0 100%, 0 0, 60% 28%);
      height: 100%;
      width: 50%;
      background: #FAFAFA; }
    body #about .intro {
      z-index: 10;
      letter-spacing: 0.05vw;
      font-family: "book";
      width: 50vw;
      cursor: auto;
      color: #000413;
      position: relative; }
      body #about .intro a {
        text-decoration: none;
        color: #ff0054; }
      body #about .intro a:hover {
        font-style: italic; }
      body #about .intro .end {
        font-family: "book-italic" !important; }
      body #about .intro p + p {
        padding-top: 15px; }
      body #about .intro span {
        color: #ff00ff; }
      body #about .intro span:nth-of-type(2) {
        color: #830738; }
      body #about .intro span:nth-of-type(4n + 1) {
        color: #0cd933; }
      body #about .intro span:nth-of-type(6n + 2) {
        color: #ff6300; }
      body #about .intro span:nth-of-type(4) {
        color: #4000ff; }
      body #about .intro span:hover {
        text-shadow: none;
        font-style: italic;
        cursor: pointer; }
    body #about .polyRight {
      position: relative;
      display: block;
      float: right;
      shape-outside: polygon(100% 0%, 100% 46%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
      clip-path: polygon(100% 0%, 100% 46%, 100% 100%, 25% 100%, 0% 50%, 25% 0%);
      height: 100%;
      width: 50%;
      background: #FAFAFA; }
    body #about .imgSwitch {
      margin: 0 auto;
      position: relative; }
    body #about .imgSwitch img {
      width: 80px; }
    body #about .imgSwitch img.imgChange {
      z-index: 9999;
      transition: opacity .5s linear;
      cursor: pointer;
      display: none !important; }
    body #about .imgSwitch:hover img.imgChange {
      display: block !important; }
    body #about .imgSwitch:hover img.imgLogo {
      display: none !important; }
    body #about .generique {
      bottom: 30px;
      color: grey;
      margin-right: 0px;
      text-align: right;
      position: relative;
      z-index: 10; }
      body #about .generique p {
        letter-spacing: 0.05vw;
        margin: 0; }
        body #about .generique p a:nth-of-type(3) {
          color: #ff00ff;
          text-decoration: none; }
        body #about .generique p a:nth-of-type(2) {
          color: #4000ff;
          text-decoration: none; }
        body #about .generique p a:nth-of-type(7) {
          color: #0cd933;
          text-decoration: none; }
        body #about .generique p a:nth-of-type(1) {
          color: #830738;
          text-decoration: none; }
        body #about .generique p a {
          color: #ff6300;
          text-decoration: none; }
        body #about .generique p a:hover {
          text-decoration: none;
          font-style: italic;
          cursor: pointer; }
        body #about .generique p span {
          color: #ff00ff; }
        body #about .generique p span:nth-of-type(2) {
          color: #830738; }
        body #about .generique p span:nth-of-type(4n + 1) {
          color: #0cd933; }
        body #about .generique p span:nth-of-type(6n + 2) {
          color: #ff6300; }
        body #about .generique p span:nth-of-type(4) {
          color: #4000ff; }
        body #about .generique p span:hover {
          text-shadow: none;
          font-style: italic;
          cursor: pointer; }
    body #about img {
      padding: 15px;
      width: 100px;
      height: auto;
      position: fixed;
      bottom: 10px;
      z-index: 10;
      left: 15px; }
  body #list {
    width: 100%;
    padding: 0 !important; }
    body #list table#table_list {
      height: 95vh; }
    body #list table#infomedia {
      height: 5vh;
      bottom: 0; }
      body #list table#infomedia tr td {
        text-align: center; }
    body #list th span {
      padding: 3px;
      cursor: text; }
    body #list th span [data-letter="infos"] {
      border: solid 1px #000413 !important; }
    body #list th span:hover {
      text-decoration: none !important;
      cursor: pointer; }
    body #list tr.col-words {
      height: 30vh;
      vertical-align: baseline; }
      body #list tr.col-words td:nth-last-of-type(1) {
        display: none; }
    body #list tr.col-words td span {
      text-transform: lowercase;
      position: absolute;
      background: #FAFAFA; }
    body #list tr.col-words td span:not(.Called) {
      color: #4000ff; }
    body #list tr.col-words:nth-of-type(odd) td:nth-of-type(5n + 0) {
      color: #ff0054; }
    body #list tr.col-words:nth-of-type(odd) td:nth-of-type(5n + 2) span {
      margin-top: 0;
      position: absolute;
      color: #0cd933; }
    body #list tr.col-words:nth-of-type(odd) td:nth-of-type(5n + 2) span {
      margin-top: 6vh;
      position: absolute;
      color: #ff00ff; }
    body #list tr.col-words:nth-of-type(odd) td:nth-of-type(5n + 3) span {
      margin-top: 12vh;
      color: #ff6300; }
    body #list tr.col-words:nth-of-type(odd) td:nth-of-type(5n + 4) span {
      margin-top: 18vh;
      color: #830738; }
    body #list tr.col-words:nth-of-type(odd) td:nth-of-type(5n + 5) span {
      margin-top: 24vh;
      color: #ff00ff; }
    body #list tr.col-words:nth-of-type(even) td:nth-of-type(5n + 5) {
      color: #ff00ff; }
    body #list tr.col-words:nth-of-type(even) td:nth-of-type(5n + 4) span {
      margin-top: 0;
      position: absolute;
      color: #ff0054; }
    body #list tr.col-words:nth-of-type(even) td:nth-of-type(5n + 3) span {
      margin-top: 6vh;
      position: absolute;
      color: #830738; }
    body #list tr.col-words:nth-of-type(even) td:nth-of-type(5n + 2) span {
      margin-top: 12vh;
      color: #0cd933;
      position: absolute; }
    body #list tr.col-words:nth-of-type(even) td:nth-of-type(5n + 1) span {
      margin-top: 18vh;
      color: #ff6300;
      position: absolute; }
    body #list tr.col-words:nth-of-type(even) td:nth-of-type(5n + 0) span {
      margin-top: 24vh;
      color: #0cd933;
      position: absolute; }
    body #list td.hidden {
      visibility: hidden; }
    body #list .Called span {
      cursor: pointer;
      text-decoration: none;
      padding: 3px;
      border: 1px solid transparent; }
      body #list .Called span:hover {
        cursor: pointer; }
      body #list .Called span:visited {
        text-decoration: none; }
      body #list .Called span + span {
        margin-top: 3vh !important;
        margin-left: 1vh !important; }
    body #list .notCalled span {
      padding: 3px;
      color: black !important; }
      body #list .notCalled span:hover {
        color: black !important;
        cursor: not-allowed !important;
        border: none;
        box-shadow: none; }
    body #list .hovered span [data-letter] {
      padding: 4px; }
    body #list .Called.hovered span, body #list .notCalled.hovered span, body #list th.hovered span {
      outline: solid 1px; }
    body #list [data-letter="infos"] span {
      border: 1px solid; }
      body #list [data-letter="infos"] span:hover {
        background: black;
        color: white;
        border: 1px solid transparent; }
    body #list .hovered span:hover {
      outline: solid 1px;
      cursor: pointer; }
    body #list .notCalled .hovered span:hover {
      box-shadow: none;
      border: none; }
  body #lecteurV {
    z-index: 0;
    max-width: 80%;
    max-height: 100%;
    height: auto;
    position: fixed;
    bottom: 0;
    right: 0;
    cursor: none; }
    body #lecteurV.onback {
      transition-timing-function: ease-in-out;
      transition: 0.75s; }
    body #lecteurV.onfront {
      opacity: 1;
      transition-timing-function: ease-in-out;
      transition: 0.75s; }
  body #infomedia {
    position: fixed; }

@media only screen and (max-width: 800px) {
  body {
    font-size: 10px; }
    body #about {
      width: 100%;
      position: relative;
      overflow-y: scroll;
      overflow-x: hidden; }
      body #about .polyRight,
      body #about .polyLeft {
        display: none; }
      body #about .generique,
      body #about .intro {
        margin-top: 30px;
        text-align: left;
        width: 100%;
        font-size: 15px;
        line-height: 21px;
        padding: 15px; }
        body #about .generique p,
        body #about .intro p {
          padding-right: 40px; }
      body #about tr#btnAbout {
        padding-left: 0px;
        margin-top: initial;
        font-size: 15px; }
        body #about tr#btnAbout th {
          display: none; }
        body #about tr#btnAbout .letter span:nth-of-type(1) {
          margin-top: 0px; }
      body #about img {
        position: relative;
        width: 100px; } }

/*# sourceMappingURL=style.css.map */