@import url('https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css');

body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    display: flex;
    flex-direction: column;
}

body {
    font-size: 15px;
    font-weight: 550;
}

/* Header Styles */

header {
    display: flex;
    align-items: center;
    padding-left: 15px;
    padding-right: 15px;
    padding-bottom: 15px;
    padding-top: 2.5px;
    flex-shrink: 0;
}

.logo img {
    width: 40px;
    height: 40px;
    padding-left: 2.5px;
    padding-top: 10px;
}

.nav-links {
    display: flex;
    margin-left: auto;
    align-items: center;
}

.nav-links div {
    margin-left: 15px;
}

.nav-links a {
    color: #333; /* Set link color to gray */
    text-decoration: none; /* Remove underline */
}

.nav-links a:visited {
    color: #333; /* Ensure visited links remain gray */
}

.separator {
    width: 2px;
    height: 30px;
    background-color: #333;
    margin: 0 20px;
}

.social-icons {
    display: flex;
    align-items: center;
    margin-top: 2.5px;
}

.social-icon {
    margin-left: 20px;
    font-size: 1.5em; /* Adjust the size of the icons */
    color: #333;
}

#linkedin:hover {
    color: #0077b5; /* LinkedIn color */
}

#instagram:hover {
    color: #e4405f; /* Instagram color */
}

#linkedin {
    margin-left: -17.5px;
}

/* For smaller screens */
@media (max-width: 600px) {
    .nav-links div {
        margin-left: 10px;
    }
    header {
        padding: 5px;
    }
}

/* About Styles */

.about-image {
    padding-left: 100px;
}

.about-image img {
    width: 100%;
    max-width: 300px;
    height: auto;
    border-radius: 50%; /* Makes the image circular */
    object-fit: cover;
    opacity: 0;
    transform: translateY(10px);
    animation: fadeIn 1s forwards; /* Apply animation */
    animation-delay: 0.5s; /* Delay image animation to ensure it loads first */
}

/* Keyframes for Animation */
@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Title Animation */
.about-text h1 {
    opacity: 0;
    transform: translateY(-10px);
    animation: fadeIn 1.2s forwards; /* Apply animation */
}

/* Paragraph Animation */
.about-text p {
    opacity: 0;
    transform: translateY(10px);
    animation: fadeIn 1s forwards; /* Apply animation */
    animation-delay: 0.5s; /* Delay paragraph animation */
}

/* Footer Styles */
footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    width: 100%; /* Ensure the footer spans the full width of the viewport */
    box-sizing: border-box; /* Include padding and border in the element's total width and height */
    flex-shrink: 0;
}

.footer-content {
    display: flex;
    justify-content: space-between;
    width: 100%;
}

.date-published {
    margin-left: 20px;
}

.footer-icons {
    display: flex;
    align-items: center;
    margin-right: 20px;
}

.footer-icons .social-icon {
    margin-left: 20px;
}

#linkedin-footer:hover {
    color: #0077b5; /* LinkedIn color */
}

#github-footer:hover {
    color: #333; /* GitHub color */
}

#instagram-footer:hover {
    color: #e4405f; /* Instagram color */
}

/* Home Intro */
main {
    flex: 1;
    display: flex;
    justify-content: center;
    align-items: center;
}

.home {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Keyframes for Animation */
@keyframes fadeIn {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Greeting Animation */
.greeting {
    max-width: 800px;
    font-weight: 500;
    font-size: 60px;
    opacity: 0;
    transform: translateY(-10px);
    animation: fadeIn 1.2s forwards; /* Apply animation */
    animation-delay: 0.3s;
}

/* Image Animation */
.home img {
    width: 200px;
    height: auto;
    opacity: 0;
    transform: translateY(10px);
    animation: fadeIn 1.2s forwards; /* Apply animation */
    animation-delay: 0.3s; /* Delay image animation to ensure it loads first */
}

/* Spotify Icon */

.spotify-icon {
    color: #1DB954; /* Spotify green color */
    font-size: 1.25em; /* Adjust the size as needed */
    position: relative;
    top: 2px;
}

/* For smaller screens */

@media (max-width: 600px) {
    .about-text h1,
    .about-text p,
    .about-image img,
    .greeting,
    .home img {
        animation-duration: 1.2s;
        animation-fill-mode: forwards;
    }
    .about-image {
        padding-left: 50px; /* Adjust padding for smaller screens */
    }
}