@charset "UTF-8";
/* _base.scss for natlang.io */
:root {
  --bg-primary: #1e1e1e;
  --bg-secondary: #2d2d2d;
  --text-primary: #cdcdcd;
  --text-disabled: #a4a4a4;
  --text-secondary: #bbe4cc;
  --header-bg: #1e1e1e;
  --header-shadow: rgba(0, 0, 0, 0.5);
  --header-logo-color: #ff79c6;
  --nav-link-color: #2bff00;
  --header-main-h2-color: #50fa7b;
  --header-sub-h3-color: #ffb86c;
  --feature-icon-bg: #2d2d2d;
  --feature-icon-text: #ff79c6;
  --form-border: #444444;
  --text-error: #8b0000;
}

/* Base Styles */
html {
  box-sizing: border-box;
}

*,
*::before,
*::after {
  box-sizing: inherit;
}

body {
  font-family: "Inter", sans-serif;
  background-color: var(--bg-primary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  text-decoration: underline;
  color: inherit;
}

/* Container for consistent content width */
.container {
  max-width: 1280px; /* Equivalent to max-w-7xl roughly, adjust if 6xl is preferred */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1.5rem; /* px-6 */
  padding-right: 1.5rem; /* px-6 */
}

/* Responsive padding for sections */
.section-padding {
  padding-left: 1.5rem; /* px-6 */
  padding-right: 1.5rem; /* px-6 */
}

@media (min-width: 768px) {
  .section-padding {
    padding-left: 2rem; /* md:px-8 */
    padding-right: 2rem; /* md:px-8 */
  }
}
@media (min-width: 1024px) {
  .section-padding {
    padding-left: 3rem; /* lg:px-12 */
    padding-right: 3rem; /* lg:px-12 */
  }
}
/* Header Styles */
.main-header {
  background-color: var(--header-bg);
  box-shadow: 0 1px 2px 0 var(--header-shadow); /* shadow-sm */
  padding-top: 1rem; /* py-4 */
  padding-bottom: 1rem; /* py-4 */
  border-bottom-left-radius: 0.75rem; /* rounded-b-xl */
  border-bottom-right-radius: 0.75rem; /* rounded-b-xl */
}

.header-logo {
  font-size: 1.5rem; /* text-2xl */
  font-weight: bold;
  color: var(--header-logo-color);
  transition: color 0.3s ease;
}

.header-logo:hover {
  color: #43228d; /* Equivalent to indigo-800 from Tailwind's default palette */
}

.main-nav-links {
  display: none;
  list-style: none;
  padding: 0;
  margin: 0;
  gap: 1.5rem; /* space-x-6 */
}

@media (min-width: 768px) {
  .main-nav-links {
    display: flex;
  }
}
.main-nav-links li a {
  color: var(--nav-link-color);
  font-weight: 700; /* font-medium */
  transition: color 0.3s ease;
}

.main-nav-links li a:hover {
  color: var(--header-main-h2-color);
}

.get-started-button {
  background-color: #4f46e5; /* indigo-600 */
  color: #fff;
  padding: 0.5rem 1.25rem; /* px-5 py-2 */
  border-radius: 0.5rem; /* rounded-lg */
  font-weight: 600; /* font-semibold */
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* shadow-md */
  display: inline-block; /* to apply transform */
}

.get-started-button:hover {
  background-color: #4338ca; /* indigo-700 */
  transform: scale(1.05);
}

.mobile-menu-button {
  color: var(--text-secondary);
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
}

@media (min-width: 768px) {
  .mobile-menu-button {
    display: none;
  }
}
.mobile-menu {
  display: none; /* hidden */
  background-color: var(--header-bg);
  margin-top: 1rem; /* mt-4 */
  border-radius: 0.5rem; /* rounded-lg */
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1); /* shadow-lg */
  padding: 1rem; /* p-4 */
}

.mobile-menu.active {
  display: block; /* For JS toggle */
}

.mobile-menu ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.75rem; /* space-y-3 */
}

.mobile-menu ul li a {
  display: block;
  color: var(--nav-link-color);
  padding: 0.5rem 0.75rem; /* px-3 py-2 */
  border-radius: 0.375rem; /* rounded-md */
}

.mobile-menu ul li .mobile-get-started-button {
  text-align: center;
  background-color: #4f46e5; /* indigo-600 */
  color: #fff;
  padding: 0.5rem 1rem; /* px-4 py-2 */
  border-radius: 0.5rem; /* rounded-lg */
  transition: background-color 0.3s ease;
  margin-top: 0.5rem; /* mt-2 */
}

