/* Old Internet Starter Styles */

/* Base styles */
* {
  box-sizing: border-box;
}


body {
  color: #0000CD; /* Medium blue */
  background-color: #baffca; /* Dull lime green */
  margin-left: 30%;
  margin-right: 30%;
  padding: 20px 0;
  line-height: 1.2;
  overflow-x: hidden; /* prevents horizontal scrolling */

}

.cover-image {
    max-width: 100%;
    height: auto;
    display: block; /* removes inline spacing */
}

/* Mobile responsive - remove side margins */
@media (max-width: 768px) {
  body {
    margin: 0 10px;
  }
}

/* Basic typography */
h1, h2, h3, h4, h5, h6 {
  font-family: 'EB Garamond', serif;
  color: #000000; /* Navy blue */
  margin-bottom: 16px;
}

h1 {
  font-size: 2.5em;
  text-decoration: underline;
}

h2 {
  font-size: 2em;
}

h3 {
  font-size: 1.5em;
}

p {
  font-family: 'Times New Roman', Times, serif;

  margin-bottom: 12px;
  font-size: 16px;
}

/* Links with old-school style */
a {
  color: #0000EE; /* Classic blue link */
  text-decoration: underline;
}

a:visited {
  color: #551A8B; /* Purple visited */
}

a:hover {
  color: #FF0000; /* Red hover */
  text-decoration: none;
}

/* Surreal and weird text effects */
.glitch-text {
  position: relative;
  font-weight: bold;
  animation: glitch 2s infinite;
}

.glitch-text::before,
.glitch-text::after {
  content: attr(data-text);
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
}

.glitch-text::before {
  animation: glitch-1 0.5s infinite;
  color: #ff0000;
  z-index: -1;
}

.glitch-text::after {
  animation: glitch-2 0.5s infinite;
  color: #00ff00;
  z-index: -2;
}

@keyframes glitch {
  0%, 100% { transform: translate(0); }
  20% { transform: translate(-2px, 2px); }
  40% { transform: translate(-2px, -2px); }
  60% { transform: translate(2px, 2px); }
  80% { transform: translate(2px, -2px); }
}

@keyframes glitch-1 {
  0%, 100% { transform: translate(0); }
  10% { transform: translate(-2px, -2px); }
  20% { transform: translate(2px, 2px); }
}

@keyframes glitch-2 {
  0%, 100% { transform: translate(0); }
  30% { transform: translate(2px, -2px); }
  40% { transform: translate(-2px, 2px); }
}

.wavy-text {
  animation: wave 2s ease-in-out infinite;
  display: inline-block;
}

@keyframes wave {
  0%, 100% { transform: translateY(0px); }
  25% { transform: translateY(-10px); }
  75% { transform: translateY(10px); }
}

.stretchy-text {
  animation: stretch 3s ease-in-out infinite;
  display: inline-block;
  transform-origin: center;
}

@keyframes stretch {
  0%, 100% { transform: scaleX(1) scaleY(1); }
  25% { transform: scaleX(1.5) scaleY(0.8); }
  50% { transform: scaleX(0.8) scaleY(1.3); }
  75% { transform: scaleX(1.2) scaleY(0.9); }
}

.rainbow-text {
  background: linear-gradient(45deg, #ff0000, #ff7700, #ffff00, #00ff00, #0077ff, #0000ff, #7700ff);
  background-size: 400% 400%;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  animation: rainbow 3s ease-in-out infinite;
}

@keyframes rainbow {
  0%, 100% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
}

.jittery-text {
  animation: jitter 0.1s infinite;
  display: inline-block;
}

@keyframes jitter {
  0% { transform: translate(0, 0); }
  10% { transform: translate(-1px, 1px); }
  20% { transform: translate(1px, -1px); }
  30% { transform: translate(-1px, -1px); }
  40% { transform: translate(1px, 1px); }
  50% { transform: translate(-1px, 1px); }
  60% { transform: translate(1px, -1px); }
  70% { transform: translate(-1px, -1px); }
  80% { transform: translate(1px, 1px); }
  90% { transform: translate(-1px, 1px); }
  100% { transform: translate(0, 0); }
}

.wobble-text {
  animation: wobble 2s ease-in-out infinite;
  display: inline-block;
  transform-origin: center;
}

@keyframes wobble {
  0%, 100% { transform: rotate(0deg); }
  25% { transform: rotate(-5deg); }
  75% { transform: rotate(5deg); }
}

.shadow-text {
  text-shadow: 
    3px 3px 0px #FF0000,
    6px 6px 0px #00FF00,
    9px 9px 0px #0000FF;
  font-weight: bold;
}

.blink-text {
  animation: blink 1s infinite;
}

@keyframes blink {
  0%, 50% { opacity: 1; }
  51%, 100% { opacity: 0; }
}

/* Old-school elements */
.marquee-container {
  overflow: hidden;
  background-color: #FFFF00;
  border: 2px solid #FF0000;
  padding: 0px;
}

.marquee-text {
  animation: marquee 10s linear infinite;
  display: inline-block;
  white-space: nowrap;
  
}

@keyframes marquee {
  0% { transform: translateX(100%); }
  100% { transform: translateX(-100%); }
}

.old-button {
  background-color: #C0C0C0;
  border: 3px outset #C0C0C0;
  font-family: 'Times New Roman', Times, serif;
  font-size: 14px;
  cursor: pointer;
  color: #000000;
}

.old-button:hover {
  background-color: #E0E0E0;
}

.old-button:active {
  border: 2px inset #C0C0C0;
}

/* Retro containers */
.retro-box {
  border: 3px solid #000080;
  background-color: #F0F0F0;
  padding: 20px;
  margin: 20px 0;
  box-shadow: 5px 5px 0px #808080;
}


.neon-box {
  border: 2px solid #00FFFF;
  background-color: #000000;
  color: #00FFFF;
  padding: 20px;
  margin: 20px 0;
  box-shadow: 0 0 20px #00FFFF;
  text-shadow: 0 0 10px #00FFFF;
}
/* Style for the section after "incoherent grumbling" */
.grumbling-section {
  font-family: Arial, sans-serif;
  font-size: 14px;
  color: #666666;
  line-height: 1.5;
  margin-top: 20px;
}

/* Hover trigger for the "incoherent grumbling" line */
.grumbling-trigger {
  position: relative;
  cursor: pointer;
  border-bottom: 1px dotted #0000CD;
}

.grumbling-trigger:hover {
  background-color: rgba(0, 0, 205, 0.1);
}

/* Dropdown that appears on hover */
.grumbling-dropdown {
  position: absolute;
  top: 20%;
  left: 0;
  background-color: #f8f8f8;
  border: 2px solid #333333;
  border-radius: 4px;
  padding: 15px;
  width: 300px;
  box-shadow: 3px 3px 8px rgba(0, 0, 0, 0.3);
  z-index: 1000;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-10px);
  transition: all 0.3s ease;
  font-family: Arial, sans-serif;
  font-size: 8px;
  color: #333333;
}

.grumbling-trigger:hover .grumbling-dropdown {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Hover style for the dropdown itself */
.grumbling-dropdown:hover {
  background-color: #ffffff;
  border-color: #0000CD;
}
/* More specific selector to override body styles */