h1 {
	font-family: 'Lucida Bright';
}

body {
	background-color: #ffe5ec;
    background-image: url('/assets/img/background.png');
	}

/* Scrollbar */

::-webkit-scrollbar-track
{
	border-radius: 10px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar
{
	width: 12px;
	background-color: #F5F5F5;
}

::-webkit-scrollbar-thumb
{
	border-radius: 10px;
	background-color: #ffbbcb;
}

#wrapper {
	max-width: 1284px;
	margin: auto;
	color: #9b3959;
	min-height: 100vh;
	border-image-slice: 0 42 0 42 fill;
	border-image-width: 0px 42px 0px 42px;
	border-image-outset: 0px 0px 0px 0px;
	border-image-repeat: repeat repeat;
	border-image-source: url("/assets/img/border.png");
	border-width: 0 42px;
	border-style: solid;
	padding: 1em 2em;
}

a {color:#af385f;}
h1 a:link { text-decoration: none; }
h1 a:visited { text-decoration: none; }
h1 a:hover { text-decoration: none; }
h1 a:active { text-decoration: none; }

/*===== Card Gallery ====*/

.gallery {
	display: flex;
	flex-wrap: wrap;
}

.gallery > div {flex-grow:1; position: relative;}

.multi-pics {position:absolute; top:0; right:0; opacity:0.8;}

section#compilation-box {
  font-size: 0; 
  margin: 15px -5px -5px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  }

#compilation-box img {
  align-self: center;
  max-width: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

.card-xs {height: 20vh;}
.card-sm {height: 30vh;}
.card-md {height: 45vh;}
.card-lg {height: 60vh;}

@media only screen and (min-width: 768px) {
  .card-sm-rm {height: 30vh;}
  .card-md-rm {height: 45vh;}
  .card-lg-rm {height: 60vh;}
}

.expand-img {
  min-width: 100%;
  max-width: 100%;
  min-height: 100%;
  max-height: 100%;
  object-fit: cover;
  object-position: center 20%;
}

#wrapper div {margin: 0.25rem;}
#wrapper div img {border-radius: 0.25rem}

.card-xs {height: 20vh;}
.card-sm {height: 30vh;}
.card-md {height: 45vh;}
.card-lg {height: 60vh;}
  
/* Lightbox: https://codepen.io/gschier/pen/HCoqh */
/** LIGHTBOX MARKUP **/

.lightbox {
	/* Default to hidden */
	display: none;
  
	/* Overlay entire screen */
	position: fixed;
	z-index: 999;
	top: 0;
	left: 0;
	right: 0;
	bottom: 0;
	
	/* A bit of padding around image */
	padding: 1em;
  
	/* Translucent background */
	background: rgba(0, 0, 0, 0.8);
  }
  
  /* Unhide the lightbox when it's the target */
  .lightbox:target {
	display: block;
  }
  
  .lightbox span {
	/* Full width and height */
	display: block;
	width: 100%;
	height: 100%;
  
	/* Size and position background image */
	background-position: center;
	background-repeat: no-repeat;
	background-size: auto;
  }