* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: Arial, sans-serif;
    background: linear-gradient(135deg, #121212, #1f1f1f); /* Gradient background */
    color: #ffffff;
    text-align: center;
}

nav {
    background: rgba(31, 31, 31, 0.8); /* Semi-transparent dark background */
    backdrop-filter: blur(10px); /* Add blur effect for modern look */
    padding: 10px 0;
}

nav ul {
    display: flex;
    justify-content: center;
    list-style: none;
}

nav li {
    margin: 0 7px;
}

nav a {
    display: block;
    background: rgba(51, 51, 51, 0.9); /* Semi-transparent background */
    color: #ffffff;
    text-decoration: none;
    padding: 10px 20px;
    border-radius: 25px; /* More rounded corners */
    transition: background-color 0.3s, transform 0.3s; /* Add transform for hover effect */
}

nav a:hover {
    background: rgba(85, 85, 85, 0.9);
    transform: scale(1.05); /* Slightly scale up on hover */
}

header {
    margin: 50px 0;
}

h1 {
    font-size: 3em;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Subtle text shadow for depth */
}

.major {
    font-style: italic;
    font-size: 1.5em;
    margin-top: 10px;
}

.contact-info, .socials {
    margin-top: 20px;
}

.icon {
    width: 24px;
    height: 24px;
    margin: 0 10px;
}

#blog {
    margin: 0 20px;
}

.blog-post {
    border: 2px solid rgba(255, 255, 255, 0.2); /* Light transparent border */
    border-radius: 10px; /* Rounded corners */
    padding: 15px;
    margin: 20px 160px; /* Increased side margins */
    background: rgba(31, 31, 31, 0.8); /* Semi-transparent background */
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5); /* Subtle shadow for depth */
    transition: transform 0.3s; /* Add transition for scaling effect */
}

.blog-post:hover {
    transform: scale(1.02); /* Slightly scale up on hover */
}

.blog-content {
    text-align: left;
    display: block;
    text-decoration: none;
    color: white;
}

.blog-image {
    width: 100px;
    height: auto;
    margin-right: 20px;
}

.blog-content:hover {
    background: rgba(255, 255, 255, 0.1);
}

.read-time {
    font-size: 0.9em;
    color: #ccc;
    margin-top: 5px;
}

.blog-text-container {
    display: flex;
    align-items: center;
}

.blog-text-container.reverse {
    flex-direction: row-reverse;
}

.blog-text {
    flex: 1;
}

.blog-text-container {
    margin-bottom: 15px; /* Added space between image and text */
}
.portfolio-item {
    margin: 20px 100px; /* Adjust the values as needed */
    padding: 15px; /* Optional: Add padding for more space inside */
    text-align: justify
}