@charset "utf-8";
/* CSS Document for Eric Hendricks Portfolio */

/* Fonts:
	- Paragraph, Body: champagne & limousines, big noodle titling
	- h1: dream glory
	- h2: assassin
	font-family: "Tapestry", cursive; 
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Tapestry&display=swap" rel="stylesheet">
<link rel="stylesheet" href="https://fonts.google.com/specimen/Quantico?query=quan">
*/

/* Color Pallet Codes */
-White- #FFFFFF
-Black- #000000
-Grey- #E3E6EA, #ecf0f1
-DrkGry- #303030
-DrkBlue- #094056
-LtBlue- #04ADD4
-DrkGrn- #0FA259
-LtGrn- #95D658
-DrkPrpl- #6E0382
-LtPrpl- #BB37E2
-Pink- #E917A3, #F500AF


/* Background color for navbar and dropdown menus */
.navbar-custom, .navbar-custom .dropdown-menu {
    background-color: #082153;
	}
/* 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: #F000AB;
	font-family: Dream Glory;
	background-color: #082153;
	}
/* 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: #BB37E2;
    color: #0C0E0E;
	border-radius: 15px;
	}
/* Border and text colors for menu icon on small screens */
.custom-toggler.navbar-toggler {
	background-color: #082153;
    color: #95D658;
	}
/* 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, 1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
  color: #95D658;
  background-color: #082153;
	}
 /*navbar-brand logo*/
  .navbar-brand {
	  	background-repeat: no-repeat;
        background-size: 50px auto;
        background-position: 6% center;
        padding-left: 70px;
    }
.navbar-custom {
	background: #082153;
	border-color: #FFFFFF;
	}

.btn {
	  background-color: #BB37E2;
	  border-radius: 20px;
	  border-color:#2f2f3b;}

/* Main content codes */
 body {
    background-color: #E3E6EA;
    font-family: quantico, "Lucida Bright", "DejaVu Serif", Georgia, "serif";
	font-size: 1rem;
    font-weight: 400;
	}
h2 {
	text-align: center;
	font-size: 1.8em;
    color: #F500AF;
    font-weight: 600;
	background-color:#082153;
	padding: 4px
}
h3 {
	text-align: center;
	font-size: 1.8em;
    color: #F500AF;
    font-weight: 600;
	background-color:#082153
}
h4 {
	color:#F000AB;
    font-size: 4rem;
	text-shadow: 3px 3px 6px #082153;
}
p {
}

#banner {
    padding-left: 0px;
    padding-right: 0px;
    position: relative;
}
#banner h1 {
	color:#F000AB;
    position: absolute;
    font-size: 5.5rem;
	bottom: 2%;
	right: 0%;
	text-shadow: 3px 3px 6px #082153;
	}
#mainFooter {
	padding-left: 0px;
	padding-right: 0px;
	line-height: 50px;
	background-color:black;
}
#mainFooter p{
	text-align: center;
	color: #E917A3;
}
#highlights {
	text-align: center;
}

/*3 col main section*/
#highlights img[src$="icon.svg"] {
    width: 50px;
    margin: 10px auto;
    display: block;
}

#highlights h2 {
	font-size: 1.8em;
    color: #913A31;
	font-weight: 600;
}

/* Articles
------------------------- */
#articles {
    padding: 20px 0;
}

/* Marketing
------------------------- */
#marketing {
    padding: 20px 0;
	text-align: center;
}

/* Featurettes
------------------------- */
.featurette {
    text-align: center;
	display:flex;
}

.featurette-divider {
  margin: 1rem 0; /* Space out the Bootstrap <hr> more */
}

/* Thin out the marketing headings */
.featurette-heading {
  padding-top: 2px;
  font-weight: 600;
  line-height: 1;
  letter-spacing: .03rem;
}
    .contact_bg h1 {
        color: #9EBAAF;
        text-shadow: 2px 1px rgba(71,71,71,0.68);
        text-align:center;
        line-height: 400px;
    }

    .message {
        text-align: center;
        color: #E3776C;
        font-weight: 800;
    }

    .contact_side {
        height: 500px;
    }


/* Media Query */
@media screen and (min-width:440px){
	#banner h1{
		font-size: 1.8rem;
	}
}

@media screen and (min-width:576px){
	#banner h1 {
		font-size: 2.5rem;
		bottom: 3%;
	}
}

@media screen and (min-width:960px){
	#banner h1 {
		font-size: 3rem;
		bottom: 8%;
		left: 5%;
		position: absolute;
	}
}