/* Base Styles */

body {
    
/* BACKGROUND!! */
  background: url('background.gif') repeat;
  background-size: cover; /* or 'contain' or just remove it if you want that tiled chaos */
  background-attachment: fixed;
  background-color: rgb(0, 0, 0); /* MAY WANT TO REMOVE THIS */
  color: rgb(46, 228, 199);
  font-family: 'Courier New', Courier, monospace;
  margin: 0;
  padding: 0;
}  

  /* Enter Screen, MUSIC in the Background */
#gate {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  background: black;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  font-family: monospace;
}

/* Turquoise colored Links */
.turq-link {
  color: rgb(46, 228, 199) !important;
  text-decoration: none;
}

.turq-link:hover {
  color: rgb(232, 8, 74) !important;
}

.glitch-title {
  font-size: 3rem;
  color: rgb(46, 228, 199);
  position: relative;
  animation: glitch 1s infinite;
  margin-bottom: 20px;
}

.glitch-button {
  background: rgb(232, 8, 74);
  border: none;
  padding: 1rem 2.5rem;
  font-size: 1.2rem;
  font-family: monospace;
  color: black;
  cursor: pointer;
  box-shadow: 0 0 12px rgb(232, 8, 74);
  transition: transform 0.2s ease;
}

.glitch-button:hover {
  transform: scale(1.1);
}

/* Glitch effect */
@keyframes glitch {
  0% { text-shadow: 2px 2px rgb(232, 8, 74); }
  20% { text-shadow: -2px -2px rgb(46, 228, 199); }
  40% { text-shadow: 2px -2px rgb(232, 8, 74); }
  60% { text-shadow: -2px 2px rgb(46, 228, 199); }
  80% { text-shadow: 2px 0 rgb(232, 8, 74); }
  100% { text-shadow: -2px 0 rgb(46, 228, 199); }
}

#bg-jp-text {
  position: fixed;
  top: 0; left: 0;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
  z-index: 0;
  overflow: hidden;
}

.jp-word {
  position: absolute;
  font-family: monospace;
  font-size: 1.5rem;
  color: rgb(46, 228, 199);
  opacity: 0;
  animation: typewriter 0.8s steps(10, end), fadeOut 4s forwards;
  white-space: nowrap;
}

@keyframes typewriter {
  from { width: 0; }
  to { width: 100%; }
}

@keyframes fadeOut {
  0% { opacity: 1; }
  90% { opacity: 0.3; }
  100% { opacity: 0; }
}

.container {
  max-width: 960px;
  margin: 0 auto;
  padding: 20px;
  background-color: rgba(0, 0, 0, 0.7); /* add this to create a semi transparent background in the section, improves visibility and readability of text */
}

/* Header */
header h1 {
  color: rgb(232, 8, 74);
  font-size: 2em;
  margin-bottom: 10px;
}

.intro {
  font-style: italic;
  margin-bottom: 30px;
}

/* Grid Layout */
.grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  grid-template-columns: repeat(4, 1fr);
  gap: 20px;
}

/* Entries */
.entry {
  background-color: rgba(255, 255, 255, 0.05);
  border: 1px solid rgb(232, 8, 74);
  padding: 15px;
  box-shadow: 0 0 8px rgba(232, 8, 74, 0.2);
  transition: transform 0.2s;
}

.entry:hover {
  transform: scale(1.02);
}

.entry h2 {
  color: rgb(232, 8, 74);
  font-size: 1.2em;
  margin-top: 0;
}

.entry a {
  color: rgb(46, 228, 199);
  text-decoration: underline;
}

/* Footer */
.footer {
  margin-top: 40px;
  font-size: 0.9em;
  color: rgba(46, 228, 199, 0.6);
  border-top: 1px dashed rgb(232, 8, 74);
  padding-top: 10px;
  text-align: center;
}