body {
  font-family: "Abel";
  background-image: url("bgpaper.png");
  background-color: #e6b6ae;
  color: #402b35;
  margin: 0;              /* Remove margins on body so header can go right at the top */
}
header {
  background-color: #6d5761;
  color: White;
  margin: 0;               /* Most headers have no margin by default, but let's be explicit */
  padding: 0.5em;
  display: flex;          /* A special way to organize elements more logically */
}
header h1 {
  font-size: 1.2em;       /* Make it smaller */
  margin: 0;              /* Don't need margins inside header */
  margin-right: auto;     /* Force everything after the header to be pushed as far as possible */
}
header a:link, header a:visited {
  color: lightblue;       /* Make it more visible against the black background */
}
/*----Gallery----*/
.page {
	position: absolute;
	display: inline-block;
	overflow: auto;
	background-image: url("bgpaper.png");
	max-width: 60%;
	padding-left: 1.5em;
	padding-right: 1.5em;
	margin-left: 2.5em;
	margin-right: 30em;
	margin-top: 4.5em;
	background: #eae5e3;
	border: 2em;
	border-color: #377d8c;
	border-style: solid; 
	vertical-align: top;
	box-shadow: 0.5em 0.5em .10em rgba(177, 126, 132, 1);
}
.artcard {
	padding: 1em;
	margin: 1em;
	background: #cf8a86;
	border-radius: .5em;
	display: inline-block;
	vertical-align: top;
	box-shadow: 0.1em 0.1em rgba(0, 0, 0, 0.3);
}
.artcard:hover {
	background: DarkSalmon;
	color: DarkSlateGray;
}
.artcard >* {
	margin-bottom: 0.5em;
	width: 12rem;
}
.artcard .artlink {
	height: 15rem;
	display: flex;
	justify-content: center;
	align-items: center;
}
.artcard img {
	max-width: 100%;
	max-height: 100%;
}
.artcard p {
	font-style: italic;
}
.artcard time {
	color: #6e4c5c;
	font-size: 0.8em;
}
/*----Sidebar----*/
.sidebar {
  /*position: fixed;*/
  float: right;
  /*display: inline-block;*/
  /*height: 80vh;*/
  width: 23vw;
  margin:2em;
  max-width: 35%;
  margin-left: 10em;
  margin-right: 5em;
  /*padding: 1em;*/
  padding-bottom: 2em;
  background: #a28a95;
  text-align: center;
  font-size: 0.8em;
  box-shadow: 0.5em 0.5em .10em rgba(177, 126, 132, 1);
  border: 5px;
  border-color: #6d5761;
  border-style: solid;
}
.sidebar img {
	max-width: 100%;
	max-height: 100%;
	
}
.sidebar .button {
	color: Black;
	display: inline-table;
	vertical-align: central;
	font-weight: bold;
	background: #cfb1bf;
	width: 80%;
	max-width: 80%;
	margin: .5em;
	margin-left: 1em;
	margin-right: 1em;
	padding: 1em;
	border-radius: 0.25em;
	box-shadow: 0.25em 0.25em .10em rgba(0, 0, 0, 0.3);
}

.sidebar .button .buttonlink {
	display: flex;
	justify-content: center;
	align-items: center;
}

.button:hover {
	background: Lavender;
}
a:link {
	color: Black;
}
a:visited {
	color: Black;
}
/*---- Main page content----*/
.imagefloat {
	position: absolute;
	vertical-align: top;
	transform: translate(-15%,-50%);
	top: 50%;
	left: 5%;
	max-width: 70%;
	padding: 2em;
	margin-right: 5em;
	filter: drop-shadow(0.5em 0.5em .10em rgba(177, 126, 132, 1))
}

.contentpage {
	max-height: 80%;
	max-width: 50%;
	min-width: 40em;;
  position: relative;
  overflow:auto;
  display: inline-block;
  top: 5em;;
  left: 10%;
  padding: 1em;
  margin: 1em;
  background: #eae5e3;
  border: 2em;
  border-style: solid;
  border-color: #367585; 
  vertical-align: top;
	/*box-shadow: 0.2em 0.2em .10em rgba(177, 126, 132, 1);*/
}

.contentpage h1 {
  text-align: center;
}