@charset "UTF-8";

body {
  font-family: 'Fira Code', monospace;
  margin: 0;
  padding: 20px;
  background: linear-gradient(135deg, #0f0f1a, #1a1a2e); /* dark gradient to fit "dark mode" theme */
  color: #eaeaea; /* light gray text */
}

/* Headings */
h1 {
  text-align: center;
  color: #fff;
  background: linear-gradient(90deg, #6a0dad, #00bfff); /* purple-blue gradient */
  border-radius: 18px;
  padding: 15px;
  margin: 40px auto 24px auto;
  box-shadow: 0 0 20px rgba(106, 13, 173, 0.6);
  width: 95%;
  max-width: 80%;
  font-size: 2.0rem;
}

h2 {
  text-align: left;
  color: #00bfff; /* neon blue */
  border-bottom: 2px solid #6a0dad;
  padding-bottom: 6px;
  margin-top: 40px;
}

h3 {
  color: #6a0dad; /* neon purple */
  margin-top: 25px;
}

/* This is the Navigation Bar. As previously mentioned, it was taken from w3schools.com. */
ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #111;
  border-bottom: 2px solid #00bfff;
}

ul li {
  float: left;
}

ul li a {
  display: block;
  color: #eaeaea;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  transition: all 0.3s ease-in-out;
}

ul li a:hover {
  background-color: #222;
  color: #00bfff;
  text-shadow: 0 0 8px #00bfff;
}

/* Since my website had a "dark mode" theme with neon purple and neon blue colors, the default hyperlink color was distracting. Thus, I modified the color to fit better into the theme. */
a {
  color: #00fff7;  /* cyan color, similar to highlighted code */
  text-decoration: none;
  transition: color 0.3s ease, text-shadow 0.3s ease;
}

a:hover {
  color: #bd93f9;  /* purple-magenta */
  text-shadow: 0 0 8px #bd93f9;  /* glow effect */
}

a:visited {
  color: #00fff7;  /* stay cyan instead of browser purple */
}

a:active {
  color: #50fa7b;  /* "hacker" green */
}


/* Sections */
.section {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 20px;
  margin: 40px 0;
  padding: 20px;
  background: #1e1e2f; /* "card" background */
  border-radius: 12px;
  box-shadow: 0 0 15px rgba(0,191,255,0.2);
}

.section img,
.carousel-image {
  width: 400px;
  height: auto;
  border-radius: 20px;
  flex-shrink: 0;
  box-shadow: 0 0 12px rgba(106,13,173,0.6);
}

.section p {
  flex: 1;
  font-size: 1.5rem;
  line-height: 1.8;
  min-width: 200px;
}

/* The javascript code for the carousel was taken from the canvas page. The styling shown below is my own work. */
.carousel {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  margin-right: 20px;
}

.carousel-button {
  background: #6a0dad;
  color: #fff;
  border: none;
  border-radius: 50%;
  width: 36px;
  height: 36px;
  font-size: 1.5rem;
  margin: 0 8px;
  cursor: pointer;
  transition: background 0.2s, transform 0.2s;
}

.carousel-button:hover {
  background: #00bfff;
  transform: scale(1.1);
}

/* All the following code involving the "movingletters" class was taken from Julian Garnier. Once again, here is the website from which I chose my effect: https://tobiasahlin.com/moving-letters/#7 */
.movingletters {
  position: relative;
  font-weight: 900;
  font-size: 3.7em;
}
.movingletters .text-wrapper {
  position: relative;
  display: inline-block;
  padding-top: 0.2em;
  padding-right: 0.05em;
  padding-bottom: 0.1em;
  overflow: hidden;
}
.movingletters .letter {
  transform-origin: 0 100%;
  display: inline-block;
  line-height: 1em;
}

/* The styling for the typewriter effect was taken from Geoff Graham. Here is the link to his tutorial: https://css-tricks.com/snippets/css/typewriter-effect */
.typewriter-text {
  font-size: 2.5rem;
  color: #00bfff;
  text-shadow:
    0 0 2px #00bfff,
    0 0 4px #00bfff,
    0 0 6px #6a0dad;
  animation: glowPulse 2s infinite alternate;
}

/* The following glowing effect that was applied to the typewriter effect was created by me. I learned this using w3school's tutorial: https://www.w3schools.com/howto/howto_css_glowing_text.asp */
@keyframes glowPulse {
  from {
    text-shadow:
      0 0 2px #00bfff,
      0 0 4px #00bfff,
      0 0 6px #6a0dad;
  }
  to {
    text-shadow:
      0 0 2px #00bfff,
      0 0 4px #00bfff,
      0 0 6px #6a0dad;
  }
}

/* The following cursor styling and keyframes blink was taken from Geoff Graham. Here is the link to his tutorial: https://css-tricks.com/snippets/css/typewriter-effect */
.cursor {
  display: inline-block;
  margin-left: 3px;
  font-weight: bold;
  color: #00bfff;
  font-size: 2rem;
  animation: blink 0.7s steps(1) infinite;
}

@keyframes blink {
  50% { opacity: 0; }
}