/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
/*
body {
  background-color: #000000;
  color: #00ff00;
  font-family: Verdana;
}
*/
@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+Mono:wght@400&display=swap');

body {
  background-color: #000000;
  color: #00ff00;
  font-family: 'Noto Sans Mono', monospace;
  padding: 20px;
  line-height: 1.6;
}

/* Green Phosphor Glow Effect */
h1, h2, p, a, pre, code {
  color: #00ff00;
  text-shadow: 0 0 5px rgba(0, 255, 0, 0.7);
}

/* Make ALL <p> tags bigger */
p, pre, code {
  font-size: 16px; /* p pre code font size*/
}

h1, h2, h3, h4 {
  white-space: nowrap;
  font-size: 20px; /* header font size*/
}

/* Terminal Links */
a {
  text-decoration: underline;
}

a:hover {
  background-color: #00ff00;
  color: #000000;
  text-shadow: none;
}

/* Blinking Terminal Cursor */
.cursor {
  display: inline-block;
  width: 3px;
  height: 1em;
  background-color: #00ff00;
  animation: blink 1s step-end infinite;
  vertical-align: middle;
}

.cursor2 {
  display: inline-block;
  width: 2px;
  height: 1em;
  background-color: #00ff00;
  animation: blink 1s step-end infinite;
  vertical-align: middle;
}

@keyframes blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}