/* Apply readable monospace to body */
body {
  font-family: 'Anonymous Pro', monospace;
  font-size: 1.125rem;
  /* 18px for readability */
  line-height: 1.6;
  background-color: #202124;
  color: #E0E0E0;
  /* Add a subtle scanline effect */
  position: relative;
  overflow-x: hidden;
  /* Allow vertical scrolling, prevent horizontal */
}

/* Apply pixel font to specific elements */
header h1,
header p,
nav h2,
.sidebar-link,
main h2,
main h3,
.pixel-button {
  font-family: 'Press Start 2P', cursive;
}

body::before {
  content: " ";
  display: block;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(rgba(32, 33, 36, 0) 50%, rgba(0, 0, 0, 0.25) 50%), linear-gradient(90deg, rgba(255, 0, 0, 0.03), rgba(0, 255, 0, 0.02), rgba(0, 0, 255, 0.03));
  background-size: 100% 3px, 5px 100%;
  z-index: -1;
  pointer-events: none;
  opacity: 0.3;
}

/* Create a "pixelated" border effect (still used on sidebar) */
.pixel-border {
  border: 4px solid #E0E0E0;
  box-shadow: 0 0 0 4px #202124, 0 0 0 8px #E0E0E0;
  image-rendering: pixelated;
}

/* Style for the Google-colored accents */
.text-google-blue {
  color: #4285F4;
}

.text-google-red {
  color: #DB4437;
}

.text-google-yellow {
  color: #F4B400;
}

.text-google-green {
  color: #0F9D58;
}

.border-google-red {
  border-color: #DB4437;
}

.bg-google-blue {
  background-color: #4285F4;
}

.bg-google-red {
  background-color: #DB4437;
}

.bg-google-yellow {
  background-color: #F4B400;
}

.bg-google-green {
  background-color: #0F9D58;
}

.bg-gray {
  background-color: #DADCE0;
}

:root pre[class*="language-"] code[class*="language-"] {
  font-size: 0.9rem !important;
  /* Slightly smaller font size */
}

/* Remove default link styling */
main a {
  text-decoration: underline;
  color: #4285F4;
}

main a:hover {
}

/* --- LIST STYLING --- */

/* Reset all lists within main */
main ul,
main ol {
  list-style: none;
  padding-left: 0;
  margin-left: 0;
}

/* Indentation for nested lists */
main ul ul,
main ul ol,
main ol ul,
main ol ol {
  margin-left: 1.5rem;
  margin-top: 0.5rem;
}

/* Base styling for all list items */
main li {
  color: #E0E0E0;
  position: relative;
  padding-left: 1.5rem;
  margin-bottom: 0.5rem;
}

/* Unordered Lists (ul) */
main ul>li::before {
  content: '>';
  position: absolute;
  left: 0;
  color: #F4B400;
  /* Google Yellow */
}

/* Ordered Lists (ol) */
main ol {
  counter-reset: ol-counter;
  /* Use a specific counter name */
}

main ol>li {
  counter-increment: ol-counter;
}

main ol>li::before {
  content: counter(ol-counter) ".";
  /* Use the specific counter */
  position: absolute;
  left: 0;
  color: #F4B400;
  /* Google Yellow */
  font-weight: bold;
}

/* Sidebar link styles */
.sidebar-link {
  display: block;
  padding: 0.5rem 1rem;
  color: #AAA;
  transition: all 0.2s;
  font-size: 0.875rem;
  /* Adjust pixel font size */
}

.sidebar-link.active,
.sidebar-link:hover {
  background-color: #E0E0E0;
  color: #202124;
  text-decoration: none;
}

/* Button styling */
.pixel-button {
  padding: 0.75rem 1.5rem;
  /* font-family is set by the global rule */
  font-size: 0.875rem;
  /* Adjust pixel font size */
  text-transform: uppercase;
  color: #202124;
  border: 4px solid #202124;
  box-shadow: 0 0 0 4px #E0E0E0;
  transition: all 0.2s;
}

.pixel-button:hover {
  transform: translate(-2px, -2px);
  box-shadow: 2px 2px 0 4px #E0E0E0;
}

.pixel-button:active {
  transform: translate(0, 0);
  box-shadow: 0 0 0 4px #E0E0EZ;
}

a.pixel-button {
  display: block;
  width: -moz-fit-content;
  width: fit-content;
}