body {
    background-color: #000;
    color: #29d8ff;
    font-family: 'Orbitron', sans-serif;
    /*
    margin: 0;
    padding: 0;
    */
}
a {
    color: #29d8ff; /* Blue color for links */
    text-decoration: none; /* Remove underline from links */
}

li {
    color: #ccc; /* Light gray color for paragraph text */
    font-family: 'Roboto', sans-serif; /* Apply Roboto font for paragraph text */
    font-size: 16px; /* Adjust font size for paragraph text */
    line-height: 1.6; /* Improve line spacing for readability */
}

a:hover {
    text-decoration: underline; /* Underline on hover for links */
}
.navbar {
    background-color: #111 !important;
    border-bottom: 2px solid #29d8ff; /* Blue border for navbar */
    padding: 10px 0;
    text-align: center;
}
.navbar-brand {
    font-size: 24px;
    font-weight: bold;
}
.navbar-nav {
    list-style-type: none;
    padding: 0;
}
.nav-item {
    display: inline-block;
    margin-right: 20px;
}
.section {
    padding: 50px 0;
    border-top: 2px solid #333; /* Add borders between sections */
    border-bottom: 2px solid #333;
}
.section h2 {
    color: #29d8ff;
    font-size: 32px; /* Increase font size for headings */
}
.section p {
    color: #ccc; /* Light gray color for paragraph text */
    font-family: 'Roboto', sans-serif; /* Apply Roboto font for paragraph text */
    font-size: 16px; /* Adjust font size for paragraph text */
    line-height: 1.6; /* Improve line spacing for readability */
}
.btn {
    padding: 10px 20px;
    background-color: transparent;
    border: 2px solid #29d8ff; /* Blue border for buttons */
    color: #29d8ff; /* Blue text color for buttons */
    text-decoration: none;
    transition: background-color 0.3s, color 0.3s, border-color 0.3s;
}
.btn:hover {
    background-color: #29d8ff; /* Blue background on hover for buttons */
    color: #000; /* Black text color on hover for buttons */
    border-color: transparent; /* Remove border color on hover for buttons */
}

.project-box {
    border: 2px solid #29d8ff; /* Blue border for project boxes */
    padding: 10px;
    overflow: hidden;
    margin: 20px;    

    display: flex;
    align-items: center;

    width: 80%;
    /*
    min-width: 80%;
    display: flex;
    flex-wrap: wrap;
    overflow-wrap: break-word; /* Break long words to prevent overflow */
}

.project-link {
    display: flex; /* Use flexbox for link and image alignment */
    text-decoration: none; /* Remove underline from link */
}

.project-image {
    float: left;
    margin-right: 20px;
    max-width: 40%;
    height:auto;
    /*
    max-width: 15em;
    max-height: 15em;
    min-width:5em;
    min-height:5em;
    margin-right: 20px;
    */
}

.project-details {
    overflow: hidden;
    /*
    flex: 1;
    display: flex;
    flex-direction: column;
    */
}

.project-title {
    font-size: 24px;
    font-weight: bold;
    margin-bottom: 10px; /* Add margin below title */
}

.project-description {
    font-size: 16px;
    line-height: 1.6;
}

/* for social media icons */
.fab {
    padding: 20px;
    font-size: 30px;
    text-align: center;
    text-decoration: none;
    margin: 5px 2px;
    border-radius: 10px;
}


@media (orientation: portrait) {
    .project-box img {
        float: none; /* Remove float on smaller screens */
        /*margin-right: 0; Remove right margin on smaller screens */
        /*margin-bottom: 0; Remove bottom margin on smaller screens */
        margin:10px;
        max-width: 60%;
    }

    .project-box {
        flex-direction: column; /* Change flex direction to column for smaller screens */
        align-items: center; /* Center horizontally when image is above */
    }
}