:root {
  --primary-bg: #22223b; 
  --text-color: #fffa65; 
  --accent-color: #ff0054; 
  --button-color: #00ff7f; 
  --font-family: 'Press Start 2P', cursive, monospace; 
  --ping-success: #66ff66; 
  --ping-error: #ff3333; 
  --border-style: 3px dashed var(--accent-color);
}

.code-block {
  background-color: #282c34;
  border: 1px solid #61afef;
  border-radius: 6px;
  padding: 15px;
  margin: 20px 0;
  overflow-x: auto;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 14px;
}

.code-block code {
  color: #abb2bf;
  white-space: pre;
  display: block;
}

.inline-code {
  background-color: #e0e0e0;
  color: #c9302c;
  padding: 2px 4px;
  border-radius: 3px;
  font-family: 'Consolas', 'Monaco', monospace;
  font-size: 0.9em;
}

body {
  background-color: #1a1a2e; 
  color: var(--text-color);
  font-family: var(--font-family);
  min-height: 100vh;
  margin: 0;
  padding: 20px;
  background-image: repeating-linear-gradient(
    45deg,
    var(--primary-bg),
    var(--primary-bg) 10px,
    #131320 10px,
    #131320 20px
  );
}

.ping-container {
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 20px;
  width: 90%;
  max-width: 600px;
  background-color: var(--primary-bg);
  border: var(--border-style);
  box-shadow: 0 0 15px var(--accent-color), 0 0 5px var(--text-color);
  padding: 30px;
  transform: rotate(-1deg);
  animation: flicker 0.15s infinite alternate; 
}



@keyframes flicker {
  0% { opacity: 1; }
  50% { opacity: 0.98; box-shadow: 0 0 16px var(--accent-color); }
  100% { opacity: 1; }
}

h1 {
  text-align: center;
  color: var(--button-color);
  text-shadow: 3px 3px 0 var(--accent-color); 
  margin-bottom: 25px;
  font-size: 1.5em; 
}


.input-group label {
  font-family: var(--font-family); 
  font-size: 0.9em;
  color: var(--button-color); 
  display: block;
  margin-bottom: 5px;
  text-transform: uppercase;
  letter-spacing: 1px;
  
 
  text-shadow: 1px 1px 0 var(--accent-color); 
}

.input-group label::before {
  content: '>>>'; 
  color: var(--text-color); 
  margin-right: 8px;
  animation: blink-arrow 1.5s steps(1) infinite;
}

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

.input-group {
    flex-direction: column; 
    align-items: flex-start;
}

#target-input, #ping-button {
    width: 100%; 
}

#target-input {
  flex-grow: 1;
  padding: 10px 15px;
  background-color: var(--primary-bg);
  color: var(--text-color);
  border: 2px solid var(--button-color);
  font-size: 0.8em;
  outline: none;
  box-shadow: inset 0 0 10px rgba(0, 255, 127, 0.5);
  transition: border-color 0.1s;
}

#ping-button {
  padding: 10px 15px;
  background-color: var(--accent-color);
  color: var(--primary-bg);
  border: 4px solid var(--button-color);
  cursor: pointer;
  font-size: 0.8em;
  font-weight: bold;
  letter-spacing: 2px;
  text-transform: uppercase;
  transition: background-color 0.1s, border-color 0.1s;
}

#ping-button:hover {
  background-color: var(--button-color);
  border-color: var(--accent-color);
  color: var(--primary-bg);
}

#ping-button:active {
  transform: scale(0.95);
  box-shadow: 0 0 5px var(--text-color);
}



#results-area {
  background-color: #000000; 
  border: 4px inset var(--button-color); 
  padding: 15px;
  min-height: 150px;
  overflow: auto;
  white-space: pre-wrap;
  font-size: 0.9em;
  line-height: 1.2;
  background-image: linear-gradient(
    to bottom, 
    rgba(0,0,0,0.5) 1px, 
    transparent 1px
  );
  background-size: 100% 2px;
}


.ping-success {
  color: var(--ping-success);
  font-weight: bold;
  animation: blink 0.5s steps(1) infinite alternate;
}

.ping-error {
  color: var(--ping-error);
  font-weight: bold;
  text-decoration: underline;
  text-shadow: 1px 1px 0 var(--text-color);
}

.ping-info {
  color: var(--accent-color);
}

@keyframes blink {
  50% { opacity: 0.5; }
}