@font-face {
  font-family: 'Qbicle1BRKMK';
  src: url('fonts/Qbicle1BRKMK.ttf');
}

@font-face {
  font-family: 'ElectroMan';
  src: url('fonts/ElectroMan.ttf');
}

@font-face {
  font-family: 'Leorio';
  src: url('fonts/Leorio.ttf');
}

@font-face {
  font-family: 'SegaArcadeFont-Regular';
  src: url('fonts/SegaArcadeFont-Regular.ttf');
}

@font-face {
  font-family: 'FreePixel';
  src: url('fonts/FreePixel.ttf');
}
@font-face {
  font-family: 'Louis George Cafe Bold';
  src: url('fonts/Louis\ George\ Cafe\ Bold.ttf');
}
/* #################################################################################### */
body {
  color: lime;
  background-color: rgb(13, 2, 58);
  font-family: 'FreePixel', fallback, sans-serif;
  padding: 1em;
}

body#home {
  background-image: none;
}
/* #################################################################################### */
#home_page_head1 {
  color: lime;
  /* background-color: transparent; */
  /* border-right: .15em solid lime; Cursor effect */
  font-family: 'FreePixel', fallback, sans-serif;
  font-size: 2.2vw;
  display: flex;
  justify-content: flex-start;
  /* white-space: nowrap; */
  overflow: hidden;
  width: 100%;
  /* border-right: .15em solid rgba(99, 246, 41, 0.892); */
  animation: typing 4s steps(40, end);
}

#home_page_head2 {
  color: lime;
  /* background-color: transparent; */
  /* border-right: .15em solid lime; Cursor effect */
  font-family: 'FreePixel', fallback, sans-serif;
  font-size: 2.2vw;
  display: flex;
  justify-content: flex-start;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  /* border-right: .15em solid rgba(99, 246, 41, 0.892); */
  animation: typing 4s steps(40, end);
}
#home_page_head3 {
  color: lime;
  /* background-color: transparent; */
  /* border-right: .15em solid lime; Cursor effect */
  font-family: 'FreePixel', fallback, sans-serif;
  font-size: 2.2vw;
  display: flex;
  justify-content: flex-start;
  white-space: nowrap;
  overflow: hidden;
  width: 100%;
  /* border-right: .15em solid rgba(99, 246, 41, 0.892); */
  animation: typing 4s steps(40, end);
}

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

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

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

#nav-container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 73vh; /* adjust this value as needed */
  text-align: center;
  padding: 0 15px; /* give some room on the left and right */
}

#nav {
  font-size: 2.5vw;
  line-height: 1.6;
  white-space: pre-line;
  /* position: absolute;
  top: 300px;
  left: 90px; */
  /* list-style-type: none;
  display: flex;
  justify-content: flex-start;
  padding: 0; */
}

.highlight {
  color: #f629abe3;
}

nav ul li {
  margin: 0 15px;
  color: lime;
}

#headshot {
  display: none;
}

#bio {
  position: relative;
  top: 0;
  left: 0;
  width: 100%;
  word-spacing: 3px;
  line-height: 1.6;
}

#user_directory_home {
  font-size: 2vw;
  display: flex;
  justify-content: flex-start;
  white-space: nowrap;
  overflow: hidden;
  width: 52.3%;
  border-right: .40em solid lime;
  animation: typing 4s steps(40, end), blink-caret .75s step-end infinite;
}
/* #################################################################################### */
#blog_main_page {
  /* background-color: black; */
  color: lime;
  font-family: 'Louis George Cafe Bold';
  font-size: 2.2vw;
  display: flex;
  justify-content: start;
  white-space: nowrap;
  overflow: hidden;
  /* border-right: .15em solid rgba(99, 246, 41, 0.892); */
  animation: typing 4s steps(40, end);
}

#blog_main_page_links {
  display: flex;
  align-items: first baseline;
  justify-content: flex-start; /* aligns horizontally to the left */
  height: 81vh; /* takes up the full height of the viewport */
  padding-left: 50px; /* adjust as needed to move text away from the edge */
}
#blog_main_nav {
  font-size: 2.1vw;
  line-height: 1.9;
  white-space: pre-line;
  position: absolute;
  top: 100px;
  left: 50px;
  list-style-type: none;
  display: flex;
  justify-content: flex-start;
  padding: 0;
}

.blog-color {
  color: #f6c629e3; /* replace with the color you want */
}

.blog-color:visited {
  color: #29b9f6e3; /* replace with the color you want */
}

#blog1_body {
  background-color: azure;
}

#blog1_title {
  background-color:rgba(255, 204, 204, 0.686);
  color: black;
  font-family: 'sans-serif';
  font-size: 4.7vw;
  display: flex;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  /* border-right: .15em solid rgba(99, 246, 41, 0.892); */
  /* animation: typing 4s steps(40, end), blink-caret .75s step-end infinite; */
}

