:root {                   
  /* Backgrounds            Asked chatgpt for Tron Style color palette */
  --background: #0A1F2C;    /* deep black-blue */
  --surface: #0c2028;      /* dark navy panel */

  /* Text */
  --text: #e8fbff;         /* soft neon white */
  --text-dim: #7fdfff;     /* muted cyan */

  /* Core Neon */
  --primary: #00E5FF;      /* electric cyan */
  --secondary: #0088ff;    /* digital blue */

  /* Accent */
  --accent: #ff842c;       /* neon orange */

  /* Lines / Glow */
  --border: #00e5ff44;     /* transparent cyan */
}

body {
  margin: 100px;
  background-color: var(--background);
  color: var(--text);
  font-size: 20px;
  min-height: 100vh;
  background:
    linear-gradient(to bottom, rgba(0, 0, 0, 0.8), transparent 60%),
    linear-gradient(var(--primary) 1px, transparent 1px), /*Horizontal lines*/
    linear-gradient(90deg, var(--primary) 1px, transparent 1px); /*Vertical lines*/

  background-size:
    100% 100%,
    50px 50px,
    50px 50px;
  

  background-color: var(--background);
}

h1{
  font-size: 3rem;
}

h2{
  font-size: 2rem;
}

h1, h2{
  font-family: 'TR2N', sans-serif;
}
p, a{
  font-family: 'Montserrat', sans-serif;
  text-transform: uppercase;
  
}
.btn{
  background-color: var(--surface);
  border-radius: 9px;
  margin: 10px 10px;
  padding: 10px 10px;
  border: 2px solid var(--primary);
  text-decoration: none;
  color: var(--text-dim)
}

.btn:hover{
  background-color: var(--background);
  transition: 0.3s ease;
  transform: scale(1.05);
  box-shadow: 0px 0px 10px var(--text-dim);
}

.btn2{
  background-color: var(--surface);
  border-radius: 9px;
  margin: 10px;
  padding: 10px 10px;
  border: 2px solid var(--accent);
  text-decoration: none;
  color: var(--accent)
}

.btn2:hover{
  background-color: var(--background);
  transition: 0.3s ease;
  transform: scale(1.05);
  box-shadow: 0px 0px 10px var(--accent);
}

.btn,
.btn2 {
  display: inline-block;
  transition: all 0.3s ease;
  padding: 16px 24px;
}