.mobile-menu ul li .mobile-get-started-button:hover {
  background-color: #4338ca; /* indigo-700 */
}

/* Hero Section Styles */
.hero-section {
  display: flex;
  align-items: center;
  background-color: var(--bg-primary); /* Use your dark background */
  background-image: linear-gradient(rgba(255, 121, 198, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 121, 198, 0.05) 1px, transparent 1px), linear-gradient(rgba(80, 250, 123, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(80, 250, 123, 0.05) 1px, transparent 1px);
  background-size: 25px 25px, 25px 25px, 50px 50px, 50px 50px;
  color: var(--text-primary);
  padding-top: 5rem;
  padding-bottom: 5rem;
  border-radius: 0.75rem;
  margin-top: 2rem;
  margin-left: 1rem;
  margin-right: 1rem;
  max-width: 96rem;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1), inset 0 0 10px rgba(255, 255, 255, 0.08); /* The new inner shadow */
}

#hero p {
  text-align: left;
  padding-left: 2rem;
}

@media (min-width: 768px) {
  .hero-section {
    margin-left: auto;
    margin-right: auto;
    max-width: 1152px; /* max-w-6xl */
  }
}
.hero-content {
  text-align: center;
  width: 100%; /* container takes care of max-width */
}

.hero-buttons {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1rem; /* space-y-4 */
}

.hero-buttons a {
  text-decoration: none;
}

@media (min-width: 640px) {
  .hero-buttons {
    flex-direction: row;
    gap: 1rem; /* sm:space-x-4, sm:space-y-0 */
  }
}
div.center {
  text-align: center;
}

.hero-button-primary {
  background-color: #3730a3; /* indigo-800 */
  color: #fff;
  border: 2px solid #3730a3; /* border-2 border-indigo-800 */
  padding: 0.75rem 2rem; /* px-8 py-3 */
  border-radius: 0.5rem; /* rounded-lg */
  font-size: 1.125rem; /* text-lg */
  font-weight: 600; /* font-semibold */
  transition: all 0.3s ease;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -2px rgba(0, 0, 0, 0.1); /* shadow-md */
  display: inline-block; /* to apply transform */
}

.hero-button-primary:hover {
  background-color: #312e81; /* indigo-900 */
  transform: scale(1.05);
}

/* Footer Styles */
.main-footer {
  background-color: #000; /* bg-gray-800 */
  color: #a0a0a0; /* text-normal-300 */
  padding-top: 2.5rem; /* py-10 */
  padding-bottom: 2.5rem; /* py-10 */
  border-top-left-radius: 0.75rem; /* rounded-t-xl */
  border-top-right-radius: 0.75rem; /* rounded-t-xl */
  margin-top: 3rem; /* mt-12 */
}

.footer-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 2rem; /* gap-8 */
}

@media (min-width: 768px) {
  .footer-grid {
    grid-template-columns: repeat(2, 1fr);
    text-align: left; /* md:text-left */
  }
}
.footer-heading {
  font-size: 1.25rem; /* text-xl */
  font-weight: bold;
  color: #fff;
  margin-bottom: 1rem; /* mb-4 */
}

.footer-text {
  font-size: 0.875rem; /* text-sm */
}

.footer-links-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0.5rem; /* space-y-2 */
}

.footer-link {
  color: #a0a0a0; /* text-normal-300 / text-normal-400 */
  transition: color 0.2s ease;
}

.footer-link:hover {
  color: #fff;
}

.footer-social-links {
  display: flex;
  gap: 1rem; /* space-x-4 */
  margin-top: 1rem; /* mt-4 */
}

@media (min-width: 768px) {
  .footer-social-links {
    justify-content: flex-start; /* md:justify-start */
  }
}
.footer-copyright {
  text-align: center;
  font-size: 0.875rem; /* text-sm */
  color: #808080; /* text-normal-500 */
  margin-top: 2rem; /* mt-8 */
  padding-top: 3rem; /* pt-12 */
  border-top: 1px solid #444; /* border-t border-gray-700 */
}

/* Marked Markdown Output Styling */
/* Headings */
.markdown-h1 {
  font-size: 2.25rem; /* text-3xl */
  font-weight: bold;
  text-align: center;
  color: var(--text-primary); /* text-normal-800 */
  margin-bottom: 3rem; /* mb-12 */
}

