*, *:before, *:after {
	-moz-box-sizing: border-box; -webkit-box-sizing: border-box; box-sizing: border-box;
   }
  
  html
  {
	  font-size:100%;
  }
  
  body
  {
	  -webkit-font-smoothing:antialiased;
	  color:#333332;
	  font-family:Lora, serif;
	  font-size:18px;
	  font-weight:400;
	  line-height:1.4;
	  text-rendering:optimizeLegibility;
  }
  
  h1
  {
	  color:rgba(0,0,0,.75);
  }
  
  h2
  {
	  font-family:Open Sans, sans-serif;
	  font-size:1.25em;
	  font-weight: normal;
  }

  h2 em
  {
	  color:#3ab54b;
	  font-style:normal;
	  font-weight:700;
  }

  h2 i
  {
	  color:rgba(0,0,0,.75);
	  font-size:normal;
	  font-weight:normal;
  }

.top-bar {
  	background-color: #3ab54b;
  	height: 60px;
  	width: 100%;
  	display: flex;
  	align-items: center;
  	padding: 0 20px; /* Padding on the left and right */
  	position: fixed;
  	top: 0;
  	left: 0;
  	z-index: 9999;
}

.top-bar-content {
  	display: flex; /* Keep logo and divider together */
  	align-items: center;
  	justify-content: flex-start;
}

.logo-divider {
  width: 1px;
  height: 30px;
  background-color: white;
  margin-left: 15px;
  margin-right: 15px; /* Add margin on the right to separate from navigation */
}

.top-bar-logo {
  	height: 40px;
  	vertical-align: middle;
  	width:auto;
}

/* Style the top navigation list container (Desktop Default) */
.top-nav {
    list-style: none; /* Remove bullet points */
    margin: 0;
    padding: 0;
    /* **Use Flexbox to arrange links horizontally** */
    display: flex; 
    /* **Allow the nav to take up the remaining space** */
    flex-grow: 1; 
    justify-content: flex-start; /* Align links to the left, next to the divider */
}

/* Style the individual list items */
.top-nav li {
    margin: 0 15px; /* Add space between links */
}

/* Style the links themselves */
.top-nav li a {
    color: white; 
    text-decoration: none;
    font-size: 1.1em;
    font-weight: 500;
    line-height: 60px; /* Center text vertically by matching top-bar height */
    padding: 0 5px; 
}

/* Add a hover effect for user feedback */
.top-nav li a:hover {
    color: #333332; 
}

/* --- Navigation Responsiveness --- */

/* 1. Hide the Toggle Button by default (Desktop View) */
.nav-toggle {
    display: none;
}

/* 2. Mobile/Tablet Breakpoint (Use 900px, which seems to be your main content stacking point) */
@media (max-width: 900px) {
    
    /* Modify the Top Bar container for mobile */
    .top-bar {
        /* Align logo and toggle button to opposite ends */
        justify-content: space-between; 
        /* Ensure the height can grow when the menu is open */
        height: auto; 
        /* Align items to the top to prevent the logo/toggle from stretching */
        align-items: flex-start; 
        /* Allow content to wrap */
        flex-wrap: wrap; 
    }

	.top-bar-content {
		padding-top:10px;
	}

    /* Hide the logo divider on mobile */
    .logo-divider {
        display: none;
    }
    
    /* Show and style the Toggle Button */
    .nav-toggle {
        display: block;
        /* Aligns to the right */
        order: 2; 
        padding: 10px 15px;
        margin-top: 10px;
        margin-bottom: 10px;
        background: none;
        color: white;
        border: 1px solid white;
        cursor: pointer;
        font-size: 1.1em;
        border-radius: 4px;
        text-align: right;
    }
    .nav-toggle .fa-bars {
        margin-right: 5px;
    }
    .nav-toggle[aria-expanded="true"] {
        /* Optional: change color when active */
        background-color: #333332; 
        border-color: #333332;
    }

    /* Set the default state for the navigation list (Hidden) */
    .top-nav {
        display: none; 
        flex-direction: column;
        width: 100%;
        order: 3; /* Places it below the logo and toggle button */
        background-color: #3ab54b;
    }

    /* Style the individual links in the mobile menu */
    .top-nav li {
        margin: 0;
        border-bottom: 1px solid rgba(255, 255, 255, 0.1);
        text-align: left;
    }
    
    .top-nav li a {
        padding: 12px 20px;
        line-height: normal; /* Reset line height */
        display: block; /* Make the link fill the whole list item */
    }

    /* Style the expanded menu state (shown by JavaScript's 'is-open') */
    .top-nav.is-open {
        display: flex; /* Makes the menu visible */
    }

    /* Adjust the main content area to clear the now-wrapped top-bar */
    .wrapper {
        margin-top: 0; /* The content will flow naturally below the wrapped top bar */
    }
}


/* -------------------------------------------
   Media Query for Mobile Devices
   ------------------------------------------- */