#blog1_content {
  color:black;
  font-family: 'sans-serif';
  margin: 10% auto;
  font-size: 21px;
  width: 100%;
  max-width: 800px;
  word-spacing: 3px;
  line-height: 1.6;
}
#user_directory_blog {
  font-size: 1.7vw;
  display: flex;
  justify-content: flex-start;
  white-space: nowrap;
  overflow: hidden;
  width: 51%;
  border-right: .40em solid lime;
  animation: typing 4s steps(40, end), blink-caret .75s step-end infinite;
}
/* #################################################################################### */
#portfolio_main_page {
  /* background-color: black; */
  color: lime;
  font-family: monospace;
  font-size: 2.7vw;
  display: flex;
  justify-content: start;
  /* white-space: nowrap; */
  overflow: hidden;
  /* border-right: .15em solid rgba(99, 246, 41, 0.892); */
  animation: typing 4s steps(40, end);
}

#portfolio_main_links {
  display: flex;
  align-items: first baseline;
  justify-content: flex-start; /* aligns horizontally to the left */
  height: 81vh; /* takes up the full height of the viewport */
  padding-left: 8%; /* adjust as needed to move text away from the edge */
  margin: 8%;
}

.portfolio_link_color {
  color: #ffe5ff; /* replace with the color you want */
}

.portfolio_link_color:visited {
  color: #29b9f6e3; /* replace with the color you want */
}
/* #portfolio_nav {
  font-size: 2vw;
  line-height: 1.9;
  white-space: pre-line;
  position: absolute;
  top: 86px;
  left: 100px;
  list-style-type: none;
  display: flex;
  justify-content: flex-start;
  padding: 0;
} */
#portfolio_nav {
  font-family: monospace;
  font-size: 2vw;
  display: flex;
  justify-content: space-between;
  width: 100%;  /* you can adjust this as needed */
  margin: 0 auto;  /* centers the columns horizontally */
}
#portfolio_nav .column {
  display: flex;
  flex-direction: column;
  width:80%;  /* you can adjust this as needed */
}
#portfolio_column {
  font-size: 3vw;
}
#project_column {
  font-size: 3vw;
}
#user_directory_portfolio {
  font-size: 2vw;
  display: flex;
  justify-content: flex-start;
  white-space: nowrap;
  overflow: hidden;
  width: 67%;
  border-right: .40em solid lime;
  animation: typing 4s steps(40, end), blink-caret .75s step-end infinite;
  margin-top: -20%;
}


/* #################################################################################### */
footer {
  position: static;
  bottom: 0;
  width: 100%;
  color: lime;
  text-align: center;
}

/* #################################################################################### */

/* body#home {
  background-image: url('./fotos/homefoto.png');
} */
/* body#portfolio {
  background-image: url('./fotos/portfoliofoto.png');
} */
/* change later and add as many as you need */


/* body {
  background-color: rgba(243, 244, 174, 0.643);
  font-family: 'Leorio', fallback, sans-serif;
  background-image: url('./fotos/foto.png');
  background-position: center;
  background-repeat: no-repeat;
  background-size: 400px 400px;
  color: rgba(179, 160, 160, 0.885);
} */

/* h1 {
  background-color: black;
  color: #63f629e3;
  font-family: 'FreePixel', fallback, sans-serif;
  font-size: 4.3vw;
  display: flex;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  border-right: .15em solid rgba(99, 246, 41, 0.892);
  animation: typing 4s steps(40, end), blink-caret .75s step-end infinite;
} */

/* main {
  font-size: 20px;
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  display: block;
  max-width: 600px;
  word-spacing: 3px;
  line-height: 1.6;
} */

/* #typewriter {
  background-color: black;
  color: #63f629e3;
  font-family: 'FreePixel';
  font-size: 4.7vw;
  display: flex;
  justify-content: center;
  white-space: nowrap;
  overflow: hidden;
  border-right: .15em solid rgba(99, 246, 41, 0.892);
  animation: typing 4s steps(40, end), blink-caret .75s step-end infinite;
} */

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

@keyframes blink-caret {
  from, to { border-color: transparent; }
  50% { border-color: #63f629e3; }
} */

/* #blog1_content {
  margin: 0 auto;
  font-size: 21px;
  width: 100%;
  max-width: 800px;
  word-spacing: 3px;
  line-height: 1.6;
} */

/* #headshot {
  border-radius: 50%;
  width: 268px;
  height: 268px;
  position: absolute;
  top: 180px;
  left: 160px;
}

#bio {
  font-size: 21px;
  position: absolute;
  top: 445px;
  left: 30px;
  width: 600px;
  word-spacing: 3px;
  line-height: 1.6;
}

nav ul {
  font-size: 19px;
  list-style-type: none;
  display: flex;
  justify-content: flex-end;
  padding: 0;
}

nav ul li {
  margin: 0 15px;
}

footer {
  position: static;
  bottom: 0;
  width: 100%;
  color: rgb(78, 82, 91);
  text-align: center;
} */