/*
Colors: 
green - #769B76
text color red - (239,6,6);
side rectangle color (216, 214, 229)
*/

body {
    
    background-color: rgb(210, 210, 210);
}

.container {
/*	display: inline;*/
/*	width: 100vh;*/
    width: 100%;
}



.side-rectangle {
	background-color: rgb(216, 214, 229);
	width: 10%;
	height: ;
	display: inline-block;
	position: absolute;	
	
}

.navbar-container {
	border-bottom: solid 3px;
	border-bottom-color: #769B76;
	margin-bottom: 30px;
}

.af-pw {
	font-family: Nolan;
	color: rgb(239,6,6);
	font-size: 19px;
	margin-left: 10.4vw;
	margin-top: 10px; 
	display: inline;
}


.nav-link {
	margin-top: 10px;
	text-align: right;
	color: black;
}

.title {
	font-family: Nolan;
	font-size: 20px;
/*
	margin-top: 40px;
	margin-left: 13vw;
*/
    color: rgb(239,6,6);
}

.about-me-text {
	font-family: Nolan; 
/*
    margin-left: 13vw;
	margin-top: 10px;
*/
	font-size: 20px;
	
}

.info {
	margin-left: 13vw;
	margin-top: 18px;
	margin-bottom: 40px;
	
}


.img-self {
    width: 300px;
    height: 290px;
    border-radius: 180px;*/
    display: block; /* Changed from inline to block */
    margin: auto; /* Centers the block element horizontally, overriding margin-left */
}

@media (max-width: 768px) {
    .img-self {
        display: block; /* Reinforces block-level display */
        margin-left: auto; /* Center-aligns the image horizontally */
        margin-right: auto; /* Center-aligns the image horizontally */
        width: 50%; /* Optional: Adjusts the width to be more responsive on small screens */
        height: auto; /* Adjusts height automatically to maintain aspect ratio */
    }
}


.title-portfolio {
	font-family: Nolan;
	font-size: 20px;
    color: rgb(239,6,6);
/*
	margin-top: 40px;
	margin-left: 12vw;
*/
}

.port-img {
	width: 330px;
	height: 240px;
    display: block;
    margin: 20px auto; 
/*  margin-left: 220px;*
/*	margin-top: 30px;*/
	
}

.

.title-div-contact {
	margin-top: 40px;
}

.border-bottom {
	width: 30%;
}

.border-bottom, 
h1 {
    font-size: 24px;
	padding-bottom: 5px;
	border-bottom-color: dimgray;
	font-family: Nolan;
}

.contact-title {
	margin-top: 20px;
	margin-bottom: 20px;
	display: block;
	
}

form {
	left: 10%;
	
}

h4 {
	font-family: Nolan;
        font-size: 20px
	
}

.get-in-touch {
	padding-left: 5vh;

}

#linkedin-icon {
	font-size: 1.8em;
}


.footer {
	margin-top: 50px;
	width: 100%; 
	height: 110px;
	background-color: #769B76;
	
}

.center {
margin: auto;
width: 60%;
padding: 10px;
}

.contact-me {
    font-size: 20px
    
}


.card-img-top {
    height: 200px; /* Fixed height for all images */
    width: 100%; /* Makes the image width responsive within the card */
    object-fit: cover; /* Covers the area without distorting the aspect ratio */
    object-position: top;
}


.card {
    margin-bottom: 20px; /* Space between cards */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* Subtle shadow for depth */
    border: none; /* Removes the default border */
    border-radius: 10px; /* Softens the card corners */
}

.card-body {
    padding: 20px; /* More space inside the card */
}

.card-title, .card-subtitle {
    color: rgb(239, 6, 6); /* Your theme's text color for consistency */
}

.card-footer {
    background-color: #f8f9fa; /* Lighter background for the footer */
    border-top: 1px solid #e9ecef; /* Subtle separation from the content */
    color: #769B76; /* Theme green for footer text */
}

.side-rectangle {
    background-color: rgb(216, 214, 229);
    /* Specify height if needed, e.g., height: 100vh for full viewport height */
    padding: 20px;
}
/* If .side-rectangle is used for actual sidebar content, consider removing 'position: absolute;' to allow normal flow within a grid system. */

@media (max-width: 768px) {
    .side-rectangle {
        /* Adjust or hide sidebar content on smaller screens */
        display: none;
    }
    .center, .card {
        width: 100%; /* Use the full width on smaller screens */
        margin: 10px 0; /* Adjust margin for vertical spacing */
    }
}