/* Apply Fira Mono from Google Fonts and fallback to DejaVu Sans Mono */
body {
    font-family: 'Fira Mono', 'DejaVu Sans Mono', 'Consolas', 'Courier New', monospace;
    background-color: #f5f5f5;
    color: #333333;
    margin: 0;
    padding: 30px 120px 120px 60px; /* Default padding for larger screens */
    font-weight: medium;
}

/* Profile picture styling - Increased size with extra padding */
.profile-pic {
    display: block;
    margin: 0 auto; /* Centers the image horizontally */
    width: 250px; /* Adjust size as needed */
    height: 250px; /* Ensure it's a square for circular effect */
    border-radius: 50%; /* Makes the image circular */
    padding-top: 15px; /* Increased top padding */
    padding-bottom: 15px; /* Increased bottom padding */
}

/* Styling for the headings - Increased font size */
h1 {
    color: #000000;
    font-size: 3em; /* Increased heading size */
    padding-bottom: 10px;
    margin-bottom: 20px;
}

/* Styling for paragraphs */
p {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Styling for the unordered list */
ul {
    list-style-type: none;
    padding: 0;
}

/* Styling for list items with dashes as bullets and matching paragraph font size */
li::before {
    content: "— "; /* Dash as bullet */
    color: #000000;
    font-weight: medium;
}

/* Styling for list items */
li {
    font-size: 1.1em; /* Same size as paragraph */
    line-height: 1.6; /* Same line height as paragraph */
    margin-bottom: 10px;
}

/* Style links within the list */
a {
    color: #000000;
    text-decoration: none;
    font-weight: bold;
}

a:hover {
    text-decoration: underline;
}

/* Add spacing between sections */
#socials, #projects {
    margin-top: 40px;
}

/* Media Query for smaller devices */
@media (max-width: 600px) {
    body {
        padding: 30px; /* Reduced padding for smaller screens */
    }

    /* Styling for the headings - Increased font size */
    h1 {
        color: #000000;
        font-size: 2em; /* Increased heading size */
        padding-bottom: 10px;
        margin-bottom: 20px;
    }
}

/* Swipe-in from the left animation */
@keyframes swipeLeft {
    0% {
        transform: translateX(-100%);
        opacity: 0;
    }
    100% {
        transform: translateX(0);
        opacity: 1;
    }
}

/* Swipe-out to the left animation (when scrolling up) */
@keyframes swipeOutLeft {
    0% {
        transform: translateX(0);
        opacity: 1;
    }
    100% {
        transform: translateX(-100%);
        opacity: 0;
    }
}

/* Initial hidden state for text elements */
.text-hidden {
    opacity: 0;
    transform: translateX(-100%);
    visibility: hidden;
    transition: opacity 0.5s ease, transform 0.5s ease;
}

/* Swipe-in visible state */
.text-visible {
    visibility: visible;
    animation: swipeLeft 0.7s ease forwards;
}

/* Swipe-out when scrolling up */
.text-hidden-up {
    visibility: visible;
    animation: swipeOutLeft 0.7s ease forwards;
}