*, html {
  margin: 0;
  padding: 0;
  overflow-x: hidden;
}

*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
  position: relative;
}

html, body {
  overflow: hidden;
}

::-webkit-scrollbar {
  width: 0px;
  border-radius: 50%;
}

::-webkit-scrollbar-track {
  background: white;
}

::-webkit-scrollbar-thumb {
  background: #333;
}

::-webkit-scrollbar-thumb:hover {
  background: #777;
}

.fit-w {
  width: 100%;
}

.max-w {
  width: 100%;
}

.oculto {
  display: none;
}

@keyframes mostrar-barras {
  100% {
    margin-left: 0;
  }
}
div.nav-filler {
  height: 50px;
  z-index: -10;
}

nav {
  position: fixed;
  top: 0;
  height: 50px;
  overflow: visible;
  background-color: #ffffff78;
  z-index: 50;
}
nav .nav-container {
  overflow: inherit;
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}
nav .nav-container div.barras-container {
  height: 50px;
  padding: 0 7px;
  position: absolute;
  right: 0;
  display: flex;
  align-items: center;
  cursor: pointer;
}
nav .nav-container div.barras-container img.barras {
  height: 20px;
}
nav ul.navigation {
  position: absolute;
  /*right: -101vw;*/
  width: 100vw;
  height: 100vh;
  top: 0;
  z-index: -1;
  list-style: none;
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  align-items: center;
  visibility: hidden;
  /*

  &.show{
    margin-left: 0;
  }

  */
}
nav ul.navigation.show {
  visibility: initial;
}
nav ul.navigation.show > li, nav ul.navigation li {
  /*
        animation: mostrar-barras 0.8s;
        animation-fill-mode: forwards;

  */
  margin-left: 0;
}
nav ul.navigation.show > li:nth-of-type(2), nav ul.navigation li:nth-of-type(2) {
  animation-delay: 0.2s;
  transition-delay: 0.2s;
}
nav ul.navigation.show > li:nth-of-type(3), nav ul.navigation li:nth-of-type(3) {
  animation-delay: 0.4s;
  transition-delay: 0.4s;
}
nav ul.navigation.show > li:nth-of-type(4), nav ul.navigation li:nth-of-type(4) {
  animation-delay: 0.6s;
  transition-delay: 0.6s;
}
nav ul.navigation li {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 25%;
  width: 100%;
  margin-left: 200%;
  transition: 0.8s ease-out;
}
nav ul.navigation li a {
  text-decoration: none;
  font-size: 1.9rem;
  color: purple;
  font-weight: 900;
}
nav ul.navigation li:nth-of-type(1) {
  background-image: url(../img/a-deserter-in-the-house.png);
}
nav ul.navigation li:nth-of-type(2) {
  background-image: url(../img/Amigara-001.png);
}
nav ul.navigation li:nth-of-type(3) {
  background-image: url(../img/blood-booble-bushes.png);
}
nav ul.navigation li:nth-of-type(4) {
  background-image: url(../img/diario-gatuno.png);
}

.patras {
  z-index: -1;
}

@keyframes fondo {
  0% {
    background-image: url(../img/a-deserter-in-the-house.png);
    background-size: auto 100%;
  }
  32% {
    background-size: auto 110%;
  }
  33% {
    background-image: url(../img/Amigara-001.png);
  }
  66% {
    background-image: url(../img/hellstar-remima.png);
  }
}
header {
  height: 100vh;
  z-index: 1;
}
header section#home {
  height: 100vh;
}
header div.header-container {
  filter: brightness(0.5);
  padding: 1rem;
  display: flex;
  flex-direction: column;
  height: 100%;
  align-items: center;
  justify-content: flex-end;
  background-size: auto 100%;
  background-position: center;
  background-image: url(../img/a-deserter-in-the-house.png);
  animation: fondo 5s infinite;
}
header div.header-container p.breve {
  display-self: flex-end;
  color: #9b2a68;
  font-size: 1.4rem;
  font-weight: 900;
  display: none;
}
header div.header-container a {
  height: 20px;
  width: 20px;
}
header p.brev2 {
  position: absolute;
  bottom: 1rem;
  padding: 0 1rem;
  font-size: 1.7rem;
  font-weight: 900;
  color: #9b2a68;
  background-color: #000000ba;
  text-align: center;
  transform: translateX(-50%);
  left: 50%;
  width: 100%;
}
header p.brev2 a {
  height: 20px;
  width: 20px;
}
header p.brev2 a img {
  height: 20px;
}

