/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

/* format main text */
body {
  background-color: #F4F4F2;
  font-family: "Courier Prime", monospace, courier;
  margin-top: 50px;
  margin-left: 15%;
  margin-right: 15%;
}

title {
  font-family: "Courier Prime", monospace, courier;
}


a {
 color: #a52a2a;
}


/* style lists */
ul.generic-list {
  list-style: none; /* Remove default bullets */
  padding-left: 1.5rem;
}

ul.generic-list li::before {
  content: "-"; /* The character you want */
  color: #a52a2a; /* Use your Oxblood Red accent */
  font-family: 'Courier Prime', monospace;
  display: inline-block;
  width: 1.5rem; /* Space between hyphen and text */
  margin-left: -1.5rem;
}



.pagetitle {
  font-family: "Courier Prime", monospace, courier; 
}


/* Targeting only the blog main title */
.blogtitle {
  font-family: "Courier Prime", monospace, courier;
  text-align: right;  
  }

/* Targeting only the list with the 'main-nav' class */
#nav {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: flex;      
  border-bottom: 1.5px solid #333; 
  justify-content: flex-end;
}

#nav a {
  display: block;
  font-size: 12px;
  color: #333333;  
  text-decoration: none;
  padding: 5px 40px; 
  font-family: tahoma;
  transition: background-color 0.3s ease;
}

#nav a:hover {
  color: #fcfaf7; /* Page background color */
  background-color: #a52a2a; /* Red accent */
  transform: translateY(-2px); /* Lifts up slightly */
  box-shadow: 0 4px 0 #631919; /* Darker red "shadow" for depth */
}

#nav a.active {
  color: #a52a2a;
  font-weight: bold;
  border-bottom: 2px solid #a52a2a;
}


/* use this to fix the blog typing to the end*/
.header-wrapper {
  display: flex;
  justify-content: flex-end;  
}

/* create type writer text effect and blinking cursor */
.typewriter-text {  
  overflow: hidden; 
  border-right: .15em solid orange; /* The cursor */
  white-space: nowrap; 
  width: 0;
  letter-spacing: .1em; 
  animation: 
    typing 3.5s steps(40, end) forwards,
    blink-caret .75s step-end infinite;
}

/* The typing animation */
@keyframes typing {
  from { width: 0 }
  to { width: 100% }
}

/* The cursor blinking */
@keyframes blink-caret {
  from, to { border-color: transparent }
  50% { border-color: #a52a2a; }
}