html {
  scroll-behavior: smooth;
}


body {
  background-color: #dcdcdc;
  cursor: default; /* Default cursor */
  margin: 20px 20vw; /* Top/Bottom: 20px, Left/Right: 50px */
  overflow-y: scroll; /* Enable vertical scrolling */
  scrollbar-width: none; /* Firefox: Hide scrollbar */

}

body::-webkit-scrollbar {
  display: none; /* Chrome, Safari, and Edge: Hide scrollbar */
}

h1 {
  font-family: Lucida Console, monospace;
  font-weight: bold;
}

p {
  font-family: Monaco, monospace;
  font-style: italic;
  font-size: 11px;
  
}

pre {
  font-family: Courier New, monospace;
  white-space: pre-wrap; /* Ensure text wraps */
    overflow: hidden;
  border-right: 2px solid #ffffff;
  animation: typewriter 4s steps(40, end), blink-caret 0.75s step-end infinite;
}

img {
  max-width: 70%;
  height: auto;
  cursor: grab;
  display: block;
  margin: 0 auto;
}

.instruct {
  padding: 20px 0; /* 20px for top and bottom, 0 for left and right */
  font-family: Courier New, monospace;
  text-align: center;
}

#blink {
  display: block;
  margin: 0 auto;
  width: 600px;
}

#right {
  text-align: right;
  font-family: Courier New, monospace;
  font-size: small;
  white-space: pre-wrap; /* Ensure text wraps */
}
.cursor-image {
  position: absolute;
  pointer-events: none; /* Prevent interaction */
  display: none; /* Hidden by default */
}

.cursor-image img {
  width: 150px; /* Adjust as needed */
  height: auto;
}

abbr {
  border-bottom: none !important; /* Remove default underline */
  cursor: help; /* Help cursor */
  text-decoration: none !important;
  position: relative;
}

abbr:hover::after {
  visibility: visible; /* Show on hover */
  opacity: 1; /* Fade in */
}

/* Tooltip Arrow */
abbr::before {
  content: "";
  position: absolute;
  top: -10px;
  left: 50%;
  transform: translateX(-50%);
  border-width: 5px;
  border-style: solid;
  border-color: transparent transparent #333333 transparent; /* Arrow color */
  visibility: hidden;
  opacity: 0;
  z-index: 9;
  transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

p:hover {
  color: #696969; /* A soft red to indicate emotion */
  transition: color 0.3s ease-in-out;
}

abbr:hover {
  color: #cd5c5c; /* Highlighting the abbr text */
  font-weight: bold;
  text-decoration: underline;
}

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



@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: black; }
}

#audioToggle {
  position: fixed;
  bottom: 20px;
  right: 20px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #cd5c5c;
  border: none;
  color: white;
  font-size: 1.2em;
  cursor: pointer;
  transition: transform 0.3s, background 0.3s;
}

#audioToggle:hover {
  transform: scale(1.1);
  background: #b22222;
}

#audioToggle.playing {
  content: "❚❚";
}
#progressBar {
  position: fixed;
  top: 0;
  left: 0;
  width: 0;
  height: 5px;
  background-color: #cd5c5c;
  z-index: 9999;
  transition: width 0.1s ease;
}