/* Import a pixel-style font from Google Fonts */
@font-face {
  font-family: 'Jersey10';
  src: url('../fonts/Jersey_10/Jersey10-Regular.woff2') format('woff2'),
       url('../fonts/Jersey_10/Jersey10-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* 2. Import Jersey 15 */
@font-face {
  font-family: 'Jersey15';
  src: url('../fonts/jersey15.woff2') format('woff2'),
       url('../fonts/jersey15.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

@font-face {
  font-family: 'IndieFlower';
  src: url('../fonts/Indie_Flower/IndieFlower-Regular.woff2') format('woff2'),
       url('../fonts/Indie_Flower/IndieFlower-Regular.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}

/* 2. Import Jersey 15 */
@font-face {
  font-family: 'Lexend-Deca';
  src: url('../fonts/Lexend_Deca/LexendDeca-VariableFont_wght.woff2') format('woff2'),
       url('../fonts/Lexend_Deca/LexendDeca-VariableFont_wght.woff') format('woff');
  font-weight: normal;
  font-style: normal;
}



body {
  background-color: #0d1117;
  color: #e2e8f0;
  /*font-family: 'VT323', monospace; /* Classic Pixel Font */
  font-family: 'Lexend-Deca', sans-serif;
  font-size: 1.2rem;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* The Pixel-Pod Container */
.container {
  max-width: 800px;
  width: 90%;
  padding: 20px;
  text-align: center;
}

/* Chunky Pixel Border Effect */
.pixel-box {
  border: 4px solid #4eaf42;
  background: #161b22;
  padding: 20px;
  margin: 20px 0;
  /* This creates the 'stepped' pixel corner look */
  box-shadow: 
    5px 0 0 -1px #0d1117, 
    -5px 0 0 -1px #0d1117, 
    0 5px 0 -1px #0d1117, 
    0 -5px 0 -1px #0d1117,
    5px 0 0 1px #4eaf42, 
    -5px 0 0 1px #4eaf42, 
    0 5px 0 1px #4eaf42, 
    0 -5px 0 1px #4eaf42;
}

/* Retro Arcade Button */
.btn-pea {
  background-color: #a3e635;
  color: #0d1117;
  padding: 10px 20px;
  text-decoration: none;
  font-weight: bold;
  display: inline-block;
  transition: transform 0.1s;
  cursor: pointer;
  border: none;
  box-shadow: 4px 4px 0px #4eaf42;
}

.btn-pea:active {
  transform: translate(2px, 2px);
  box-shadow: 2px 2px 0px #4eaf42;
}

h1, h2 {
  font-family: 'Jersey10', sans-serif;
}


h1 {
  color: #a3e635;
  font-size: 8rem;
  text-shadow: 4px 4px #000;
  margin-top: 0.2em;
  margin-bottom: 0.3em;
}

.written{
  font-family: 'IndieFlower', serif;
  font-size: 3em;
}

.neon {
/* 1. The Gradient */
  background: linear-gradient(to bottom, #A3E635 0%, #4EAF42 100%);

  /* 2. Safari & Chrome Compatibility */
  -webkit-background-clip: text;
  background-clip: text;

  /* 3. The "Transparent" Fix */
  /* Using -webkit-text-fill-color is more robust for Safari than just 'color: transparent' */
  -webkit-text-fill-color: transparent; 
  color: transparent;

  /* 4. The Shadow */
  /* Safari sometimes struggles with drop-shadow on clipped text, 
     so we use a standard text-shadow which Safari handles better in this context */
  text-shadow: none; 
  filter: drop-shadow(4px 4px 0px #000);
}