body {
	font-family: 'Hind Siliguri', sans-serif;
	color: rgba(255,255,255,0.75);
}

:root {
  --accent-color: rgba(0, 132, 134, 1);
  --accent-shadow: rgba(0, 132, 134, 0.8);
}

nav {
	background: var(--accent-color);
}

nav a, .navbar-brand {
	text-transform: uppercase;
	font-size: 170%;
}

.nav-item {
	margin: 0 10px;
	letter-spacing: 3px;
}

.banner {
	margin-top: -202px;
	height: 550px;
	background: var(--accent-color);
	transform: skewY(-9deg);
}

a {
	color: rgba(255,255,255,0.5);
}

a:hover {
	color: rgba(255,255,255,0.75);
	text-decoration: none;
}

#links a {
	font-size: 130%;
}

#dd {
	color: rgba(235,23,0,0.8);
}

#dd:hover {
	color: rgba(235,23,0,1);
}

#headshot {
	width: 65%;
	max-width: 400px;
	min-width: 120px;
	margin-top: -30%;
}

@media (max-width: 576px) {
	#headshot {
		max-width: 50%;
	}

	.exp {
		height:600px;
	}
}

@media (min-width: 576px) {
	.exp {
		height:400px;
	}
}
@media (min-width: 768px) {
	.exp {
		height:600px;
	}
}
@media (min-width: 992px) {
	.exp {
		height:500px;
	}
}
@media (min-width: 1200px) {
	.exp {
		height:550px;
	}
}

#explanation {
	margin: 122px 0 50px 0;
}

.exp {
	line-height: 2em;
}

.exp .text{
	color: white;
	visibility: hidden;
}

.exp:hover .text{
	visibility: visible;
}

#ddash {
	background-image: url(/docs/exp-imgs/ddash.jpg);
	background-size: cover;
}
#citsec {
	background-image: url(/docs/exp-imgs/citsec.jpg);
	background-size: cover;
}
#snap {
	background-image: url(/docs/exp-imgs/snap.jpg);
	background-size: cover;
}
#tibra {
	background-image: url(/docs/exp-imgs/tibra.jpg);
	background-size: cover;
}
#logic {
	background-image: url(/docs/exp-imgs/mcts.jpeg);
	background-size: cover;
}