@media (min-width: 640px) {
  .markdown-h1 {
    font-size: 2.5rem; /* sm:text-4xl */
  }
}
.markdown-h2 {
  font-size: 1.5rem; /* text-2xl */
  font-weight: bold;
  text-align: center;
  color: var(--text-primary); /* text-normal-800 */
  margin-bottom: 3rem; /* mb-12 */
}

@media (min-width: 640px) {
  .markdown-h2 {
    font-size: 2.5rem; /* sm:text-4xl */
  }
}
.markdown-h3 {
  font-size: 1.25rem; /* text-xl */
  font-weight: bold;
  color: var(--text-primary); /* text-normal-900 */
  margin-bottom: 0.5rem; /* mb-2 */
  text-align: center;
}

.markdown-h4 {
  font-size: 1.125rem; /* text-lg */
  font-weight: 600; /* font-semibold */
  color: var(--text-primary); /* text-normal-900 */
  margin-bottom: 0.25rem; /* mb-1 */
}

.markdown-h5, .markdown-h6 {
  font-size: 1rem; /* text-base */
  font-weight: 600; /* font-semibold */
  color: var(--text-primary); /* text-normal-900 */
  margin-bottom: 0.25rem; /* mb-1 */
}

/* Common markdown content styles for max-width, centering, padding */
.markdown-content-container {
  max-width: 1024px; /* max-w-screen-lg */
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem; /* px-4 */
  padding-right: 1rem; /* px-4 */
}

@media (min-width: 640px) {
  .markdown-content-container {
    padding-left: 1.5rem; /* sm:px-6 */
    padding-right: 1.5rem; /* sm:px-6 */
  }
}
@media (min-width: 1024px) {
  .markdown-content-container {
    padding-left: 2rem; /* lg:px-8 */
    padding-right: 2rem; /* lg:px-8 */
  }
}
.markdown-paragraph {
  font-size: 1.25rem; /* text-xl */
  color: var(--text-secondary); /* text-normal-600 */
  margin-bottom: 2rem; /* mb-8 */
  text-align: center;
}

.bg-feature-card,
.bg-form-card,
.bg-endpoint-card {
  background-color: var(--bg-secondary);
}

.bg-body-secondary {
  background-color: var(--bg-primary);
}

.feature-icon-bg {
  background-color: var(--feature-icon-bg);
  color: var(--feature-icon-text);
}

.shadow-sm {
  box-shadow: 0 1px 2px 0 var(--header-shadow);
}

.shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.2), 0 4px 6px -2px rgba(0, 0, 0, 0.1);
}

.shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.1);
}

.shadow-inner {
  box-shadow: inset 0 2px 4px 0 rgba(0, 0, 0, 0.1);
}

.text-normal-600 {
  color: var(--text-secondary);
}

.text-normal-700 {
  color: var(--text-secondary);
}

.text-normal-800 {
  color: var(--text-primary);
}

.text-normal-900 {
  color: var(--text-primary);
}

.header-logo-color {
  color: var(--header-logo-color);
}

.nav-link-color {
  color: var(--nav-link-color);
}

.nav-link-color:hover {
  color: var(--header-main-h2-color);
}

h2.text-normal-800 {
  color: var(--header-main-h2-color);
}

h3.text-normal-900 {
  color: var(--header-sub-h3-color);
}

.border-gray-300 {
  border-color: var(--form-border);
}

.focus\:border-indigo-500 {
  border-color: #bd93f9;
}

.bg-gray-800 {
  background-color: #000000;
}

.text-white {
  color: #ffffff;
}

.text-normal-300 {
  color: #a0a0a0;
}

.code-scroll-container::-webkit-scrollbar {
  height: 8px;
}

.code-scroll-container::-webkit-scrollbar-track {
  background: var(--bg-secondary);
  border-radius: 10px;
}

.code-scroll-container::-webkit-scrollbar-thumb {
  background: var(--text-secondary);
  border-radius: 10px;
}

.code-scroll-container::-webkit-scrollbar-thumb:hover {
  background: var(--header-logo-color);
}

.embed-form-iframe {
  width: 100%;
  height: 800px;
  border: 0px;
  margin: 0px;
}

p a, span a, footer a {
  text-decoration: underline;
  font-weight: bold;
}

