/* =======================================================
*
* 	Template Style 
*
* ======================================================= */
*{
	
	padding:0;
	box-sizing:border-box;
}
body {  	
	font-family: "Poppins", serif;
	font-weight: 400;
	font-size: 16px;
	line-height: 1.7;
	color: #4d4d4d;
	background: #fff;  
	padding: 0px;
	background:linear-gradient(rgba(255,255, 255, .9), rgba(236,236, 235, .9));
}

#page {
  position: relative;  
  overflow-x: hidden;
  width: 100%;
  height: 100%;
  -webkit-transition: 0.5s;
  -o-transition: 0.5s;
  transition: 0.5s;
}

::-webkit-selection {
  color: #fff;
  background: #9090BB;
}

::-moz-selection {
  color: #fff;
  background: #9090BB;
}

::selection {
  color: #fff;
  background: #4d4d4d;
}

.bold{
	font-weight:700;
}

/* =======================================================
*
* 	Navbar Style 
*
* ======================================================= */
.navbar {
	background-color: rgba(255,255,255,.9);
    position: fixed; /* Fixes the navbar at the top */
    top: 0;
    left: 0;
    right: 0;    
    z-index: 1000; /* Ensure it's above other elements */
	padding: 10px 20px; /* Spacing around the menu */
    
	min-height: 50px;	
	transition: background-color 0.3s;	
	
}

.navbar .content {
	display: flex;
    justify-content: space-between; /* Space between button and menu */
    align-items: center; /* Center items vertically */
	max-width:1200px;
	margin:auto;
}

.navbar .scrolled{
	background-color:rgba(200, 200, 200, .9);	
}

.navbar ul {
    list-style: none; /* Remove bullet points */
    margin: 0;
    padding: 0;
    display: flex; /* Display items in a row */
    justify-content: flex-end; /* Align items to the right */	
}

.navbar li {
    margin: 0 15px; /* Space between menu items */
}

.navbar ul li {
	margin: 0;
	padding-left: 10px;
}

.navbar a {
    text-decoration: none; /* Remove underline from links */
    color: black; /* Text color */
    font-weight: bold; /* Bold text */
	padding: 5px 10px; /* Add some padding for a better click area */
    transition: background-color 0.3s ease, color 0.3s ease; /* Smooth transition */	
}

.navbar a:hover {
    background-color: rgba(0, 0, 0, 0.5); /* Change background color on hover */
    color: white; /* Change text color on hover */
    border-radius: 5px; /* Optional: rounded corners for the hover effect */
}

.navbar #portfolio a:hover {
    background-color: rgba(61,133, 243, .9); /* Change background color on hover */    
}

.navbar #about a:hover {
    background-color: #40BA58; /* Change background color on hover */    
}

.navbar #resume a:hover {
    background-color: rgba(243, 61, 61, .9); /* Change background color on hover */    
}

.navbar .menu_end li{
	justify-content: flex-end;
}

.navbar #linked_in_menubar
{
	display:none;
}

/* Menu Button Styles */
.menu-button {	
    font-size: 24px; /* Size of the hamburger icon */
    cursor: pointer; /* Pointer cursor */
    display: none; /* Initially hidden */	
	color:white;
}

.main{
	padding-top:40px;
	min-height:95vh;	
	max-width:1200px;
	margin:auto;	
}

.main .portrait{
	display:flex;
	align-items:center;
	justify-content:left;
	margin:0px;
	padding:0px;
	
}

.main .portrait img{
	position: absolute;	
	min-width:150px;
	width:10vw;
	height:auto;
}

.main .portrait .img_overlay{
	display:flex;
	align-items:center;
	justify-content:left;
	margin:0px;
	padding:0px;
	position: absolute;
	opacity: 0;
	width:10vw;
	-webkit-transition: all 0.4s ease-in-out;
	transition: all 0.4s ease-in-out;
}

.main .portrait .img_overlay:hover{
	opacity: 0.97;
}

.main .horizontal_spacer{
	min-width:150px;
	width:10vw;
	flex-shrink:0;
}

.main .details{
	padding-left:20px;
	padding-right:20px;
}

.main .details h1{
	padding:0px;
	margin:0px;
}

.main .col2{
	display:flex;
	flex-direction:column;
	align-items: center;
	justify-content:center;
}

.main .caption{
	padding-bottom:20px;
	color: rgba(96, 96, 96, 255);	
	font-size:calc(0.4rem + 0.2vw);
	margin-left:40px;
	margin-right:40px;
	width:80%;
}

.main .col2 img{
	max-width:500px;
	width:50vw;
	padding:20px;
	padding-right:40px;
}

.spacer {
	height:20px;
}

.big_spacer {
	height:40px;
}

.row{
	display:flex;
	flex-direction:row;
}





.footer {
	background-image: linear-gradient(rgba(235,235, 235, .9), rgba(210,210, 210, .9)); 
	color: black;
	padding-top: 20px;
	padding-bottom: 20px;
	text-align: center;
}

.footer p{
	font-size:calc(0.7rem + 0.6vw);
	margin:0px;
	padding:0px;
}

.footer .copyright{
	padding-top:20px;
	font-size:calc(0.4rem + 0.3vw);	
}


.name{
	font-size:calc(1.2rem + 0.8vw);	
}










/* Responsive layout - makes the two columns stack on top of each other instead of next to each other */
@media (max-width: 768px) {  
   
  .navbar ul {
		justify-content: flex-start; /* Space between button and menu */
        display: none; /* Hide the menu by default */
        flex-direction: column; /* Stack items vertically */
        position: absolute; /* Position it below the button */
        right: 20px; /* Align to the right */
        
		background-color: rgba(100, 100, 100, 0.9);
		
        top: 30px; /* Adjust based on navbar height */
        width: 200px; /* Set width for the dropdown */		
    }
	
	.navbar a{
		color:white;
	}

    .navbar ul.show {
        display: flex; /* Show the menu when toggled */
		flex-direction:column;		
		justify-content: flex-start;
		height:100%;
		padding: 10px 0;
		min-height:160px;	
		align-items:flex-start;		
		color:white;
		left:10px;
		top:50px;
		gap:10px;
    }

	.navbar #linked_in_menubar
	{
		display:initial;
	}
	
	.menu-button {
        display: block; /* Show the hamburger icon */
		color:#4d4d4d;
    }	
	
	.row{
		display:flex;
		flex-direction:column;
	}
	
	.main .col2 img{
		max-width:500px;
		width:90vw;
		padding:20px;
		padding-right:20px;
	}
	
	
	.main .portrait{
		display:flex;
		align-items:start;
		justify-content:center;
		margin:0px;
		padding:0px;
		
	}

	.main .portrait img{
		position: absolute;	
		min-width:150px;
		width:70vw;
		height:auto;
		max-width:300px;
	}

	.main .portrait .img_overlay{
		display:flex;
		align-items:start;
		justify-content:center;
		margin:0px;
		padding:0px;
		position: absolute;
		opacity: 0;
		width:70vw;
		-webkit-transition: all 0.4s ease-in-out;
		transition: all 0.4s ease-in-out;
		max-width:300px;
	}
	
	.main .horizontal_spacer{
		min-width:150px;
		width:80vw;
		height:100vw;
		max-height: 400px;
		flex-shrink:0;
		max-width:300px;
	}	
	
	.main .caption{
		padding-bottom:20px;
		color: rgba(96, 96, 96, 255);	
		font-size:calc(0.6rem + 0.5vw);
		margin-left:40px;
		margin-right:40px;
	}
}