body {
	font-family: Lato;
}

/* Navbar Selector*/
.navbar {
	background: #2c3e50;  
}

/* Navbar links selector*/
.navbar-dark .navbar-nav .nav-link {
	/*Make the colors white*/
	color: white;
	/*Make all letters uppercase*/
	text-transform: uppercase;
	/*Create some spacing to the right*/
	padding-right: 20px;
	/*Navy blue border so there is no shifting when hovering*/
	border: 1px solid #2c3e50;
}

/*Do this when cursor is hovering over navbar links*/
.navbar-dark .navbar-nav .nav-link:hover { 
    border: 1px solid white;
    color: white;
}

/*Cover container selector*/
#coverContainer {
	max-width: 700px;
	text-align: center;
	height: 100vh;
	margin: auto;
}

/*Arrow selector*/
#arrow {
	position: absolute;
	top: 89vh;
	font-size: 48px;
	color: black;
}
/* Move arrow position up slightly when screen height goes below 500px*/
@media only screen and (max-height: 500px) {
    #arrow {
    	position: absolute;
		top: 85vh;
		font-size: 48px;
        
    }    
}

/*Down arrow animation */
.down_arrow {
	transform: translate(0px, -15px);
	transition-property: transform;
	transition-duration: 1s;
	transition-timing-function: linear;
}
.down_arrow1 {
	transform: translate(0px, 15px);
	transition-property: transform;
	transition-duration: 1s;
	transition-timing-function: linear;
}

/*h1 and h4 elements within cover container selector*/
#coverCenter {
	position: relative;
	top: 45%;
}

/*cover name selector*/
#cover_name {
	text-transform: uppercase;
	font-weight: 900;
}

/*Left dash selector*/
#left_dash {
	padding-right: 10px;
	letter-spacing: -8px;
}

/*Right dash selector*/
#right_dash {
	padding-left: 10px;
	letter-spacing: -8px;
}

/*Remove dashes at specific viewport size*/
@media only screen and (max-width: 500px) {
    #left_dash {
        display: none;
    }
    #right_dash {
        display: none;
    }    
}

/*selector for container containg About Me*/
.aboutMeContainer {
	max-width: 700px;
	text-align: center;
	margin: auto;
	/*padding top so that clicking the a link to the about me section does not scroll too far down*/
	padding-top: 5%;
	padding-bottom: 5%;
}

/*increase padding-top when screen width is smaller*/
@media only screen and (max-width: 500px) {
	.aboutMeContainer {
		max-width: 700px;
		text-align: center;
		margin: auto;
		padding-top: 15%;
	}
}

/*About Me header selector*/
#aboutMeDisplay {
	color: #2c3e50;
	font-weight: 500;
	font-size: 36px;
	border-bottom: 1px solid black;
	padding-bottom: 2.5%;
}

.sideProjectsContainer {
	max-width: 900px;
	height: 100vh;
	padding-top: 5%;
	text-align: center;
	margin: auto;
}

/*increase padding-top when screen width is smaller*/
@media only screen and (max-width: 500px) {
	.sideProjectsContainer {
		max-width: 900px;
		text-align: center;
		height: 100vh;
		margin: auto;
		padding-top: 15%;
	}
}

#aboutMe {
	background: #e9ecef;
}

p {
	text-align: left;
}

.sideProjectsContainer h1 {
	color: #2c3e50;
	font-weight: 500;
	font-size: 36px;
	border-bottom: 1px solid black;
	padding-bottom: 2.5%;
	margin-bottom: 20px;
	max-width: 700px;
	margin-left: auto;
	margin-right: auto;
	margin-top: auto;
	margin-bottom: 10px;
}

figcaption {
	position: absolute;
    top: 0px;
    left: 0px;
    padding: 20px 30px;
    height: 100%;
    width: 100%;
    color: white;
    background: #2c3e50;
    opacity: 0;
    display: block;
    transition: opacity 0.75s;
	-webkit-transition: opacity 0.75s;
	-moz-transition: opacity 0.75s;
}

.figcaptionTitle {
	font-size: 200%;
	border-bottom: 1px solid white;
}


.contactIcons {
	font-size: 32px;
	padding-top: 10px;
	letter-spacing: 5px;
	color: black;
}

.contactIcons:hover{
	color: #2c3e50;
}

.aboutMeLinks {
	color: black;
}