.blockonomics-link {
  font-size: small;
  color: #ff79c6 !important;
  text-decoration: none;
  overflow-wrap: break-word;
  padding: 0;
  margin: 0;
  clear: none;
}

.blockonomics-link a img {
  max-width: 100%;
  height: auto;
  margin: 0;
}

div.blockonomics-link {
  border: 1px solid white;
  max-width: 252px; /* added 2x border size */
}

div.blockonomics-link a p {
  padding-left: 10px;
  padding-right: 10px;
}

.blockonomics-link a {
  text-decoration: none !important;
}

p code.foo {
  color: #00ee00 !important;
}

/* The dropdown container */
.dropdown {
  float: left;
  overflow: hidden;
}

/* Dropdown button */
.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit; /* Important for vertical align on mobile phones */
  margin: 0; /* Important for vertical align on mobile phones */
}

/* Dropdown content (hidden by default) */
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #3c3c3c;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}

/* Links inside the dropdown */
.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}

/* Add a grey background color to dropdown links on hover */
.dropdown-content a:hover {
  background-color: #333333;
}

/* Show the dropdown menu on hover */
.dropdown:hover .dropdown-content {
  display: block;
}

/* Error messages for displaying API messages */
.error-message {
  color: red;
  font-size: 0.9em;
  margin-top: 5px;
  display: none; /* Hidden by default */
}

/* Info messages for displaying API messages */
.info-message {
  /* color: green; */
  font-size: 0.9em;
  margin-top: 5px;
  display: none; /* Hidden by default */
}

div.form input, button {
  padding: 10px;
  background-color: #000;
  color: white;
  font-size: large;
}

div.form button {
  padding: 20px;
}

td {
  margin: 0px;
  padding: 5px;
}

td button {
  width: 100%;
  height: 100%;
}

td input {
  text-align: center;
  width: 100%;
}

td span {
  margin: auto;
}

input[type=checkbox] {
  position: absolute;
  opacity: 0;
  cursor: pointer;
  height: 0;
  width: 0;
}

.checkmark {
  display: inline-block;
  height: 20px;
  width: 20px;
  background-color: #eee; /* Default background */
  border: 1px solid #ccc;
  border-radius: 4px;
}

/* Style the checkmark when the checkbox is checked */
input[type=checkbox]:checked + .checkmark {
  background-color: teal;
  border-color: teal;
}

/* Add a custom checkmark icon */
input[type=checkbox]:checked + .checkmark:after {
  content: "✔";
  display: block;
  color: #fff;
  font-size: 16px;
  text-align: center;
  line-height: 20px;
}

#errors {
  color: red;
  font-size: x-large;
  display: none;
  padding: 2rem;
  margin: 2rem;
}

#errors::before {
  content: "⛔️ There was an error: ";
}

button.error {
  color: rgb(0, 0, 0);
  background-color: rgba(95, 0, 0, 0.544);
  font-weight: bold;
}

code {
  color: lime;
  background-color: #333333;
  padding: 0.5rem;
}

#main {
  align-items: center;
  max-width: 90vw;
  margin: auto;
}

button.tool {
  background-color: black;
  font-size: 1rem;
  padding: 0.3rem;
}

button.tool:hover {
  background-color: rgb(10, 50, 0);
  font-size: 1rem;
  padding: 0.3rem;
}

p.warning {
  color: orange;
}

p.info {
  color: var(--nav-link-color);
}

p.error {
  color: var(--text-error);
}

a.heading-link {
  font-size: 0.75rem;
}

nav a, nav div a, nav ul li a {
  text-decoration: none;
}

nav ul li a {
  color: var(--nav-link-color);
}

.main-nav {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* Navbar container */
nav, .main-header {
  overflow: hidden;
  background-color: #333;
  font-family: "Inter", "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
}

/* Links inside the navbar */
nav ul li a {
  float: left;
  font-size: 16px;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
}

nav ul li a:hover, .dropdown:hover .dropbtn {
  background-color: rgb(77, 72, 72);
}

#start-button {
  font-weight: bolder;
  padding: 0.5rem;
  margin: 1px;
  border: 1px solid black;
}

#start-button:hover {
  background-color: black;
}

.foo {
  color: green;
}

input.otpcode {
  font-size: 2rem;
  font-family: monospace;
  font-weight: bold;
  padding: 0.5rem;
  width: 12rem;
}

input {
  background-color: #3d3d3d;
}

