body {
  text-align: center;
  background-image: url('assets/bg.png');
}

a {
	color: #5454a5;
	transition: ease 0.2s;
	text-decoration: underline;
}

a:hover {
	color: #6e8ec9;
}

h2 {
	color: #b33e46;
	}

hr {
    box-sizing: content-box;
    height: 0;
    overflow: visible;
    width: 100%;
	border-width: 0;
	border-top-width: 2px;
	border-color: #5d8095;
	border-style: solid;
}

#site-wrapper {
  max-width: 1000px;
  background-color: #ffabb1;
  margin: auto;
}

header {
	color: #76334c;
}

nav {
	background-color: #ef949a;
	position: -webkit-sticky;
    position: sticky;
	top: 0;
	color: #fff;
	z-index: 666;
}

nav a, footer a {
	color: #fff;
	font-weight: bold;
	font-family: monospace;
	font-size: 1.1rem;
}

nav a:hover, footer a:hover {
	color: #ffe5e5;
}

main {
	background-color: #eff9ff;
}

#top-info p {
	background-color: #ddeaf1;
	border-radius: 0.25rem;
	padding: 1rem;
	margin: 0.25rem;
}

#pv-wrapper {
  display: grid;
  grid-template-columns: 1fr;
  grid-gap: 1.25rem;
    align-items: start;
}

article {
	box-shadow: 0 8px 6px -6px #7891a2;	
	margin-bottom: 0.5rem;
}

.pv-infowrapper {
	padding: 1rem;
	background-color: #ddeaf1;
}

.pv-thumb {
	max-width:100%;
	border: #d56971 solid 4px;
	transition: ease 0.2s;
}

.pv-thumb:hover {
	border-color: #e28695;
	opacity: 0.8;
}

.preview-buttons {
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 10px;
}

.preview-buttons a {
	font-family: monospace;
	text-decoration: none;
	color: #fff;
	font-weight: bold;
	background-color: #ef949a;
	padding: 0.5rem;
	transition: ease 0.2s;
	border-radius: 0.25rem;
	  font-size: 1rem;
}

.preview-buttons a:hover {
	background-color: #ffabb1;
}

.preview-box h1 {
	background-color: #ffabb1;
	line-height: 1.1;
	margin: 0;
	padding: 0.25rem;
}

.preview-box h1 a {
    font-size: 1.1rem;
	color: #b33e46;
}

.preview-box h1 a:hover {
	color: #d56971;
}

.preview-box summary {
	color: #b33e46;
	transition: ease 0.2s;
}

.preview-box summary:hover {
	color: #d56971;
}

.pv-category {
	margin: 0;
	padding: 0 !important;
	color: #586d9d;
}

.pv-category p {
	margin: 0 !important;
}


@media (min-width: 600px) and (max-width:800px) {
    #pv-wrapper { grid-template-columns: 1fr 1fr;}
}   

@media (min-width: 801px) {
    #pv-wrapper { grid-template-columns: 1fr 1fr 1fr;}
}  

/* 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;
  }
  
  
/** Gallery Codes **/
/*===== Card Gallery ====*/


/*===== 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; transition: ease-in-out 0.2s;}
.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;}
}

.card-sm:hover {opacity:0.8;}

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