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

body {
    font-family: 'Courier New', monospace;
    line-height: 1.6;
    margin: 20px;
    color: #333;
    background-color: #f4f4f4;
}

.header-button {
    padding: 5px 20px;
    background-color: #333;
    color: white;
    text-decoration: none;
    border-radius: 5px;
    transition: background-color 0.3s ease;
}

.header-button:hover {
    background-color: #555;
}


section {
    margin-bottom: 20px;
}

h2 {
    background-color: #333;
    color: white;
    padding: 10px;
    margin-bottom: 10px;
}

ul {
    list-style-position: inside;
    padding: 5px;
}

ul li {
    margin: 10px 0;
    display: flex;
    justify-content: space-between;
}

ul li span {
    font-weight: bold;
    margin-right: 10px;
}

footer {
    margin-top: 40px;
    text-align: center;
    font-size: 0.8em;
}

.dropdown-btn {
    padding: 5px 10px;
    background-color: #333;
    color: white;
    border: none;
    cursor: pointer;
    border-radius: 5px;
    margin-left: 10px;
}

.dropdown-content {
    display: none;
    background-color: #f9f9f9;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    position: relative; /* Changed from absolute for inline expansion */
}

/* Show the dropdown menu */
.show {
    display: block;
}



/* Existing styles, with responsiveness in mind */
body {
    font-family: 'Courier New', monospace;
    line-height: 1.6;
    margin: 20px;
    color: #333;
    background-color: #f4f4f4;
}

.header-content {
    display: flex;
    flex-wrap: wrap; /* Allows items to wrap as needed */
    align-items: center;
    justify-content: center; /* Centers items on the cross-axis */
    text-align: center; /* Centers text for when items wrap */
}

.profile-pic {
    border-radius: 50%;
    width: 200px;
    height: 200px;
    object-fit: cover;
    margin-right: 20px; /* Adjusted or removed based on screen size */
    margin-bottom: 20px; /* Provides spacing when the layout stacks */
}

header h1, header p {
    margin: 0 20px; /* Ensures text doesn't touch the edges */
}

.header_info {
    width: 30%;
}


/* Responsive adjustments */
@media (max-width: 768px) {
    .header-content {
        flex-direction: column; /* Stacks items vertically */
    }

    .profile-pic {
        margin-right: 0;
    }
    .typer {
        display: none;
    }
}

@media (max-width: 768px) {
    .header-content {
        display: flex;
        flex-wrap: wrap; /* Allows items to wrap as needed */
        align-items: center;
        justify-content: center; /* Centers items on the cross-axis */
        text-align: center; /* Centers text for when items wrap */
        margin: 10px;
    }

    .header_info {
        width: auto;
    }

    .profile-pic, .header-button {
        margin-right: 0; /* Adjust if needed for the button */
        margin-bottom: 10px; /* Adds spacing below the button on smaller screens */
    }

    .header-button {
        padding: 4px 16px; /* Optionally adjust padding for smaller screens */
        margin-bottom: 10px;
    }
}


/* Project CSS */
.projects-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    padding: 20px;
}

.project {
    background-color: #fff;
    padding: 15px;
    border-radius: 5px;
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: transform 0.3s ease;
}

.project h3 {
    color: #333;
}

.project p {
    margin-bottom: 15px;
}

.project a {
    color: #333;
    text-decoration: none;
    transition: color 0.3s ease;
}

.project a:hover {
    color: #007bff;
}

.project:hover {
    transform: translateY(-5px);
}

@media (max-width: 768px) {
    .projects-grid {
        grid-template-columns: 1fr;
    }
    
    .project {
        background-color: #fff;
        padding: 15px;
        border-radius: 5px;
        box-shadow: 0 2px 5px rgba(0,0,0,0.1);
        transition: transform 0.3s ease;
    }
    
    .project h3 {
        color: #333;
    }
    
    .project p {
        margin-bottom: 15px;
    }
    
    .project a {
        color: #333;
        text-decoration: none;
        transition: color 0.3s ease;
    }
    
    .project a:hover {
        color: #007bff;
    }
    
    .project:hover {
        transform: translateY(-5px);
    }

    .language {
        background-color: gray;
        border-radius: 5px;
        color: white;
        font-weight: bold;
        padding: 5px;
        margin-right: 10px; /* Space between each language */
        display: inline-block; /* Align items horizontally */
    }
    
    .languages-list {
        list-style-type: none; /* Removes default list styling */
        display: inline; /* Aligns the nested list with the preceding text */
        margin-left: 10px; /* Adds some space between the text and the list */
    }
    
    ul {
        list-style-type: none; /* Optional: Removes bullets from all lists */
        padding-left: 0; /* Optional: Removes padding from all lists */
    }
}

.language {
    background-color: gray;
    border-radius: 5px;
    color: white;
    font-weight: bold;
    padding: 5px;
    margin-right: 10px; /* Space between each language */
    display: inline-block; /* Align items horizontally */
}

.languages-list {
    list-style-type: none; /* Removes default list styling */
    display: inline; /* Aligns the nested list with the preceding text */
    margin-left: 10px; /* Adds some space between the text and the list */
}

ul {
    list-style-type: none; /* Optional: Removes bullets from all lists */
    padding-left: 0; /* Optional: Removes padding from all lists */
}