:root {
    /* Dark theme colors */
    --background-color:#181a1b;
    --header-color:#d0ccc6;
    --paragraph-color: #e8e6e3;

    /* Light theme colors
     * TODO Later
    */
}

body {
    font-family: "Source Sans Pro","Helvetica Neue",Helvetica,sans-serif;
    background-color: var(--background-color);
    font-size:18px;
    margin:2em auto;
    max-width:1000px;
    padding:1em;
    line-height:1.6;
    /*text-align:justify;*/
    text-align:left;
}

.container {
	width: 90%;
	margin: auto;
}

section {
    margin: 4em 0;
}

/* --- Styling for Image --- */
.image-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 2em 0; 
}

img {
    display: block;
    padding: 1em;
    max-width: 100%;
    height: auto;
}

/* --- Styling for Text --- */
h1, h2, h3, h4, h5 {
	color: var(--header-color);
}

p, li, em, strong {
	color: var(--paragraph-color);
}

.underline {
    text-decoration: underline;
}

/* Navigation Menu Styling */

nav {
    padding-bottom:2em;
}

nav ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center; /* Center the menu */
}

nav ul li {
    display: inline-block;
    margin-right: 3em; /* Adjust spacing between links */
}

nav ul li:last-child {transition: box-shadow .2s ease-in-out;
    margin-right: 0; /* Remove margin for the last item */
}

nav a ,nav a:visited{
    text-decoration: none;
    color: var(--header-color); /* Adjust the color as needed */
    font-weight: bold; /* Optional */
}
nav a:hover{
    color: var(--paragraph-color);
    transition: color 0.3s;
}
/* --- Styling for Links --- */ 
p a, li a {
    color:#c7c4c0
}

p a:hover, li a:hover {
    color:#f1f1f1
}

p a:visited li a:hover {
    color:#c7c4c0
}

/* --- Resume & Social Button Styling --- */
.resume {
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 2em;
}

.resume a {
    color: var(--paragraph-color);
    font-size: 20px;
}

.download-button {
    background-color: rgb(157, 14, 39);
    display: inline-block;
    color: var(--header-color);
    text-decoration: none;
    padding: 0.75em 1.5em;
    border-radius: 1em;
    transition: background-color 0.3s, color 0.3s;
    border: 2px solid rgb(157, 14, 39);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 1em; 
}

.download-button i {
    font-size: 1em; 
}


.download-button:hover {
    background-color: transparent;
    color: rgb(157, 14, 39);
    transition: background-color 0.3s, color 0.3s;
}

#social-links {
    text-align: center;
}

.button-group {
    display: flex;
    justify-content: center;
    gap: 3em;
}

.social-button {
    border: 2px solid transparent; /* Default border color */
    font-size: 20px;
    padding: 0.75em 1.5em;
    border-radius: 1em;
    transition: background-color 0.3s, color 0.3s;
    color: var(--paragraph-color);
    text-decoration: none;
    border: 2px solid #fff;
}

.linkedin {
    color: #fff;
    background-color: #0266c3;
    border-color: #0266c3;
}

.linkedin:hover {
    color:#0266c3;
    background-color: transparent;
}

.github {
    color: #fff;
    background-color: #171515;
    border-color: #fff;
}

.github:hover {
    color:#171515;
    background-color:#fff
}

.gitlab {
    color: #000;
    background: linear-gradient(to right, #e2432A, #FC6d27, #FCA326);
    border-color: #e24329;
}

.gitlab:hover {
    color: #fff;
    background: linear-gradient(to left, #e2432A, #FC6d27, #FCA326);
    border-color: #e24329;
}

.social-button {
    display: inline-flex;
    align-items: center; /* Ensures vertical alignment */
    justify-content: center; /* Centers content horizontally */
    gap: 10px;
    font-size: 20px;
    padding: 0.75em 1.5em;
    border-radius: 1em;
    transition: background-color 0.3s, color 0.3s background 0.3s;
    color: var(--paragraph-color);
    text-decoration: none;
}

.social-button i {
    font-size: 1.2em; /* Adjust icon size as needed */
    line-height: 1; /* Ensures the icon aligns correctly */
}

.social-button span {
    display: inline-block;
    line-height: 1; /* Ensures the text aligns correctly */
    padding: 0.4em 0 0 0;
}


img.light {
    display: none;
}

img.dark {
    display: none;
}


/* Mobile styles */
@media screen and (max-width: 768px) {
    body {
        font-size: 16px;
    }

    .container {
        width: 90%; 
        padding: 0.5em 0;
    }
    .resume a {
        font-size: 18px;
    }



    .image-container img {
        width: 80%; 
    }

    .button-group {
        flex-direction: column;
        gap: 1em;
    }

}

