/* 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: #001100;
  color: #33ee33;
  font-family: Verdana;
  max-width: 800px;
  margin: 0 auto;
  padding: 0 50px;
}

h1 {
  font-family: 'Courier New', monospace;
}

@keyframes blink-soft {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0.25; }
}

.blink-soft {
  animation: blink-soft 1s infinite;
}

.terminal-shell {
  background: #020c05;
  border: 2px solid #33ee33;
  border-radius: 20px;
  padding: 30px;
  box-shadow: 0 0 30px rgba(51, 238, 51, 0.18);
}

.terminal-shell h1,
.terminal-shell p {
  color: #33ee33;
}

.terminal-shell h1 {
  margin: 0 0 14px;
}

.terminal-shell p {
  margin: 0;
  line-height: 1.6;
}

.neon-panel {
  margin-top: 28px;
  background: linear-gradient(145deg, #120b2e 0%, #1b0c4b 45%, #2f0f7e 100%);
  border: 1px solid rgba(111, 79, 255, 0.28);
  border-radius: 22px;
  padding: 26px;
  box-shadow: inset 0 0 25px rgba(46, 95, 255, 0.15), 0 0 20px rgba(4, 32, 96, 0.35);
  color: #7de4ff;
}

.neon-panel p,
.neon-panel ul,
.neon-panel li {
  color: #7de4ff;
}

.neon-panel img {
  width: 100%;
  height: auto;
  border-radius: 16px;
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 0 18px rgba(33, 83, 215, 0.25);
}

.button-row {
  display: flex;
  justify-content: center;
  flex-wrap: nowrap;
  gap: 12px;
  margin: 20px 0;
}

.button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, #5d3cff 0%, #a86eff 45%, #d397ff 100%);
  color: #eaf9ff;
  border: 1px solid rgba(207, 136, 255, 0.35);
  padding: 12px 22px;
  text-decoration: none;
  font-family: Verdana;
  font-size: 15px;
  border-radius: 14px;
  cursor: pointer;
  box-shadow: 0 0 18px rgba(168, 110, 255, 0.32), 0 0 32px rgba(175, 90, 255, 0.18);
  transition: transform 0.2s ease, box-shadow 0.2s ease, filter 0.2s ease, background 0.2s ease;
}

.button:hover {
  transform: translateY(-1px);
  background: linear-gradient(135deg, #8d5aff 0%, #c284ff 45%, #e7b1ff 100%);
  box-shadow: 0 0 26px rgba(168, 110, 255, 0.55), 0 0 42px rgba(191, 122, 255, 0.28);
  filter: saturate(1.15);
}

.button:active {
  transform: translateY(0);
}