/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
:root {
	--background: #8B9182;
	--text1: #261A17;
	--brown: #E0C596;
	background-image: url('/assets/dbd/background.png');
  background-size: cover;
  background-repeat: no-repeat;

}
img {
  width: 100%;
  height: auto;
	max-width: 100%;
	max-height: 100%;
  display: block;
  margin: auto;
  object-fit:contain;
}
html, body {
	align-content: center;
  overflow: hidden;
  /* background-color: #EDE1CB; */
  color: var(--text1);
  font-family: Verdana;
  width: 100%;
  height: 100%;
  position: fixed;
}
.main {
   left: 15%;
   right: 15%;
   top: 90px;
   bottom: 10%;
   padding: 3% 3% 3%;
   background-color: var(--background);
   border: medium solid black;
	position: fixed;
   font-size: large;
}
.gallery img{
    width:200px;
}
.image_desc p{
    display: none;
}
.gallery_image p:hover {
    p { display: relative; }
}
.bottomnote {
    position: relative;
    top: 65%;
    bottom: 5px;
    margin: auto;
}
.iframe_alternative { display: none; }
/* the tamagotchi on the side */
.title {
	width: auto;
	left: 25%;
	right: 25%;
	align-content: center;
	text-align: center;
	top: 5px;
	color: brown;
	position: fixed;
}
.tama {
   border: medium solid black;
   background-color: var(--background);
	text-align: center;
	font-size: large;
	color: purple;
	font-weight: bolder;
	float: right; 
	right: 40px;
	top: 90px;
	width: 200px;
	position: fixed;
}
.banner {
   border: medium solid black;
   background-color: var(--background);
   float: right;
   right: 40px;
   top: 40%;
   position: fixed;
   max-width: 10%;
}
.wiz_img {
    display: block;
    max-width: 1080px;
    max-height: 1080px;
    width: 100%;
    height: 70%;

}
.tama img {
	width: 128px;
	height: 128px;
}
.tama-img {
	width: 128px;
	height: 128px;
}
.post_display {
	display: flex;
	flex-wrap: wrap;
	flex-direction: column;
	height: 100%;
	width: 100%;
	color: var(--text1);
}
.post_box {
	color: var(--text1);
	width: 70;
	height: 10%;
	border-width: medium;
  	border-style: solid;
  	border-color: var(--text1);
	text-align: center;
	font-size: larger;
	background-color: var(--brown);
}
.post_box a { color: inherit; }
.button1:hover, .button2:hover, .post_box:hover {
	color: var(--brown);
	background-color: #BC7F61;
	}
.postembed{
	position: relative;
	width: 256px;
	height: 256px;
}
.sidebar {
	align-content: center;
	color: var(--background);;
	background-color: var(--background);
	text-decoration: none ;
	position: fixed;
  overflow-x: hidden;
	left: 20px; top: 40px;
}
.mobilebar {
	color: var(--text1);
	display: none;
	flex-wrap: wrap;
	flex-direction: column;
	background-color: var(--brown);
	text-decoration: none ;
	height: 5%;
	width: 100%;
	position: fixed;
	z-index: 1;
	bottom: 0px; left: 0px; right: 0px;
}
@media (pointer:none), (pointer:coarse) {
    .sidebar,.tama,iframe {
        display:none;
    }
    .mobilebar {
		  display: flex;    
    }
    .iframe_alternative {display: inherit;} 
}​
.feature-list {
	padding-left: 1%;
}
.sidebar-image {
	width: 170px;
	height: 170px;
   align-content: center;
	background-color: var(--brown);
  	border-width: medium;
  	border-bottom-width: medium;
   border-style: solid;
  	border-color: var(--text1);
}
.nsfw {
   left: 30%;
   right: 30%;
   top: 90px;
   padding: 3% 3% 3%;
   background-color: var(--background);
   border: medium solid black;
	position: fixed;
   font-size: large;
}
.button1 {
   top: 50%;
   bottom: auto;
   right: 60%;
	left: 10%;
   padding: 1% 1% 1%;
   background-color: var(--background);
   border: medium solid black;
	position: fixed;
   font-size: large;
   text-align: center;
}
.button1, .button2 {
   padding: 1% 1% 1%;
   background-color: var(--brown);
	position: fixed;
   border: medium solid black;
   font-size: large;
   text-align: center;
	color: var(--text1);
}
.button1 {
   top: 55%;
   bottom: auto;
   right: auto;
	left: 20%;
}
.button2 {
   top: 55%;
   bottom: auto;
   right: 20%;
	left: auto;
	color:black;
}

	

/* The navigation menu links */
.sidebar a {
	color: inherit;
	text-decoration: inherit;
	font-size: inherit;
}

.sidebar-item {
  width: auto;
  font-size: 16px;
  text-align: center;
  border-style: solid;
  border-color: var(--text1);
  border-width: 0 medium medium;
  /* padding: 12px 8px 12px 16px; */
  text-decoration: none;
}
.sidebar-item:hover {
	color: var(--brown);
	background-color: var(--background);;
	}
.mobilebar-item {
  height: 100%;
  width: auto;
  font-size: 16px;
  text-align: center;
  border-style: solid;
  border-color: var(--text1);s
  border-width: 0 medium medium;
  /* padding: 12px 8px 12px 16px; */
  text-decoration: none;
}
.mobilebar-item:hover {
	color: var(--brown);
	background-color: #BC7F61;
	}
/* old branch main
 * .main {
	left: 15%;
	right: 15%;
	top: 10%;
	bottom: 10%;
	padding: 3% 3% 3%;
	background-color: var(--background);
	border: medium solid black;  
	position: fixed;
	font-size: large;
} */
.button {
	width: 88px;
	height: 31px;

}