body{
    font-family: Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
    margin: 0;
    padding: 0;
    background-color: #0B0F19;
}
nav a{
    color: #E2E8F0;
    text-decoration: none;
    font-family: Arial, Helvetica, sans-serif;
    
}
nav a:hover{
    color: #82C4FF;
    font-family: wingdings;
}

nav li{
    list-style-type: none;
    display: inline;
    margin-left: 20px;
}
nav{
    background-color: #0F172A;
    padding: 1px;
    border: #334155 solid 1px;
}
main {
  padding: 20px;
}
.jumbotron {
  font-size: 20px;
  padding: 100px;
  background-color: #00c8eb;
  text-align: center;
  color: white;
}

footer {
    background-color: #020617;
    text-align: center;
}

.skill-section {
    text-align: center;
    padding: 50px 20px;
    background-color: #f9f9f9; 
}

.skill-section h2 {
    font-size: 3em; 
    margin-bottom: 50px; 
}

.skill-content {
    display: flex; 
    justify-content: center; 
    align-items: flex-start; 
    max-width: 2000px; 
    margin: 0 auto; 
    flex-wrap: wrap; 
}

.author {
    max-width: 600px; 
    margin-right: 50px; 
    text-align: left;
    font-size: 1.2em; 
    line-height: 1.5; 
}
.author h1{
    color: white;
}
.author p{
    color: white;
}
.author a{
    color: #00c8eb;
    text-decoration: none;
    font-family: 'Courier New', Courier, monospace;
}


.progress {
    height: 20px;
    background-color: #ddd; 
    border-radius: 5px; 
    margin: 10px 0; 
}

.progress-fill {
    height: 100%; 
    background-color: white; 
    border-radius: 5px; 
}
.title h1{
    text-align: center;
    color: #f9f9f9; 
}
.portfolio-container {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 50px 20px;
    background-color: #0F172A;
}

.card {
    background-color: #383a31;
    border-radius: 10px;
    max-width: 300px;
    overflow: hidden;
    transition: transform 0.3s ease;
    text-align: center;
}

.card:hover {
    transform: translateY(-10px);
}

.card img {
    width: 50%;
    height: auto;
    object-fit: cover;
}

.card-body {
    padding: 20px;
}

.card-body h3 {
    color: white;
    font-size: 1.5em;
    margin-bottom: 10px;
}

.card-body p {
    color: white;
    font-size: 1em;
    margin-bottom: 15px;
}