body {
  background-image: url('../img/minior.png');
  background-repeat: repeat;
  color: black;
  font-family: Verdana;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
  min-height: 100vh;
}

blockquote {
  font-style: italic;
}

.bigger {
  width: 500px;
  transform: scale(1);
  transition: 1s;
  box-shadow: unset;
}

.bigger:hover {
  transform: scale(1.1);
  box-shadow: 5px 5px 5px 5px rgba(0, 0, 0, 0.3);
  transition: 1s;
}

.spoilerbutton {
  display: block;
  margin: 5px 0;
  background-color: #c9deff;
  border-style: none;
  outline: inherit;
  font-size: 20px;
  transition: all 1s ease;
  width: 948px;
}

.spoilerbutton:hover {
  background-color: #abbdd9;
  transition: all 0.5s ease;
}
.spoiler {
  overflow: hidden;
  background: #abbdd9;
  border-style: dashed;
  border-color: #c9deff;
  border-width: 2px;
  text-align: justify;
  margin-right: 5px;
  padding: 3px;
}

.spoiler>div {
  margin: 5px;
  overflow: hidden;
  transition: all 0.5s ease;
}

.spoilerbutton[value="Show"]+.spoiler>div {
  max-height: 0;
}

.spoilerbutton[value="Hide"]+.spoiler>div {
  max-height: 250px; /*use a big value here*/
  overflow: auto;
}

.chat {
  float: left;
  padding: 2px;
  border-radius: 10px;
}

.round{
  border-radius: 10px;
}


#content {
  background-color: #919fb5;
  width: 950px;
  top: 130px;
  left: 130px;
  padding: 5px;
  text-align: center;
  border-radius: 5px;
  position: absolute;  
  box-shadow:  5px 5px 0 rgba(0, 0, 0, 0.3), inset -3px -3px 3px -3px rgba(0, 0, 0, 0.3), inset 3px 3px 3px -3px rgba(0, 0, 0, 0.3);
  transition: 1s;
}

#content:hover{
  box-shadow:  10px 10px 0 rgba(0, 0, 0, 0.3), inset 5px 5px 5px rgba(0, 0, 0, 0.3), inset -5px -5px 5px rgba(0, 0, 0, 0.2);
  transition: 1s;
}

#footimg{
  width: 300px; 
  height: 150px; 
  object-fit: cover;
  border-radius: 5px;
  transition: 1s;
}

#footimg:hover{
  width: 600px; 
  height: 400px; 
  object-fit: fill;
  border-radius: 25px;
  transition: 1s;
}

#header{
  width: 1000px;
  height: 100px;
  position: absolute;
  background-color: white;
  left: 120px;
  top: 10px;
  border-top-right-radius: 10px;
  border-bottom-right-radius: 10px;
  box-shadow:  0 5px 0 rgba(0, 0, 0, 0.3), inset -3px -3px 3px -3px rgba(0, 0, 0, 0.3), inset 3px 3px 3px -3px rgba(0, 0, 0, 0.3);
}

.headerButton{
  height: 80px;
  width: 240px;
  transition: 1s;
  color: black;
  text-decoration: none;
  font-size: 30px;
  line-height: 50px;
  border-radius: 10px;
}

#home{
  position: absolute;
  background-image: url('../img/tatsugiri.jpg');
  background-size: cover;
  background-position-y: 70%;
  filter: saturate(30%) brightness(70%);
  left: 0;
  top: 10px;
  transition: 1s;
  color: black;
  text-align: center;
  z-index: 1;
}

#home:hover{
  filter: saturate(70%) brightness(90%);
  transition: 1s;
  overflow: hidden;
  top: 5px;
  width: 265px;
  height: 90px;
  z-index: 5;
  box-shadow:  5px 5px 0 rgba(0, 0, 0, 0.3);
}

#faves{
  position: absolute;
  background-image: url('../img/lanamallow/button.jpg');
  background-size: cover;
  background-position-y: 40%;
  filter: saturate(30%) brightness(70%);
  left: 250px;
  top: 10px;
  transition: 1s;
  z-index: 2;
}

#faves:hover{
  filter: saturate(70%) brightness(90%);
  transition: 1s;
  overflow: hidden;
  top: 5px;
  width: 265px;
  height: 90px;
  z-index: 5;
  box-shadow:  5px 5px 0 rgba(0, 0, 0, 0.3);
}

#oc{
  position: absolute;
  background-image: url('../img/oc/amimami.png');
  background-size: cover;
  background-position-y: 20%;
  filter: saturate(30%) brightness(70%);
  left: 500px;
  top: 10px;
  transition: 1s;
  z-index: 3;
}

