:root {
    /* Color Variables */
    --color-header: #2a2a3b;
    --color-location: #a8a8b3;
    --color-background: #1e1e2f;
    --color-text: #f0f0f0;
    --color-primary: #3DA5E0;
    --color-accent: #a8f0a1;
    --color-highlight: #ff6b6b;
    --color-project-card-hover: #3a3a4b;
}

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

body {
    font-family: 'JetBrainsMono', monospace;
    background-color: var(--color-background);
    color: var(--color-text);
    line-height: 1.6;
}

h2 {
    font-size: 1.8em;
    color: var(--color-highlight);
    margin: 0.5em 0;
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.header {
    background-color: var(--color-header);
    text-align: left;
    padding: 1.5em;
}

.header h1 {
    font-size: 2.5em;
}

.subtitle {
    color: var(--color-highlight);
    font-size: 1.2em;
}

.location {
    color: var(--color-location);
    font-size: 0.9em;
}

.about-me {
    display: flex;
    align-items: flex-start;
    padding: 2em; /* Padding for top and bottom */
    max-width: 1000px; /* Set a maximum width for the section */
    margin: 0 auto; /* Center the section */
}

.bio {
    margin-right: 1em; /* Add margin to the right to space from the image */
}

.profile-pic {
    border-radius: 8px;
    max-width: 300px;
    width: 100%;
    height: auto;
}

.projects, .skills, .socials, .stuff {
    padding: 0;
    text-align: center;
    margin-bottom: 2em;
}

.projects h2, .skills h2, .socials h2, .stuff h2 {
    margin: 0.4em 0;
}

.projects p, .skills p, .socials p, .stuff p {
    margin: 0.2em 0;
}

.project-card {
    background-color: var(--color-header);
    padding: 1em;
    margin: 1em;
    border-radius: 8px;
    display: inline-block;
    width: calc(50% - 2em); /* Two items per row on tablets */
    max-width: 300px; /* Optional: Limit the max width */
    vertical-align: top;
    text-decoration: none;
    color: var(--color-text);
    transition: transform 0.2s, background-color 0.2s;
}

.project-card:hover {
    background-color: var(--color-project-card-hover);
    transform: scale(1.05);
}

.project-card h3 {
    color: var(--color-accent);
    margin-bottom: 0.5em;
}

.languages, .frameworks {
    margin: 0;
    padding: 0;
    text-align: center;
}

.skill-logo {
    max-width: 40px;
    height: auto;
    margin: 0.5em;
    transition: transform 0.2s;
}

.skill-logo:hover {
    transform: scale(1.1);
}

.skills-container {
    display: flex;
    justify-content: center;
    gap: 30px;
}

.languages, .frameworks, .tools {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.skills-row {
    display: flex;
    gap: 20px;
}

.skill {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.skill-text {
    font-size: 12px;
    color: #666;
}

.socials {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
}

.social-links {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
}

.social-links a {
    display: inline-flex;
    align-items: center;
    background-color: var(--color-header);
    color: var(--color-highlight);
    padding: 0.5em 1em;
    border-radius: 8px;
    margin: 0.5em;
    text-decoration: none;
    transition: background-color 0.2s;
}

.social-links a:hover {
    background-color: #444455;
}

.icon {
    max-width: 20px;
    height: auto;
    margin-right: 0.5em;
}

.socials h2 {
    text-align: center;
    margin-bottom: 1em;
}


@font-face {
    font-family: 'JetBrainsMono';
    src: url('font/JetBrainsMono-2.304/fonts/webfonts/JetBrainsMono-Regular.woff2') format('woff2');
    font-weight: 400;
    font-style: normal;
}

@font-face {
    font-family: 'JetBrainsMono';
    src: url('font/JetBrainsMono-2.304/fonts/webfonts/JetBrainsMono-Bold.woff2') format('woff2');
    font-weight: 700;
    font-style: normal;
}

@font-face {
    font-family: 'JetBrainsMono';
    src: url('font/JetBrainsMono-2.304/fonts/webfonts/JetBrainsMono-Italic.woff2') format('woff2');
    font-weight: 400;
    font-style: italic;
}

@font-face {
    font-family: 'JetBrainsMono';
    src: url('font/JetBrainsMono-2.304/fonts/webfonts/JetBrainsMono-BoldItalic.woff2') format('woff2');
    font-weight: 700;
    font-style: italic;
}

@font-face {
    font-family: 'JetBrainsMono';
    src: url('font/JetBrainsMono-2.304/fonts/webfonts/JetBrainsMono-ExtraBold.woff2') format('woff2');
    font-weight: 800;
    font-style: normal;
}

@font-face {
    font-family: 'JetBrainsMono';
    src: url('font/JetBrainsMono-2.304/fonts/webfonts/JetBrainsMono-ExtraBoldItalic.woff2') format('woff2');
    font-weight: 800;
    font-style: italic;
}

@font-face {
    font-family: 'JetBrainsMono';
    src: url('font/JetBrainsMono-2.304/fonts/webfonts/JetBrainsMono-ExtraLight.woff2') format('woff2');
    font-weight: 200;
    font-style: normal;
}

@font-face {
    font-family: 'JetBrainsMono';
    src: url('font/JetBrainsMono-2.304/fonts/webfonts/JetBrainsMono-ExtraLightItalic.woff2') format('woff2');
    font-weight: 200;
    font-style: italic;
}

@font-face {
    font-family: 'JetBrainsMono';
    src: url('font/JetBrainsMono-2.304/fonts/webfonts/JetBrainsMono-Light.woff2') format('woff2');
    font-weight: 300;
    font-style: normal;
}

@font-face {
    font-family: 'JetBrainsMono';
    src: url('font/JetBrainsMono-2.304/fonts/webfonts/JetBrainsMono-LightItalic.woff2') format('woff2');
    font-weight: 300;
    font-style: italic;
}

@font-face {
    font-family: 'JetBrainsMono';
    src: url('font/JetBrainsMono-2.304/fonts/webfonts/JetBrainsMono-Medium.woff2') format('woff2');
    font-weight: 500;
    font-style: normal;
}

@font-face {
    font-family: 'JetBrainsMono';
    src: url('font/JetBrainsMono-2.304/fonts/webfonts/JetBrainsMono-MediumItalic.woff2') format('woff2');
    font-weight: 500;
    font-style: italic;
}

@font-face {
    font-family: 'JetBrainsMono';
    src: url('font/JetBrainsMono-2.304/fonts/webfonts/JetBrainsMono-SemiBold.woff2') format('woff2');
    font-weight: 600;
    font-style: normal;
}

@font-face {
    font-family: 'JetBrainsMono';
    src: url('font/JetBrainsMono-2.304/fonts/webfonts/JetBrainsMono-Thin.woff2') format('woff2');
    font-weight: 100;
    font-style: normal;
}

@font-face {
    font-family: 'JetBrainsMono';
    src: url('font/JetBrainsMono-2.304/fonts/webfonts/JetBrainsMono-ThinItalic.woff2') format('woff2');
    font-weight: 100;
    font-style: italic;
}

@media (max-width: 768px) {
    .about-me {
        flex-direction: column; /* Stack elements vertically */
        align-items: center; /* Center align items */
        text-align: center; /* Center text for better readability */
        padding: 1em; /* Reduce padding */
    }

    .bio {
        max-width: 100%; /* Full width on mobile */
        margin-bottom: 1em; /* Space between bio and image */
    }

    .profile-pic {
        max-width: 50%; /* Adjust image size for mobile */
    }

    .projects,
    .skills,
    .socials {
        padding: 0; /* Reduce padding on mobile */
    }

    .project-card {
        width: 100%; /* Full width on smaller screens */
    }

    .skills-container {
        flex-direction: column; /* Stack sections vertically */
        align-items: center; /* Center align sections */
    }

}

@media (max-width: 480px) {
    .header h1 {
        font-size: 2em; /* Adjust header font size */
    }

    .subtitle {
        font-size: 1em; /* Adjust subtitle font size */
    }

    .location {
        font-size: 0.8em; /* Adjust location font size */
    }
}