:root {
  --jumbotron-padding-y: 3rem;
}

.jumbotron {
  padding-top: var(--jumbotron-padding-y);
  padding-bottom: var(--jumbotron-padding-y);
  margin-bottom: 0;
  background-color: #fff;
}
@media (min-width: 768px) {
  .jumbotron {
    padding-top: calc(var(--jumbotron-padding-y) * 2);
    padding-bottom: calc(var(--jumbotron-padding-y) * 2);
  }
}

.jumbotron p:last-child {
  margin-bottom: 0;
}

.jumbotron-heading {
  font-weight: 300;
}

.jumbotron .container {
  max-width: 40rem;
}

footer {
  padding-top: 3rem;
  padding-bottom: 3rem;
}

footer p {
  margin-bottom: .25rem;
}

.box-shadow { box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .05); }

.glow {
  color: #fff;
  -webkit-animation: glow 5s ease-in-out infinite alternate;
  -moz-animation: glow 5s ease-in-out infinite alternate;
  animation: glow 5s ease-in-out infinite alternate;
}

@-webkit-keyframes glow {
  from {
    /*text-shadow: 0 0 1px #fff, 0 0 1px #fff, 0 0 1px #e8fdf3, 0 0 1px #d1fae8, 0 0 1px #d1fae8, 0 0 1px #B7F8DB, 0 0 1px #B7F8DB;*/
  }
  
  to {
    text-shadow: 0 0 1px #fff, 0 0 2px #b4d9e4, 0 0 3px #a1cfdd, 0 0 4px #8fc6d6, 0 0 5px #7cbcd0, 0 0 6px #69b3c9, 0 0 7px #50A7C2;
  }
}
.full-width {
  width: 100%;
  background: yellow;
}

.code-block {
  background-color: #f8f8f8; /* Light grey background */
  border: 1px solid #ddd; /* Light grey border */
  border-left: 3px solid #f36d33; /* Distinctive left border */
  padding: 10px 15px;
  overflow: auto;
  font-family: 'Courier New', Courier, monospace; /* Monospaced font */
  font-size: 16px;
  line-height: 1.4;
  margin-bottom: 20px;
}

code {
  color: #333; /* Darker text for better readability */
}


/* General Style for the Code Container */
.bg-black {
  background-color: #000; /* Black background for the outermost container */
  width: 800px; /* Set a fixed width as per your preference */
  margin: auto; /* Center the block horizontally */
}

/* Style for the Code Header */
.bg-gray-800 {
  background-color: #2d3748; /* Dark gray background for the header */
  border-top-left-radius: 0.375rem; /* Rounded corners for the top-left of the header */
  border-top-right-radius: 0.375rem; /* Rounded corners for the top-right of the header */
}

.text-gray-200 {
  color: #edf2f7; /* Light gray text color */
}

/* General Style for the Code Content */
div.p-4 {
  padding: 1rem; /* Padding inside the code content area */
  background-color: #1a202c; /* Dark background for the code content */
  border-bottom-left-radius: 0.375rem; /* Rounded corners for the bottom-left */
  border-bottom-right-radius: 0.375rem; /* Rounded corners for the bottom-right */
  overflow-y: auto; /* Enable vertical scrolling if needed */
  max-width: 100%; /* Ensure it doesn't exceed the parent width */
  box-sizing: border-box; /* Include padding and border in the element's total width */
}

/* Style for the Code */
code {
  color: #f7fafc; /* Light color for the code text */
  font-family: 'Courier New', Courier, monospace; /* Monospaced font for the code */
}

/* Style for Syntax Highlighting */
.hljs-comment {
  color: #718096; /* Color for comments */
}

.hljs-keyword,
.hljs-meta,
.hljs-built_in,
.hljs-variable {
  color: #79c0ff; /* A lighter shade for better contrast */
}

.hljs-string,
.hljs-subst {
  color: #68d391; /* Color for strings and substitutions */
}

/* Style for the Copy Button */
button {
  background: none;
  border: none;
  cursor: pointer;
}

.icon-sm {
  width: 1rem; /* Small icon size */
  height: 1rem;
  fill: #a0aec0; /* Color for the icon */
}