/* style.css */  

@import url('https://fonts.googleapis.com/css2?family=Share+Tech+Mono&display=swap');

body {
  background-color: #000000;
  color: #00ff00;
  font-family: 'Share Tech Mono', monospace;
  margin: 0;
  padding: 20px;
  letter-spacing: 0.1em;
  text-shadow:
    0 0 5px #00ff00,
    0 0 10px #00ff00,
    0 0 20px #00ff00,
    0 0 40px #0f0;
}

h1, h2, h3 {
  border-bottom: 1px solid #00ff00;
  padding-bottom: 5px;
  text-transform: uppercase;
  text-shadow: 0 0 10px #00ff00;
}

a {
  color: #0f0;
  text-decoration: none;
  transition: color 0.3s ease;
}

a:hover {
  color: #00ff7f;
  text-shadow: 0 0 8px #00ff7f;
}

button {
  background: transparent;
  border: 2px solid #00ff00;
  color: #00ff00;
  padding: 10px 20px;
  font-family: 'Share Tech Mono', monospace;
  cursor: pointer;
  box-shadow: 0 0 5px #00ff00;
  transition: background-color 0.3s ease, color 0.3s ease;
}

button:hover {
  background-color: #00ff00;
  color: #000000;
  box-shadow: 
    0 0 10px #00ff00,
    0 0 20px #00ff00;
}

img {
  display: block;
  margin: 0 auto;
}

code, pre {
  background-color: #0a0a0a;
  border: 1px solid #00ff00;
  padding: 10px;
  display: block;
  white-space: pre-wrap;
  overflow-x: auto;
  box-shadow: 
    0 0 5px #00ff00 inset;
}

@keyframes flicker {
  0%, 19%, 21%, 23%, 25%, 54%, 56%, 100% {
    opacity: 1;
    text-shadow:
      0 0 5px #00ff00,
      0 0 10px #00ff00,
      0 0 20px #00ff00,
      0 0 40px #0f0;
  }
  
  20%, 22%, 24%, 55% {
    opacity: 0.5;
    text-shadow: none;
  }
}

.flicker {
  animation: flicker 3s infinite;
}

.index-page {
  background-color: #000;
  background: radial-gradient(circle at center, #001100, #000000);
  font-family: 'Share Tech Mono', monospace;
  color: #00ff00;
  height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 60px;
}

.welcome-typing {
  font-size: 36px;
  letter-spacing: 3px;
}

.welcome-typing i {
    font-size: 42px;
    animation: glow 2.5s infinite alternate;
}

@keyframes glow {
    from {
        text-shadow: 
            0 0 10px #00ff00,
            color: #00ff00;
    }
    
    to {
        text-shadow:
            0 0 25px #33ff33,
            color: #33ff33;
    }
}

.typing-text {
    white-space: nowrap;
    overflow: hidden;
    border-right: 4px solid #00ff00; /* Cursor effect */
    width: auto; /* Adjust width to fit content */
    animation:
        typing .4s steps(16, end) forwards,
        blink-caret .75s step-end infinite; /* Adjust typing speed */
}

.typing-cursor {
    color: #00ff00; 
    animation: blink-caret .75s step-end infinite; 
    margin-left: -4px; 
}

@keyframes typing {
    from { width: 0; }
    to { width: auto; } /* Adjust for dynamic text */
}

@keyframes blink-caret {
    from { border-color: transparent; }
    to { border-color: #00ff00; }
}

.index-page .link-container {
    display: flex; 
    justify-content: center; 
    align-items: center; 
}

.index-page .hacker-link {
    color: #00ff00; 
    font-size:28px; 
    padding:20px; 
    border-radius:12px; 
    text-decoration:none; 
    text-shadow:
        -1px -1px #000,  
        -1px -1px #000,  
        -1px -1px #000; 
    box-shadow:
        -1px -1px #000; 
}

.index-page .hacker-link:hover {
    color:#33ff33; 
}

#loading-screen {
    position: fixed; 
    inset:0; 
    background-color:#000; 
    display:flex; 
    flex-direction:column; 
    justify-content:center; 
    align-items:center; 
    color:#00ff00; 
}