@font-face {
    font-family: 'Inter';
    src: url('fonts/Inter_18pt-Regular.ttf') format('truetype');
}
@font-face {
    font-family: 'Inter-header';
    src: url('fonts/Inter_24pt-Bold.ttf');
}

h1 {
  font-family: "Inter-header", Arial, sans-serif;
}

    body {
      font-family: "Inter", Arial, sans-serif;
      text-align: center;
      padding: 20px;
      margin: 0;
      background: linear-gradient(135deg, #083358, #1a73e8);
      color: white;
    }

    #saveSettingsBtn:hover {
      background: #0c63d9;
    }

    #saveSettingsBtn {
      margin: 10px 5px;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      background: #1a73e8;
      color: white;
      font-size: 16px;
      cursor: pointer;
    }

    .dialog-overlay,
    .subtitles-overlay {
      display: none;
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(0, 0, 0, 0.7);
      z-index: 9999;
    }

    .dialog,
    .subtitles-dialog {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #ffffff;
      color: #333;
      padding: 20px;
      border-radius: 10px;
      width: 90%;
      max-width: 400px;
      text-align: center;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    }

    .dialog input[type="url"],
    .subtitles-dialog input[type="url"] {
      width: 80%;
      padding: 10px;
      font-size: 16px;
      border-radius: 5px;
      border: 1px solid #ccc;
      margin-bottom: 10px;
    }

    .dialog button,
    .subtitles-dialog button {
      margin: 10px 5px;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      background: #1a73e8;
      color: white;
      font-size: 16px;
      cursor: pointer;
    }

    .dialog button:hover,
    .subtitles-dialog button:hover {
      background: #0c63d9;
    }

    #customControls {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 10px;
      gap: 10px;
    }

    #customControls button,
    input[type="range"] {
      padding: 10px;
      border: none;
      border-radius: 5px;
      font-size: 14px;
      cursor: pointer;
    }

    #customControls button {
      background: #1a73e8;
      color: white;
    }

    #customControls button:hover {
      background: #0c63d9;
    }

    #showDialogBtn:hover {
      background: #0c63d9;
    }

    input[type="range"] {
      flex-grow: 1;
      background: transparent;
      outline: none;
      cursor: pointer;
    }

    video, iframe {
      display: flex;
      margin: 20px auto;
      background: black;
      width: 80vw;
      height: 80vh;
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
    }

    iframe {
      border: none;
    }

    .gap-box {
      height: 20px;
    }

    #showDialogBtn {
      margin: 10px 5px;
      padding: 10px 20px;
      border: none;
      border-radius: 5px;
      background: #1a73e8;
      color: white;
      font-size: 16px;
      cursor: pointer;
    }

    #settingsBtn {
      background: #1a73e8;
      font-size: 18px;
      border-radius: 50%;
      width: 40px;
      height: 40px;
      cursor: pointer;
      margin-top: 20px;
    }

    #settingsBtn:hover {
      background: #0c63d9;
    }

    #fileInput {
        display: none;
    }

    #settingsPanel {
      display: none;
      position: fixed;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      background: #ffffff;
      color: black;
      padding: 20px;
      border-radius: 10px;
      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
      z-index: 10000;
      text-align: center;
    }