/* POWTTERN v.7.3 ********************** David Bihanic (c)2025 */

  body {
      margin: 0;
      background: black;
      color: #85fafe;
      font-family: monospace;
      display: flex;
      line-height: 1.05em;
      height: 100vh;
      overflow: hidden;
    }
    #sidebar {
      width: 400px;
      height: 100%;
      padding: 10px;
      position: absolute;
      flex-direction: column;
      z-index: 2;
    }
    #imageName {
      font-size: 14px;
      text-decoration-line: underline;
      text-decoration-color: black;
      text-decoration-thickness: 1em;
      text-underline-offset: -0.75em;
      text-decoration-skip-ink: none;
    }
    #sourceCanvas {
      background-color: #85fafe;
      max-width: 300px;
      box-shadow: 0px 0px 5px black;
      opacity: 0;
      transition: opacity 1s ease-in;
      margin-bottom: 0;
      display: none;
    }
    #log {
      font-size: 14px;
      overflow-y: hidden;
      white-space: pre-wrap;
      max-height: 210px;
      text-decoration-line: underline;
      text-decoration-color: black;
      text-decoration-thickness: 1em;
      text-underline-offset: -0.75em;
      text-decoration-skip-ink: none;
    }
    #mainCanvasContainer {
      flex-grow: 2;
      position: absolute;
    }
    #canvas {
      display: block;
      width: 100vw;
      height: 100vh;
      opacity: 0;
      transition: opacity 1s ease-in;
    }
    #musee {
      position: absolute;
      font-family: monospace;
      top: 10px;
      right: 10px;
      text-align: right;
      z-index: 10;
      cursor: pointer;
      font-size: 14px;
      user-select: none;
      text-decoration-line: underline;
      text-decoration-color: black;
      text-decoration-thickness: 1em;
      text-underline-offset: -0.75em;
      text-decoration-skip-ink: none;
      background-size: 15px;
      background: black;
    }
    #creds {
      position: absolute;
      font-size: 14px;
      right: 10px;
      bottom: 10px;
      height: auto;
      text-align: right;
      width: auto;
      text-decoration-line: underline;
      text-decoration-color: black;
      text-decoration-thickness: 1em;
      text-underline-offset: -0.75em;
      text-decoration-skip-ink: none;
      z-index: 10;
    }
    #creds a {
      color: #85fafe;
      text-decoration: none;
      transition: color 0.3s ease;
     }
     #creds a:hover {
      color: #569c9e;
     }
    .cursor {
      display: inline-block;
      width: 7px;
      height: 14px;
      background: #85fafe;
      margin-left: 4px;
      animation: blink 1s step-end infinite;
      vertical-align: bottom;
    }
    @keyframes blink {
      50% {
        opacity: 0;
      }
    }

    /* Bouton synthèse vocale */
    #speechControls {
      position : absolute;
      bottom: 28px;
      display: flex;
      gap: 8px;   
      transition: color 0.3s ease;
    }
    #speakBtn, #stopBtn {
      font-family: monospace;
      text-align: right;
      color: #85fafe;
      border: none;
      cursor: pointer;
      font-size: 14px;
      text-decoration-line: underline;
      text-decoration-color: black;
      text-decoration-thickness: 1em;
      text-underline-offset: -0.75em;
      text-decoration-skip-ink: none;
      background-size: 15px;
      background: black;
      transition: color 0.3s ease;
    }
    #speakBtn:hover, #stopBtn:hover {
      color: #569c9e;
    }
    #voiceSelect {
      display: none;
    }
    #fullscreenBtn {
      font-family: monospace;
      text-align: right;
      color: #85fafe;
      border: none;
      cursor: pointer;
      font-size: 14px;
      text-decoration-line: underline;
      text-decoration-color: black;
      text-decoration-thickness: 1em;
      text-underline-offset: -0.75em;
      text-decoration-skip-ink: none;
      background-size: 15px;
      background: black;
      transition: color 0.3s ease;
    }
    #fullscreenBtn:hover {
      color: #569c9e;
    }