:root {
  --hana-background-color: #ffffff;
  --hana-highlight-color: #000000;
}

@font-face {
  font-family: "Nihon-Console";
  src: url("/Nihonium113-Console.ttf") format("truetype");
}

body {
  background-color: var(--hana-background-color);
  margin: 0;
  overflow: hidden;
}

.main {
  background-image: url("/images/backdoor-background.png");
  margin: auto;
  width: 100%;
  height: 1000px;
  background-origin: border-box;
  background-attachment: fixed;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  overflow: scroll;
  padding-top: 10%;
}

.main-text {
  text-align: center;
  color: white;
  width: 60%;
  max-height: 70%;
  margin: auto;
  position: relative;
  overflow: scroll;
  -ms-overflow-style: none; /* IE and Edge */
  scrollbar-width: none; /* Firefox */
  list-style-position: inside;
  font-family: Nihon-Console, monospace;
}

.hole-cover {
  position: fixed;
  top: 0;
  pointer-events: none;
  width: 100%;
  height: 1000px;
  background-origin: border-box;
  background-attachment: fixed;
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
  z-index: 10;
  background-image: url("/images/backdoor-background-hole.png");
}

/* Hide scrollbar for Chrome, Safari and Opera */
.main-text::-webkit-scrollbar {
  display: none;
}

.return {
  padding-bottom: 200px;
}

.return a {
  color: red;
}

.backdoor-start {
  padding-top: 100px;
}

@media (max-width: 1100px) {
  .main {
    background-image: url("/images/backdoor-background-vertical.png");
    height: 3000px;
    padding-top: 200px;
  }

  .main-text {
    max-height: 1700px;
    width:60%;
  }

  .hole-cover {
    height: 3000px;
    background-image: url("/images/backdoor-background-vertical-hole.png");
  }

  .return {
    padding-bottom: 500px;
  }

  .backdoor-start {
    padding-top: 200px;
  }

  p{
    font-size:x-large;
  }
}