html, body {
    background-color: var(--color-background);
    color: var(--color-text); /* main font color */
    font-family: 'Segoe UI', sans-serif;
}

:root {
    --color-navbar: #1a1a1a;
    --color-background: #0d0d0d;
    --color-green: #4CAF0C;
    --color-hover-green: #225400;
    --color-text: white;
    --color-icon-background: white;
}

.indented-text {
    text-indent: 2em; /* or try 20px */
}

.main-wrapper {
    min-height: 50vh;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 2rem;
}

@media (max-width: 1468px) {
    .main-wrapper {
        min-height: 10vh;
        display: flex;
        justify-content: center;
        align-items: center;
        padding: 0rem;
    }
}

@media (max-width: 1468px) {
    .mobile-spacing {
        margin-top: 4rem !important; /* Custom larger spacing for mobile/tablet */
    }
}

.navbar {
    background-color: var(--color-navbar);
    border-radius: 15px;
    padding: 1rem 2rem;
}

@media (max-width: 768px) {
    .narrow-navbar {
        max-width: 100%; /* for smaller screens */
    }
}

@media (min-width: 768px) {
    .narrow-navbar {
        max-width: 750px; /*90%;*/ /* for smaller screens */
    }
}

@media (min-width: 1468px) {
    .narrow-navbar {
        max-width: 1050px; /* 50%;*/ /* for smaller screens */
    }
}

.nav-link {
    color: var(--color-text) !important;
    text-decoration: none;
    margin-right: 1.5rem;
    transition: 0.3s ease-out, transform 0.3s ease-out;
}

    .nav-link:hover {
        color: var(--color-green) !important;
        /*text-decoration: underline;*/
        transform: scale(1.20); /* Slightly enlarge */
    }

    .nav-link.active {
        color: var(--color-green) !important;
        /*text-decoration: underline;*/
    }

.nav-link-external {
    color: var(--color-text) !important;
    text-decoration: underline;
    margin-right: 1.5rem;
    transition: 0.1s ease-out, transform 0.1s ease-out;
}
    .nav-link-external:hover {
        color: var(--color-green) !important;
        transform: scale(1.02); /* Slightly enlarge */
    }

.nav-link-social-icon {
    color: var(--color-text) !important;
    text-decoration: none;
    margin-right: 1.5rem;
    transition: 0.3s ease-out;
}

    .nav-link-social-icon:hover {
        color: var(--color-green) !important;
        text-decoration: underline;
    }

.social-icon {
    background-color: var(--color-icon-background) !important;
    width: 32px;
    height: 32px;
    transition: opacity 0.3s ease;
    vertical-align: middle;
    margin-bottom: 1px;
    transition: 0.3s ease-out;
}

    .social-icon:hover {
        opacity: 0.8;
        background-color: var(--color-green) !important;
    }

.main-button {
    background-color: var(--color-navbar);
    color: var(--color-text);
    padding: 0.75rem 2rem;
    font-weight: bold;
    border-radius: 15px;
    border: 1px solid var(--color-green);
    box-shadow: 0 0 4.5px var(--color-green);
    transition: background 0.4s ease-out;
}

    .main-button:hover {
        background-color: var(--color-hover-green);
    }

.profile-pic {
    width: 300px;
    height: 300px;
    object-fit: cover;
    border-radius: 50%;
}

.content-box {
    max-width: 800px;
    /*width: 100%;*/
}

.content-section {
    margin-top: 2rem;
}

/* smaller padding between navbar and text for smaller screens */
@media (max-width: 1468px) {
    .content-section {
        margin-top: 3rem;
    }
}

/* Custom made rows for screens below 1468px Phones/Ipads */

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

.text-column, .image-column {
    width: 100%;
    max-width: 540px;
    text-align: left;
}

.image-column {
    margin-top: 3rem; /* Generous spacing between elements when stacked */
}

/* Custom for screen bigger than 1468px */
@media (min-width: 1468px) {
    .custom-row {
        flex-direction: row;
        flex-wrap: wrap;
        width: 850px;
    }

    .text-column, .image-column {
        width: 50%;
        flex: 0 0 50%;
        max-width: 50%;
    }

    .image-column {
        margin-top: 0; /* Remove the extra spacing on desktop */
    }

    .feature-section {
        width: 600px;
    }
}

/* Blog page */
/*.section-heading {
    font-weight: 700;
    font-size: 2rem;
}*/

.subheading {
    /*color: #ccc;*/
    margin-bottom: 2rem;
}

.group-box {
    background-color: var(--color-navbar);
    border-radius: 15px;
    padding: 20px 25px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    border: 1px solid black;
    box-shadow: 0 0 30px black;
}

.feature-box {
    background-color: var(--color-navbar);
    max-width: 450px;
    border-radius: 15px;
    padding: 20px 25px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 25px;
    border: 1px solid var(--color-green);
    box-shadow: 0 0 4.5px var(--color-green);
    transition: background 0.4s ease-out;
}

    .feature-box:hover {
        background-color: var(--color-hover-green);
    }

.feature-section {
    padding: 20px 25px;
    display: flex;
    align-items: flex-start;
}

.feature-number {
    text-align: left;
    font-size: 2rem;
    font-weight: bold;
    color: var(--color-text);
    flex-shrink: 0;
}

.feature-title {
    text-align: left;
    font-weight: 600;
}

.feature-text {
    text-align: left;
    margin: 0;
    color: #ccc;/*bd5e1;*/
}

.feature-boxes-container {
    display: flex;
    flex-direction: column;
    width: 100%;
    margin-top: 10px;
}

/* Responsive styles */
@media (max-width: 1468px) {
    /* Stack the feature section vertically on mobile */
    .group-box {
        flex-direction: column;
    }
}

/* Project Posts */
.post-section-heading {
    padding: 1.5rem 0 0 0;
    text-align: center;
}

.post-subheading {
    color: #ccc;
    text-align: left;
}

.post-box {
    background-color: var(--color-navbar);
    border-radius: 15px;
    padding: 20px 25px;
    margin-bottom: 20px;
    display: flex;
    gap: 25px;
    border: 1px solid black;
    box-shadow: 0 0 30px black;
}

pre {
    white-space: pre-wrap; /* Allow code to wrap */
    word-break: break-word; /* Break long lines if needed */
    overflow-x: auto; /* Enable scroll if still necessary */
    text-align: left; /* Align text to the left */
   
}

@media (max-width: 768px) {
    /* Stack the feature section vertically on mobile */
    pre {
        font-size: 11px;
    }
}