:root {
  --go-blue: #00ADD8;
  --deep-blue: #2D3748;
  --light-gray: #F7FAFC;
  --white: #FFFFFF;
  --accent-gold: #F7B000;
  --code-bg: #1A202C;
  --text-primary: #2D3748;
  --text-secondary: #4A5568;
  --font-heading: 'Nunito', sans-serif;
  --font-body: 'Open Sans', sans-serif;
  --font-code: 'Fira Code', monospace;
}

body {
    margin: 0;
    width: 100%;
    height: 100vh;
    background-color: var(--light-gray);
    font-family: var(--font-body);
    color: var(--text-secondary);
    line-height: 1.6;
}

.menu a {
  color: var(--text-primary);
  padding: 0.5rem 1rem;
  text-decoration: none;
  border-radius: 6px;
  transition: background-color 0.2s ease-in-out;
}
.menu a:hover {
  background-color: rgba(0, 173, 216, 0.15); /* Transparent blue */
  color: var(--go-blue);
}
.menu a.active {
  background-color: var(--deep-blue);
  color: var(--white);
}

.content-section {
  background-color: var(--white);
  padding: 2rem;
  margin: 2rem;
  border-radius: 8px;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

h1, h2, h3 {
  font-family: var(--font-heading);
  color: var(--go-blue);
  font-weight: 700;
}

a {
  color: var(--go-blue);
}

.CodeMirror {
    height: 100%!important;
    font-size: 16px;
}