/* Global styles *******************************/
body {
	color: rgba(255, 255, 255, .94);
	background-color: rgb(22, 28, 39);
	background-image: url("media/bg.png");
	background-size: 100%;
	background-repeat: repeat-y;
	padding-top: 3rem;
}

a {
	text-decoration: none;
}

h1, h2, h3, h4, h5 {
	font-weight: 200;
}

.heading {
	margin-top: .5rem;
	margin-bottom: 2.5rem;
}

.jumbo {
	font-size: 2em;
	font-weight: 100;
}

.narrow {
	max-width: 50rem;
}

.active {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: .3rem;
}

/* Navbars *************************************/
.nav-top {
	font-weight: bold;
	background-color: rgb(255, 255, 255);
	box-shadow: 0rem 0rem 1.25rem rgba(0, 5, 10, .5);
}

.navbar-brand {
	font-weight: 200;
	font-size: 2rem;
}

.nav-link:hover {
	opacity: .6;
}

/* Gallery *************************************/
.gallery-group {
	 margin-bottom: 1.25rem;
}

.gallery {
	margin-bottom: 2rem;
}

.gallery-large {
	margin-top: 2.5rem;
}

.gallery-image {
	width: 100%;
	height: auto;
	margin-bottom: .8rem;
	opacity: 1;
	transition: opacity .0666s ease;
}

.gallery:hover {
	opacity: .75;
}

.gallery:active {
	opacity: .5;
}

.gallery-body {
	color: rgba(255, 255, 255, .94);
	text-decoration: none;
	line-height: 1.25rem;
	/* margin-bottom: 1.5rem; */
}

.gallery-title {
	color: rgba(255, 255, 255, .94);
	font-weight: bold;
	text-decoration: none;
}

.gallery-description {
	text-align: justify;
	text-justify: inter-word;
}

.gallery-width {
	max-width: 65rem;	
}

/* The gallery "previous/next" pagination */
.gallery-pager {
	color: rgba(255, 255, 255, .94);
	text-decoration: none;
	font-weight: 100;
	font-size: 1.5rem;
	padding-top: .5rem;
}

.gallery-pager:hover {
	opacity: .75;
}

.gallery-pager:active {
	opacity: .5;
}

/* Credits *************************************/
.role {
	color: rgb(11, 14, 20);
	background-color: rgb(255, 255, 255);
	padding: 2rem;
	padding-top: 1rem;
	margin-bottom: 2rem;
}

.credit {
	margin-bottom: 1rem;
}

.date {
	/* nothing */
}

.key {
	font-weight: bold;
}

/* Contact *************************************/
.address {
	font-weight: normal;
	margin-bottom: 20%;
}

.address a {
	color: rgba(255, 255, 255, .94);
	text-decoration: underline;
}

.address-name {
	border-bottom: solid rgba(255, 255, 255, .94) 2px;
	margin-bottom: 1rem;
}

/***********************************************
   Media queries to update some styles.
   IMPORTANT: This section should always be last
   to ensure styles that are being updated are 
   already declared.
************************************************/

/* For large text: Use heavier weight fonts for small screens. */
@media (max-width:767px) {
	.jumbo {
		font-weight: 200;
	}
	h1, h2, h3, h4, h5, .navbar-brand {
		font-weight: 300;
	}
}

/* For gallery descriptions: change the min height on wide and narrow screens
to keep the Previous/Next buttons consistent from page to page. 
Define twice with "not" to get if/else behavior to eliminate redraw flashes. */
@media all and (min-width:768px) {
	.gallery-description { min-height: 5rem; }
}
@media not all and (min-width:768px) {
	.gallery-description { min-height: 7.5rem; }
}
@media all and (max-width:480px) {
	.gallery-description { min-height: 11.5rem; }
}

/* For credits: Deactivate line breaks for wide screens 
   to switch from five lines to three lines. */
@media (min-width:768px) {
	.mobile-br {
		display: none;
	}
}