/* This block of code only applies when the screen width is 768px or less. */
@media screen and (max-width: 768px) {
    
    /* Target the list item with the 'mobile-hide' class */
    .mobile-hide {
        /* Hide the element and remove it from the document flow */
        display: none;
    }
}
  
  .wrapper
  {
	  height:100%;
  }
  
  .left
  {
	  background-color:rgba(0,0,0,.025);
	  border-right:1px solid rgba(0,0,0,.05);
	  float:right;
	  height:100%;
	  margin-left:-1px;
	  min-width:256px;
	  position:fixed;
	  width:33.33%;
  }
  
  .right
  {
	  float:right;
	  height:100%;
	  position:relative;
	  width:66.66%;
  }
  
  .nav li
  {
	  border-radius:5px;
	  color:rgba(0,0,0,.75);
	  display:inline-block;
	  list-style:none;
	  margin:15px 15px 0 0;
	  text-align:center;
  }
  
  .nav li a
  {
	  border-radius:5px;
	  color:rgba(0,0,0,.75);
	  display:inline-block;
  	  text-decoration:none;
	  list-style:none;
	  margin:15px 15px 0 0;
	  padding:10px;
	  text-align:center;
  }
  
  .nav li a:hover
  {
	  color:#FFF;
	  text-align: center;
	  text-decoration: none;
	  background:#3ab54b;
  }
  
  .name-hero
  {
	  background:rgba(0,0,0,.001);
	  bottom:0;
	  /*height:500px;*/
	  left:0;
	  margin-top:50px;
	  margin-right:auto;
	  margin-left:auto;
	  margin-bottom:auto;
	  position:absolute;
	  right:0;
	  top:0;
	  width:85%;
  }
  
  .name-hero ul
  {
	  display:block;
	  text-align: center;
  }
  
  .me-img
  {
	  background:url(https://media-exp1.licdn.com/dms/image/C4E03AQGnLq_IB_mf8Q/profile-displayphoto-shrink_400_400/0/1631022739752?e=1648684800&v=beta&t=eICUjHeH_g9GQEItmEMK1j2gCADwqfjrlccSD_5za58) no-repeat center center ;
	  background-size:100%;
		background-position:0px;
	  border-radius:100%;
	  height:50px;
	  margin:0 auto;
	  position:relative;
	  width:150px;
  }
  
  .name-hero img
  {
	  width:50%;
	  display: block;
		margin-left: auto;
		margin-right: auto;
	  border-radius:5px;
  }
  
  .name-hero h1
  {
	  font-family:Open Sans, sans-serif;
	  font-size:1.5em;
	  text-align:center;
  }
  
  .name-hero h1 em
  {
	  color:rgba(0,0,0,.3);
	  font-style:normal;
	  font-weight:700;
  }
  
  .name-hero p
  {
	  color:rgba(0,0,0,.75);
	  font-size:.75em;
	  line-height:1.5;
	  margin:0 8px 0 0;
	  text-align:center;
  }
  
  .name-hero p em
  {
	  color:#3ab54b;
	  font-size:1.5em;
	  margin:0 8px 0 0;
	  text-align:center;
  }
  
  .name-hero .name-text
  {
	  margin:0 auto;
	  width:85%;
  }
  
  .inner
  {
	  margin:0 auto;
	  max-width:975px;
	  padding-left:3em;
	  padding-right:3em;
  }
  
  .inner h1
  {
	  font-size:1.75em;
  }
  
  .inner p
  {
	  color:rgba(0,0,0,.75);
  }
  
  .inner p em
  {
	  color:rgba(0,0,0,1);
	  font-style:normal;
  }
  
  .inner section
  {
	  margin:95px auto;
  }
  
  ul
  {
	  list-style-type:none;
	  margin-top:-10px;
	  /*max-width:570px;*/
	  padding:0;
  }

  .experience ul
  {
	  list-style-type:circle;
  }
  
  .skill-set li
  {
	  background:rgba(0,0,0,.75);
	  border-radius:5px;
	  color:#FFF;
	  display:inline-block;
	  list-style:none;
	  margin:15px 15px 0 0;
	  padding:10px;
	  text-align:justify;
  }
  
  .skill-set li a
  {
	  color: white;
		text-align: center;
	  text-decoration: none;
  }
  
  .skill-set li:hover
  {
	  background:#3ab54b;
  }

  /* Responsive Design */
  @media (max-width: 900px) {
	  
	  .right,.left
	  {
		  float:none;
		  position:relative !important;
		  width:100%;
		  min-height:auto;
	  }

	  .left {
        border-right: none;
        background-color: transparent;
        padding-top: 20px;
	}

	.name-hero {
        position: relative;
        margin-top: 0;
        top: auto;
        bottom: auto;
        left: auto;
        right: auto;
        width: 100%;
    }
	
	  .handmade {
			text-align:center !important;
			margin-top:0px !important;
	}
  }
  
  @media screen and (max-width: 75em) {
	  body
		  { font-size:16px;}
  }
  
  @media screen and (max-width: 60em) {
	  body
		  { font-size:14px;}
  }
  
  .clearfix:after {
	 content: " "; /* Older browser do not support empty content */
	 visibility: hidden;
	 display: block;
	 height: 0;
	 clear: both;
  }
  
  .handmade {
	text-align:right;
	margin-top:100px;
  }
  
  .handmade em {
	font-family: 'Shadows Into Light', cursive;
	font-size: 1.25em;
	margin-left:5px;
  }

  /* Social Section */
  .fa-brands {
	  padding: 10px 5px;
	  font-size: 30px;
	  width: 50px;
	  text-align: center;
	  text-decoration: none;
	  margin: 5px 2px;
	  border-radius:5px;
	}
  
	.fa-facebook-f {
	  background: rgba(0,0,0,.75);
	  color: white;
  }
  
  .fa-x-twitter {
	  background: rgba(0,0,0,.75);
	  color: white;
  }
  
  .fa-linkedin-in {
	  background: rgba(0,0,0,.75);
	  color: white;
  }

  .fa-facebook-f:hover {
	background: #3ab54b;
}

.fa-x-twitter:hover {
	background: #3ab54b;
}

.fa-linkedin-in:hover {
	background: #3ab54b;
}

.about img
  {
	  width:50%;
	  display: block;
		margin-left: auto;
		margin-right: auto;
	  border-radius:5px;
  }