#oc:hover{
  filter: saturate(70%) brightness(90%);
  transition: 1s;
  overflow: hidden;
  top: 5px;
  width: 265px;
  height: 90px;
  z-index: 5;
  box-shadow:  5px 5px 0 rgba(0, 0, 0, 0.3);
}

#other{
  background-image: url('/img/cel/celga.png');
  background-size: cover;
  background-position-y: 40%;
  filter: saturate(30%) brightness(70%);
  position: absolute;
  top: 10px;
  left: 750px;
}

#other:hover{
  filter: saturate(70%) brightness(90%);
  transition: 1s;
  overflow: hidden;
  top: 5px;
  width: 265px;
  height: 90px;
  z-index: 5;
  box-shadow:  5px 5px 0 rgba(0, 0, 0, 0.3);
}

#filler{
  background-color: white;
  position: absolute;
  left: 108px;
  top: 10px;
  width: 27px;
  height: 100px;
  color: white;
  font-size: 0;
  box-shadow: inset 0 -3px 3px -3px rgba(0, 0, 0, 0.3), inset 0 3px 3px -3px rgba(0, 0, 0, 0.3);  
}

#iconbox{
  top: 10px;
  left: 10px;
  height: 102px;
  width: 100px;
  background-color: white;
  border-top-left-radius: 10px;
  position: absolute;
  box-shadow: inset 3px 0 3px -3px rgba(0,0,0,0.3), inset 0 3px 3px -3px rgba(0, 0, 0, 0.3);
}

#sidebar{
  width: 100px;
  height: 400px;
  position: absolute;
  background-color: white;
  left: 10px;
  top: 100px;
  border-bottom-right-radius: 10px;
  border-bottom-left-radius: 10px;
  box-shadow:  10px 5px 0 rgba(0, 0, 0, 0.3), inset 3px 0 3px -3px rgba(0, 0, 0, 0.3), inset -3px -3px 3px -3px rgba(0, 0, 0, 0.3);
}

#rewardFace {
  border-radius: 10px;
  transform: scale(1.1);
}


.dropbtn {
  background-color: #3498DB;
  color: white;
  padding: 10px;
  font-size: 16px;
  border: none;
  cursor: pointer;
  transition: 1s;

}

.dropbtn:hover, .dropbtn:focus {
  background-color: #2980B9;
  transition: 1s;
}

.dropdown {
  position: relative;
  display: inline-block;
  transition: 1s;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f1f1f1;
  min-width: 90px;
  box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
  z-index: 1;
  transition: 1s;
}

.dropdown-content a {
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  transition: 1s;
}


.dropdown-content a:hover{
  background-color: #ddd;
  transition: 1s;
}

/* Show the dropdown menu (use JS to add this class to the .dropdown-content container when the user clicks on the dropdown button) */
.show {display:block;}


.gally{
  margin-left: 3px;
  margin-top: 3px;
  border: 1px solid #ccc;
  width: 310px;
  height: 310px;
  overflow: hidden;
  position: relative;
  float: left;
}

.faveGally{
  margin: 3px;
  border: 2px solid white;
  width: 227px;
  overflow: hidden;
  position: relative;
  float: left;
  height: 270px;
  border-radius: 10px;
  z-index: 1;
  transition: 1s;
}

.faveGally:hover{
  transform: scale(1.2);
  z-index: 2;
  transition: 1s;
  box-shadow:  5px 5px 0 rgba(0, 0, 0, 0.3);
}

.gallery{
  overflow:hidden;
  width: 310px;
}

.faveGallery{
  overflow:hidden;
  width: 227px;
}

.gallywide{
  margin-left: 3px;
  margin-top: 3px;
  border: 1px solid #ccc;
 
  overflow: hidden;
  position: relative;
  float: left;
  height: 310px;
}

.gallerywide{
  overflow:hidden;
  height: 310px;
  margin-left: -90px;
}

.gallerywideami{
  overflow:hidden;
  height: 310px;
  margin-left: -30px;
}

.faveIcon{
  border-radius: 255px;
  width: 150px;
  transition: 1s;
  z-index: 3;
  transform: scale(1);
}

.faveIcon:hover{
  transition: 1s;
  z-index: 1;
  transform: scale(1.05);
}

.maxIcon{
  border: double 5px white;
  background-color: #c9deff;
  transition: 1s;
}


.maxIcon:hover{
  background-color: #a2c5fa;
  transition: 1s;
}

.ryoImg{
  float: left;
  width: 300px;
}

table{
  border: 1px solid black;
  border-radius: 10px;
  background-color: white;
  width: 950px;
}


td{
  width: 200px;
  background-color: #c9deff;
  border-radius: 10px;
  transition: 0.5s;
}

td:hover{
  background-color: #a2c5fa;
  transition: 0.5s;
}