/*!
 * Copyright 2020 - Dead Blues Club
 */

@font-face {
  font-family: "basic_square";
  src: url("../fonts/basic_square_7-webfont.woff") format("woff"),
    url("../fonts/basic_square_7-webfont.woff2") format("woff2");
  font-weight: normal;
  font-style: normal;
}

html,
body {
  height: 100%;
  width: 100%;
  max-height: 100%;
  max-width: 100%;
  background: #000;
  margin: 0px;
  padding: 0px;
  overflow: hidden;
}

#backgroundImage {
  position: fixed;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-image: url("../img/background.png");
  background-size: cover;
  background-position: center;
  background-repeat: repeat;
  margin: 0px;
  padding: 0px;
  max-height: 100%;
  max-width: 100%;
  overflow: hidden;
  z-index: 1;
}

#footer {
  position: fixed;
  display: flex;
  flex-direction: row;
  bottom: 0px;
  width: 100%;
  height: 8vh;
  line-height: 8vh;
  color: black;
  z-index: 3;
  transition: all 300ms ease;
}

#footerNameContainer {
  flex: 1;
  height: 8vh;
  display: flex;
  align-items: center;
  padding-left: 4vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

#copyright {
  font-size: 12px;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
    "Segoe UIEmoji", "Segoe UI Symbol", "Noto Color Emoji";
  color: #6c757d;
  overflow: hidden;
  text-overflow: ellipsis;
}

#footerLogoContainer {
  flex: 1;
  height: 8vh;
  padding-right: 4vw;
  display: flex;
  flex-direction: row-reverse;
  align-items: center;
}

.footerLogo {
  position: relative;
  height: 6vh;
  object-fit: contain;
  aspect-ratio: 1;
}

#navbar {
  position: fixed;
  top: 0px;
  width: 100%;
  height: 12vh;
  align-items: center;
  line-height: 8vh;
  color: black;
  z-index: 3;
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  transition: all 300ms ease;
}

.navbarButton {
  height: 10vh;
  display: flex;
  justify-content: center;
  align-items: center;
}

.navbarImage {
  height: min(8vh, 8vw);
  object-fit: contain;
  aspect-ratio: 1;
}

#content {
  font-size: 26px;
  color: #000;
  padding-bottom: 8vh;
  display: flex;
  flex-direction: column;
  z-index: 2;
  position: relative;
  overflow: hidden;
}

#about {
  font-size: 26px;
  color: #000;
  padding-bottom: 8vh;
  display: flex;
  flex-direction: row;
  z-index: 2;
  position: relative;
  overflow: hidden;
  padding-top: 12vh;
}

#aboutEnglish {
  flex: 1;
  padding-left: 3vw;
  padding-right: 3vw;
  font-size: large;
  text-align: justify;
  text-justify: inter-word;
  background-color: white;
  color: #d45c4c;
}

#aboutJapanese {
  flex: 1;
  padding-left: 3vw;
  padding-right: 3vw;
  font-size: large;
  text-align: justify;
  text-justify: inter-word;
  background-color: #d45c4c;
  color: white;
}

#titleScreen {
  width: 100%;
  height: 100%;
  align-items: center;
  display: flex;
  flex-direction: column;
  top: 0px;
  position: fixed;
  justify-content: center;
}

#titleLogo {
  width: min(100vw, 50vh);
  height: min(100vw, 50vh);
}