/* =======================================
      INTRODUCTION
======================================== */

#intro .container {
	padding-top: 3rem;
	padding-bottom: 1rem; /* Since navigation bar is directly below intro */
	padding-left: 25px;
	padding-right: 25px;
	width: 95%;
	min-width: 320px;
	max-width: 650px;
}
/* To prevent line spacing from being too large and awkward to read */
@media (min-width: 850px) { #intro p, #intro ul, #intro ol { line-height:1.75; } } 

#intro img {
	display:block; 
	width:60%; 
	height:60%; 
	max-width:13em; 
	max-height:13em;
	margin-left: auto;
	margin-right: auto;
	margin-top: 2.5rem;
	margin-bottom: 2.5rem;
}

#intro_name_long,
#intro_name_short {
  display: none;
}

.intro-show {
  display: inherit !important;
}

/* =======================================
      NAVIGATION
======================================== */
.navbar {
    min-width: 320px;
	position: relative;
}

.navbar.sticky {
	position: fixed;
}

/* =======================================
      PORTFOLIO
======================================== */
.sticky + #portfolio {
	padding-top: 4rem;
} 

#portfolio .container {
  min-width: 320px;
	padding-top: 2rem;
  padding-bottom: 2rem;
}

.portfolio-item {
	margin-bottom: 1.5rem;
}

/* View More */
#portfolio_more {
  cursor: pointer;
  font-family: var(--heading-family);
  text-align: center;
  color: inherit;
  opacity: 0.5;
  width: 80%;
  min-width: 225px;
  max-width: 330px;
  padding: 0.5rem;
  margin-left: auto;
  margin-right: auto;
  border: 1px solid;
  border-color: var(--pri);
  border-radius: 10rem;
}

#portfolio_more:hover {
  color: inherit;
  background-color: var(--font-color-10);
  opacity: 0.5;
  border-color: var(--font-color-50);
}

#portfolio_more .fa-angle-double-down {
	margin-right: 0.5rem;
}

/* For Footer */
#footer .container {
    min-width: 320px;
}