body {
      margin: 0;
      background: #fafaf4;
      color: #3E4349;
      font-family: sans-serif;
      line-height: 1.4em;
      font-size: 13pt;
    }

    a {
      color: #E0E6EE;
      text-decoration: none;
    }


    nav {
        position: fixed;
        top: 0;
        left: 0;
        height: 100vh;
        width: 38%;
        padding: 3em 1em;
        padding-left: 18%;
        box-sizing: border-box;
        overflow-y: auto;
        color: #E0E6EE;
    }


    nav h1 {
      font-size: 1em;
      margin-top: 0;
      color: #b3c3d8;
      text-shadow: 1px 1px 9px #111215;
    }

    nav ul {
      list-style: none;
      padding: 0;
      padding-top: 20px;
    }

    nav li {
      margin: 0.5em 0;
    }

    .content {
        margin-left: 38%;
        width: 62%;
        box-sizing: border-box;
        font-family: "minion pro", georgia, serif;
        padding-right: 25%;
        text-align: justify;
        padding-top: 3em;
        padding-left: 3em;
    }

    .content h2 {
        padding-top: 20px;
    }


    .theme-block {
      display: none;
    }

    .theme-block p {
        padding-bottom: 14px;
    }

    .theme-block.active {
      display: block;
      margin-bottom: 100px;
    }

    .lang-switch {
      margin-top: 3em;
      font-size: 0.8em;
    }

    .links {
      margin-top: 4em;
      font-size: 0.8em;
    }

    .links a {
      color: #b1c5cc;
      display: inline-flex;
      align-items: center;
      gap: 6px;
      line-height: 1.6em;
    }

    .links .icon {
      width: 17px;
      height: 16px;
      vertical-align: middle;
    }

    .media-block {
      margin: 1em 0;
      text-align: center;
      padding-bottom: 1em;
    }

    .lazy-video {
      width: 100%;
      max-width: 640px;
      aspect-ratio: 16 / 9;
      background-size: cover;
      background-position: center;
      position: relative;
      margin: 0 auto;
      border-radius: 6px;
      cursor: pointer;
    }


    .play-button {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: rgba(0, 0, 0, 0.6);
      color: #e5e5c9;
      font-size: 2em;
      padding: 0.3em 0.4em;
      border-radius: 21%;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.3);
      transition: transform 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
      cursor: pointer;
      user-select: none;
    }

    .lazy-video:hover .play-button {
      transform: translate(-50%, -50%) scale(1.1);
      background: rgba(0, 0, 0, 0.75);
      box-shadow: 0 0 15px rgba(26, 27, 28, 0.4);
    }



    .chat-block {
      padding: 20px 16px;
      text-align: left;
      background-color: #f4efd4;
      font-family: "Lucida Console", "Courier New", monospace;
      line-height: 16px;
      border-radius: 4px;
      font-size: 14px;
    }
  
    .chat-block p {
        padding-bottom: 0px;
    }

    .media-block video {
    max-width: 100%;
    height: auto;
    border-radius: 4px;
    box-shadow: 0 2px 6px rgba(0, 0, 0, 0.1);
    }

    .media-caption {
      font-size: 0.95em;
      color: #666;
      margin-top: 0.3em;
      text-align: center;
      font-style: italic;
      background-color: #e2e4e7;
      border-radius: 4px;
      padding-top: 12px;
      padding-bottom: 12px;
    }


    @media (max-width: 768px) {
        nav {
            position: relative;
            width: 100%;
            height: auto;
            padding-left: 1em;
        }

        .content {
            margin-left: 0;
            width: 100%;
            padding-right: 1em;
            padding-left: 1em;
        }
    }