@charset "utf-8";
/*headline: font-family: 'Poiret One' sans-serif;
paragraph: font-family: 'DM Serif Text' serif;
*/

/*My Colors:
brown: #5D553F
white: #FFFFFF
black: #191919
tan: #D9CDBF
*/

body {
	font-family: 'DM Serif Text' serif;
	background-color: #5D553F;
}

h1,h2,h3,h4,h5,h6 {
	font-family: 'Poiret One' sans-serif;
}

.navbar-custom {
	font-family: 'Poiret One' sans-serif;
}

/* Background color for navbar and dropdown menus */
.navbar-custom, .navbar-custom .dropdown-menu {
background-color: #FFFFFF;
}

/* Text color for navbar and dropdown menus */
.navbar-custom .navbar-brand, .navbar-custom .navbar-text,
.navbar-custom .navbar-nav .nav-link,
.navbar-custom .dropdown-item {
color: #5D553F;
}

/* Background and text colors for current page link and links on hover and
focus */
.navbar-custom .nav-item.active .nav-link,
.navbar-custom .nav-item:hover .nav-link,
.navbar-custom .nav-item:focus .nav-link,
.navbar-custom .dropdown-item:hover,
.navbar-custom .dropdown-item:focus {
background-color: #D9CDBF;
color: #191919;
font-family: 'Poiret One' sans-serif; 
}

/* Border and text colors for menu icon on small screens */
.custom-toggler.navbar-toggler {
border-color: #5D553F;
color: #FFFFFF;
background-color: #5D553F;
}

/* Hamburger icon - use same rgb values as previous rule for stroke */
.custom-toggler .navbar-toggler-icon {
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(236,240,241, 0.7)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
	background-color: #5D553F;
}

/*navbar-brand logo*/
.navbar-brand {
	background-image: url("../Images/eflogo.png");
    background-repeat: no-repeat;
    background-size: 42px auto;
    background-position: 6% center;
    padding-left: 70px;
}

#home_banner {
	padding-left: 0px;
	padding-right: 0px;
	position: relative;
	
}

#home_banner h1 {
	text-decoration: overline #5D553F;
	text-decoration-style: dotted;
	text-decoration-color: #D9CDBF;
	letter-spacing: 4px;
	color: #FFFFFF;
	text-shadow: 4px 2px 2px #5D553F;
	position: absolute;
	left: 3%;
	bottom: 2%;
	font-size: 5rem;
}

hr {
	background-color: #D9CDBF;
}

.card-body, .card {
	background-color: #5D553F;
	border: none;
}

.card-title {
	color: #D9CDBF;
}

.card-text {
	color: #FFFFFF;
}

.btn-primary {
	background-color: #18696E;
	border: #18696E;
}

.btn:hover {
	background-color: #D9CDBF;
}

.btn:checked {
	background-color: #D9CDBF;
}


.jumbotron {
	background-color: #D9CDBF;
	color: #5D553F;
	text-align: end;
}

.btn-jumbo:hover {
	text-decoration: none;
	background-color: #5D553F;
	border: 1px solid #5D553F;
	color: #FFFFFF;
	font-weight: 300;
}


footer {
	text-align: center;
	line-height: 60px;
	background-color: #191919;
	color: #FFFFFF;
	
}

.about {
	display: flex;
	align-items: center;
}

.about-head {
	text-align: center;
	color: #D9CDBF;
	text-decoration: none; 
}

.about-cap {
	text-align: center;
	color: #FFFFFF;
}

.resume, .container {
	color: #FFFFFF;
}

.jum-pho {
	margin-bottom: 0;
}

.porthead {
	color: #D9CDBF;
}

.port-card {
	border: 1px solid #D9CDBF;
}

.social a {margin: 0;
    display: inline-block;
    text-decoration: none;
    margin-left:10%;
    margin-right:10%;
}
/* Style all font awesome icons */
.fa {
  padding: 10px;
  font-size: 30px;
  width: 40px;
  margin-right: 5px;
  text-align: center;
  text-decoration: none;
}

/* Add a hover effect if you want */
.fa:hover {
  opacity: 0.7;
}

/* Set a specific color for each brand */

/* Facebook */
.fa-facebook {
  background: #3B5998;
  color: white;
}

/* Instagram */
.fa-instagram {
  background: #125688;;
  color: white;
}

.con-head {
	color: #D9CDBF;
}










/*Media Query Breakpoints*/
/*X-SMALL ONLY*/
@media screen and (min-width:375px){
#home_banner h1 {
    font-size: 2rem;
    bottom: 1%;
    left: 5%;
    }    
}


/*SMALL SIZE ONLY*/
@media screen and (min-width:576px){
#home_banner h1 {
    font-size: 2rem;
    bottom: 1%;
    left: 5%;
    }    
}

/*MEDIUM SIZE ONLY*/
@media screen and (min-width: 768px) {
  #home_banner h1 {
	  font-size: 3rem;
       bottom: 2%;
       left: 3%;
              }
  }


/*LARGE SIZE ONLY*/
@media screen and (min-width:992px){
    #home_banner h1 {
        font-size: 5rem;
        bottom: 2%;
        left: 3%;
        }
}