body {
  background-image: url("images/sunflowerbgdark.png");
  color: white;
}

/* fonts start */

@font-face {
  font-family: BIZ-UDMincho-Regular;
  src: url(fonts/BIZUDMincho-Regular.ttf);
  font-weight: 400;
  font-stretch: 100%;
  font-style: normal;
}
	  
@font-face {
  font-family: BIZ-UDMincho-Bold;
  src: url(fonts/BIZUDMincho-Bold.ttf);
  font-weight: 700;
  font-stretch: 100%;
  font-style: normal;
}
	  
@font-face {
  font-family: BIZ-UDPMincho-Bold;
  src: url(fonts/BIZUDPMincho-Bold.ttf);
  font-weight: 700;
  font-stretch: 100%;
  font-style: normal;
}
	  
@font-face {
  font-family: BIZ-UDPMincho-Regular;
  src: url(fonts/BIZUDPMincho-Regular.ttf);
  font-weight: 400;
  font-stretch: 100%;
  font-style: normal;
}

/* fonts end */

/* font classes start */

.udminchoregular{
  font-family: BIZ-UDMincho-Regular;
}

.udminchobold{
  font-family: BIZ-UDMincho-Bold;
}

.udpminchoregular{
  font-family: BIZ-UDPMincho-Regular;
}

.udpminchobold{
  font-family: BIZ-UDPMincho-Bold;
}

/* font classes end */

/* styling showcase and subshowcase */

.showcase {
  border: outset #1c5384;
  background-color: rgba(0, 0, 0, 0.2);
  margin-bottom: 10px;
  padding: 25px; margin: 25px;
}

.subshowcase {
  border: outset #1c5384;
  margin-bottom: 10px;
  padding: 25px; margin: 25px;
}

/* flex container stuff */

.flex-container1 {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
}

.flex-container2 {
    display: flex;
    gap: 10px;
}

.flex-containergallery {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.flex-containergallery div {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
}

.flex-containergallery img {
    max-width: 50%;
    float: right;
    border: outset #1c5384;
}

.flex-containergallery2 {
    display: block;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
}

.flex-containergallery2 img {
    width: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    border: outset #1c5384;
}

.flex-containergallery2 div {
    width: 50%;
    display: block;
    margin-left: auto;
    margin-right: auto;
    margin-bottom: 5px;
    border: outset #1c5384;
}

div.desc {
    text-align: center;
    border: none;
}

/* link stuff */

a:link, a:visited {
  text-decoration: underline;
  color: white;
}

a:hover, a:active {
  text-decoration: underline;
  color: #ff5030;
}

/* tab stuff, for stories, blog, etc. */

.tab {
  float: left;
  background-color: rgba(0, 0, 0, 0.5);
  width: 15%;
}

/* Style the buttons inside the tab */
.tab button {
  display: block;
  background-color: black;
  color: white;
  padding: 10px 10px;
  width: 90%;
  text-align: left;
  cursor: pointer;
  transition: 0.3s;
  font-size: 12pt;
  border: outset;
  border-color: #1c5384;
}

/* Create an active/current "tab button" class */
.tab button.active {
  background-image: url("images/sunflowerbgsmaller.png");
}

/* Style the tab content */
.tabcontent {
  float: left;
  padding: 0px 7px;
  width: 70%;
}

/* same but in story chapters */

.inchapter {
  justify-content: center;
  align-content: center;
  float: center;
  display: flex;
  padding: 0px 7px;
}

.inchapter button {
  display: block;
  color: white;
  cursor: pointer;
  padding: 10px 10px;
  transition: 0.3s;
  font-size: 12pt;
}

.inchapter button:hover {
  cursor: pointer;
  background-image: url("images/sunflowerbgsmaller.png");
}