/* ====================================
   Code Containers
==================================== */

.code-container {
    max-width: var(--max-width-sm, 40rem);
    margin: auto;
    background-color: var(--color-white, #fff);
    padding: var(--spacing-sm, 1rem);
}

body.dark-mode .code-container {
    background-color: var(--color-dark-mode, #111111);
}
  
.code-box {
    background-color: var(--color-dark, #333);
    color: var(--color-white, #fff);
    font-family: var(--font-code, 'Roboto Mono', monospace);
    overflow: auto;
    max-height: 30rem;
    padding: var(--spacing-sm, 1rem);
    white-space: pre-wrap;
    word-wrap: break-word;
    font-size: var(--font-size-sm, 0.875rem);
    border-radius: var(--border-radius-sm, 0.25rem);
}


@media (max-width: 767px) {
    .code-container {
      max-width: 100%;
      padding: var(--spacing-xs, 0.5rem);
    }
    
    .code-box {
      max-height: 20rem;
      padding: var(--spacing-xs, 0.5rem);
      font-size: var(--font-size-xs, 0.75rem);
    }
  }
  
  @media (min-width: 768px) and (max-width: 1024px) {
    .code-container {
      max-width: var(--max-width-md, 30rem);
      padding: var(--spacing-md, 1.5rem);
    }
    
    .code-box {
      max-height: 25rem;
      padding: var(--spacing-md, 1.5rem);
      font-size: var(--font-size-md, 0.875rem);
    }
  }