:root {
  /* Total duration of one cycle (typing + pause + deleting) */
  --typing-speed: 10s;

  /* Minimum and maximum font size for responsive scaling */
  --typewriter-font-min: 0.8rem;
  --typewriter-font-max: 4rem;

  /* Number of steps for the typing animation (approximate text length) */
  --typing-steps: 30;

  /* Editable typewriter text color */
  --typewriter-color: #B5CC01;
}

body {
  color: white;
  margin: 0;
  text-align: center;
  background-color: black;
  cursor: crosshair;
}

canvas {
  display: block;
  width: 100%;
  height: 100%;
}

p {
  color: rgba(255,255,255, 0.5);
}

/* Position header vertically centered */
.header {
  top: 42%;
}

/* Semi-transparent background for header content */
.header-content {
  padding: 50px;
  background-color: rgba(0,0,0,0.3);
  border-radius: 10px;
}

/* Position footer near bottom */
.footer {
  bottom: 3%;
}

.description {
  color: gray;
  padding-top: 50px;
}

/* Link styles */
a, a:hover, a:visited {
  color: white;
  text-decoration: none;
}

/* Disable text selection */
.disable-selection {
  -moz-user-select: none;    /* Firefox */
  -ms-user-select: none;     /* Internet Explorer */
  -khtml-user-select: none;  /* KHTML browsers */
  -webkit-user-select: none; /* Chrome, Safari, Opera */
  -webkit-touch-callout: none; /* Disable callouts on mobile */
}

/* Typewriter effect for the H1 element */
h1.typewriter {
  display: inline-block;                /* Allow width to control text clipping */
  overflow: hidden;                     /* Hide overflow text */
  white-space: nowrap;                  /* Prevent line breaks */
  border-right: .1em solid currentColor; /* Simulate cursor */

  /* Use the editable color variable */
  color: var(--typewriter-color);

  /* Responsive font size between min and max values */
  font-size: clamp(
    var(--typewriter-font-min),
    7vw,
    var(--typewriter-font-max)
  );

  /* Apply typing and caret blink animations in an infinite loop */
  animation:
    typing var(--typing-speed) steps(var(--typing-steps), end) infinite,
    blink-caret .75s step-end infinite;
}

/* Typing keyframes: type, pause, delete */
@keyframes typing {
  0%, 50% {
    width: 0;   /* No text visible */
  }
  25%, 75% {
    width: 100%; /* Full text visible */
  }
}

/* Blink the cursor by toggling border color */
@keyframes blink-caret {
  from, to {
    border-color: transparent;
  }
  50% {
    border-color: currentColor;
  }
}

/* Button styling */
.btn {
  border-radius: 100px;
  padding: 10px 25px;
}