body {
font-family: sans-serif;
margin: 0;
padding: 0;
background-color: #f4f4f4;
color: #333;
line-height: 1.6;
}

header {
background-color: #333;
color: white;
padding: 1em 0;
position: fixed;
width: 100%;
top: 0;
z-index: 100;
}

nav ul {
list-style: none;
padding: 0;
margin: 0;
text-align: center;
}

nav ul li {
display: inline;
margin: 0 15px;
}

nav ul li a {
color: white;
text-decoration: none;
padding: 5px 10px;
border-radius: 5px;
transition: background-color 0.3s ease;
}

nav ul li a:hover {
background-color: #555;
}

.hero {
background-color: #ddd;
padding: 80px 20px;
text-align: center;
}

.profile-image {
width: 100px;
height: 100px;
border-radius: 100%;
overflow: hidden;
margin: 20px auto;
border: 0.5px solid white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
}

.profile-image img {
width: 100%;
height: 100%;
object-fit: cover;
}

.hero h1 {
margin-bottom: 10px;
}

.content-section {
padding: 60px 20px;
background-color: white;
box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
margin-bottom: 20px;
border-radius: 8px;
}

.content-section h2 {
color: #007bff;
margin-top: 0;
border-bottom: 2px solid #007bff;
padding-bottom: 10px;
margin-bottom: 20px;
}

footer {
text-align: center;
padding: 20px 0;
background-color: #333;
color: white;
position: sticky;
bottom: 0;
width: 100%;
}

/* Unique CSS Style Animation Scroll */
html {
scroll-behavior: smooth;
}

body {
overflow-x: hidden; /* Prevent horizontal scrollbar */
}

section {
opacity: 0;
transform: translateY(50px);
transition: opacity 0.5s ease, transform 0.5s ease;
}

section.active {
opacity: 1;
transform: translateY(0);
}

.typewriter h1 {
  overflow: hidden; /* Ensures the content is not revealed until the animation */
  border-right: .15em solid hidden; /* The typwriter cursor */
  white-space: nowrap; /* Keeps the content on a single line */
  margin: 0 auto; /* Gives that scrolling effect as the typing happens */
  letter-spacing: .15em;
  animation: 
    typing 2.5s steps(40, end),
    blink-caret .90s step-end;
}

/* The typing effect */
@keyframes typing {
  from { width: 0 }
  to { width: 50% }
}