main section {
  height: 100vh;
  padding: 1rem;
  padding-top: calc(50px + 1rem);
  overscroll-behavior: contain;
  overflow: hidden;
}
main section div.section-title {
  margin-bottom: 1rem;
  display: flex;
  justify-content: space-between;
}
main section div.section-title img.arrow {
  height: 20px;
}
main section#about div.section-content {
  font-size: 1.2rem;
  overflow-x: hidden;
}
main section#about div.section-content img.content-image {
  width: 80%;
  display: block;
  margin: 0 auto;
  margin: 1rem auto;
}
main section div.section-content {
  width: 100%;
  height: calc(100vh - 92px - 2rem);
  overflow: scroll;
  overscroll-behavior: contain;
  overflow-x: hidden;
}
main section#test {
  background: rebeccapurple;
}
main section#test2 {
  background: green;
}
main section#manga {
  padding-left: 0;
  padding-right: 0;
  padding-bottom: 0;
}
main section#manga div.manga-container {
  overflow-x: hidden;
  width: 100%;
  background-color: red;
  display: grid;
  height: calc(100vh - 77px - 2rem);
  overflow: scroll;
  grid-template-columns: 1fr 1fr;
  overscroll-behavior: contain;
  overflow-x: hidden;
}
main section#manga div.manga-container div.manga {
  height: calc(60vh - 45px);
  background-size: auto 100%;
  background-position: center;
  background-size: cover;
}
main section#manga div.manga-container div.manga:nth-of-type(1) {
  background-image: url(../img/a-deserter-in-the-house.png);
}
main section#manga div.manga-container div.manga:nth-of-type(2) {
  background-image: url(../img/Amigara-001.png);
}
main section#manga div.manga-container div.manga:nth-of-type(3) {
  background-image: url(../img/blood-booble-bushes.png);
}
main section#manga div.manga-container div.manga:nth-of-type(4) {
  background-image: url(../img/diario-gatuno.png);
}
main section#manga div.manga-container div.manga:nth-of-type(5) {
  background-image: url(../img/falling.png);
}
main section#manga div.manga-container div.manga:nth-of-type(6) {
  background-image: url(../img/flesh-colored-horror.png);
}
main section#manga div.manga-container div.manga:nth-of-type(7) {
  background-image: url(../img/hellstar-remima.png);
}
main section#manga div.manga-container div.manga:nth-of-type(2) {
  background-color: blue;
}
main section#adaptation div.section-content ol {
  margin-top: 1rem;
}
main section#adaptation div.section-content ol li {
  margin-left: 2rem;
  list-style: inside;
  list-style-type: cjk-ideographic;
}

@media only screen and (min-width: 480px) {
  main section#manga div.manga-container div.manga {
    min-height: 400px;
  }
}
@media only screen and (min-width: 600px) and (orientation: landscape) {
  .max-w {
    max-width: 55rem;
    margin-left: auto;
    margin-right: auto;
  }

  nav ul.navigation {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
  nav ul.navigation li {
    height: 100%;
  }

  header p.brev2 {
    width: 80%;
  }

  main section#manga div.manga-container {
    grid-template-columns: 1fr 1fr 1fr 1fr;
  }
  main section#manga div.manga-container div.manga {
    height: 36vw;
    min-height: 250px;
  }
  main section#about div.section-content {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
  }
  main section#about div.section-content p {
    grid-column: 1/3;
    height: fit-content;
  }
  main section#about div.section-content img.content-image {
    grid-column: 3;
  }
  main section#about div.section-content img.content-image:nth-of-type(2) {
    grid-row: 4;
  }
}
@media only screen and (min-width: 850px) {
  div.section-content::-webkit-scrollbar, div.manga-container::-webkit-scrollbar {
    width: 8px;
  }

  div.section-content::-webkit-scrollbar-track, div.manga-container::-webkit-scrollbar-track {
    background: #ccc;
  }

  div.section-content::-webkit-scrollbar-thumb, div.manga-container::-webkit-scrollbar-thumb {
    background: #111;
  }

  div.section-content::-webkit-scrollbar-thumb:hover, div.manga-container::-webkit-scrollbar-thumb:hover {
    background: #222;
  }
}

/*# sourceMappingURL=style.css.map */