.quantity-minus, .quantity-minus {
  background-color: black;
}

/* Container for the whole component */
.quantity-input-container {
  display: flex;
  align-items: center;
  border: 1px solid #ccc;
  border-radius: 5px;
  width: fit-content;
  overflow: hidden; /* To keep the border-radius on the corners */
}

/* Style for the buttons */
.quantity-input-container button {
  background-color: #f0f0f0;
  border: none;
  padding: 10px 20px;
  font-size: 1.5rem;
  cursor: pointer;
  -webkit-user-select: none; /* Prevent text selection on click */
  user-select: none;
}

.quantity-input-container button:hover {
  background-color: #ddd;
}

/* Style for the input field */
.quantity-input-container input {
  border: none;
  text-align: center;
  width: 50px;
  font-size: 1.5rem;
  padding: 10px 5px;
  clear: none;
}

/* Hide default arrows for Chrome, Safari, Edge, and Opera */
.quantity-input-container input::-webkit-outer-spin-button,
.quantity-input-container input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

button#pay {
  font-size: 1.5rem;
  clear: none;
}

input[type=email], input[type=text], select {
  background-color: var(--bg-primary) !important;
  color: var(--primary-color) !important;
  font-size: 2rem;
  padding: 0.5rem;
  margin: 0.5rem;
  border: 1px solid black;
}

.quantity-input-container button {
  background-color: var(--bg-primary) !important;
  color: var(--primary-color) !important;
}

input:disabled[text] {
  color: var(--text-disabled) !important;
}

a.linked {
  text-decoration: underline !important;
}

#otp_entry {
  border: 1px solid black;
  width: fit-content;
  padding: 1rem;
}

button {
  margin: 0.5rem;
}

.foo {
  color: green;
}

#work-in-progress {
  text-align: center;
  padding: 0;
  background-color: --var(--bg-secondary);
  margin-bottom: 2em;
  font-family: sans-serif;
  border-radius: 8px;
}

#work-in-progress h3::after {
  content: "";
}

#toast-container {
  position: fixed;
  bottom: 20px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 1000;
}

.toast {
  background-color: #333;
  color: white;
  padding: 10px 15px;
  margin-bottom: 10px;
  border-radius: 5px;
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
  position: relative; /* For close button */
}

.toast.show {
  opacity: 1;
}

.toast.success, .toast.info {
  background-color: #4CAF50;
}

.toast.error {
  background-color: #f44336;
}

.toast-close {
  position: absolute;
  top: 5px;
  right: 5px;
  cursor: pointer;
  font-size: 16px;
}

code.copyable {
  position: relative;
  /* This is crucial for positioning the pseudo-element */
  background-color: #333333;
  padding: 0.5rem;
  overflow: auto;
  /* In case the code block is too wide */
  cursor: pointer;
}

code.copyable::after {
  content: "";
  position: absolute;
  bottom: 0.5rem;
  right: 0.5rem;
  width: 1rem;
  height: 1rem;
  color: white !important;
  background-image: url("data:image/svg+xml,%3Csvg clip-rule='evenodd' fill-rule='evenodd' stroke-linejoin='round' stroke-miterlimit='2' viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='m6 19v2c0 .621.52 1 1 1h2v-1.5h-1.5v-1.5zm7.5 3h-3.5v-1.5h3.5zm4.5 0h-3.5v-1.5h3.5zm4-3h-1.5v1.5h-1.5v1.5h2c.478 0 1-.379 1-1zm-1.5-1v-3.363h1.5v3.363zm0-4.363v-3.637h1.5v3.637zm-13-3.637v3.637h-1.5v-3.637zm11.5-4v1.5h1.5v1.5h1.5v-2c0-.478-.379-1-1-1zm-10 0h-2c-.62 0-1 .519-1 1v2h1.5v-1.5h1.5zm4.5 1.5h-3.5v-1.5h3.5zm3-1.5v-2.5h-13v13h2.5v-1.863h1.5v3.363h-4.5c-.48 0-1-.379-1-1v-14c0-.481.38-1 1-1h14c.621 0 1 .522 1 1v4.5h-3.5v-1.5z' fill='lime' fill-rule='nonzero'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: contain;
  opacity: 0.5;
  transition: opacity 0.2s;
}

code.copyable:hover::after {
  opacity: 1;
}

code {
  color: lime;
  line-height: 2rem;
}

code.copyable {
  padding-right: 2rem;
}

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