@font-face {
  font-display: block;
  font-family: Montserrat;
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/Montserrat.woff2) format("woff2"), url(/fonts/Montserrat.woff) format("woff")
}

@font-face {
  font-display: block;
  font-family: MontserratAlternates;
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/MontserratAlternates.woff2) format("woff2"), url(/fonts/MontserratAlternates.woff) format("woff")
}

@font-face {
  font-display: block;
  font-family: Nicholas;
  font-style: normal;
  font-weight: 400;
  src: url(/fonts/Nicholas.woff2) format("woff2"), url(/fonts/Nicholas.woff) format("woff")
}

:root {
  --accent-color: #121212;
  --box-shadow: oklch(0.5441 0.214 19.06) 0 0 3px 1px;
  --background-color: oklch(0.2511 0.006 258.36);
  --font-color-black: #242424;
  --font-color-grey: #fff9;
  --font-color-white: oklch(0.9187 0.003 264.54);
  --main-color: #fafafaf2;
  --blur: blur(3px)
}

* {
  box-sizing: border-box
}

body {
  color: var(--font-color-white);
  font-family: Montserrat, Arial, Helvetica, sans-serif;
  margin: 0
}

a {
  color: var(--accent-color);
  font-weight: 600;
  text-decoration: none
}

a:hover {
  text-decoration: underline;
  text-underline-position: under
}

:is(ul, ol) {
  margin-block-end: auto;
  margin-block-start: auto;
  padding-inline-start: 2rem
}

h1,
h2 {
  font-family: MontserratAlternates, Arial, Helvetica, sans-serif;
  margin-block-end: auto;
  margin-block-start: auto
}

/* CHANGED */
.grid-container {
  background-color: var(--background-color);
  display: grid;
  gap: 1rem;
  grid-auto-flow: row;
  grid-template-areas: "header header header" "main-container main-container main-container" "footer footer footer";
  grid-template-columns: 1fr 1fr 1fr;
  grid-template-rows: max-content
}

header {
  align-items: center;
  background-color: var(--accent-color);
  box-shadow: var(--box-shadow);
  display: flex;
  flex-wrap: wrap;
  font-size: 1.1rem;
  grid-area: header;
  justify-content: space-between;
  min-height: 70px;
  padding: 15px;
  position: fixed;
  top: 0;
  width: 100%;
  z-index: 2
}

.site-name {
  font-family: Nicholas, MontserratAlternates, Arial, Helvetica, sans-serif;
  font-size: 2.1rem
}

.site-name a {
  color: var(--font-color-white);
  font-weight: 400;
  text-decoration: none
}

.site-name a:hover {
  color: var(--font-color-white);
  text-shadow: 0 0 10px var(--font-color-white)
}

.site-sub-name {
  font-family: Montserrat, Arial, Helvetica, sans-serif;
  font-size: 1rem;
  font-weight: 300
}

.site-sub-name,
.subtext {
  color: var(--font-color-grey)
}

nav {
  letter-spacing: 1px
}

nav a {
  font-family: MontserratAlternates, Arial, Helvetica, sans-serif;
  margin: 0 10px
}

nav a,
nav a:hover {
  color: var(--font-color-white)
}

nav a:hover {
  text-decoration: underline;
  text-underline-position: under
}

/* CHANGED */
.main-container {
  gap: 1rem;
  grid-area: main-container;
  grid-template-areas: "sidebar main sidebar2" "sidebar main sidebar2" "sidebar main sidebar2";
  grid-template-columns: 1fr 4fr 1fr;
  grid-template-rows: 100%;
  line-height: 1.5;
  margin: 6rem auto auto;
  max-width: 1708px
}

#sidebar,
#sidebar2,
.main-container {
  display: grid;
  grid-auto-flow: row
}

#sidebar {
  font-size: 1rem;
  gap: 0 0;
  grid-template-areas: "sidebar-content" "aplayer";
  grid-template-columns: 1fr;
  grid-template-rows: auto auto;
  height: fit-content;
  min-width: 269px
}

#sidebar-content {
  grid-area: sidebar-content
}

#sidebar-content2 {
  align-items: center;
  display: inline-flex;
  flex-direction: column
}

#sidebar2 .lightbox-container {
  margin: auto 0;
  transition: transform .15s ease;
  width: fit-content
}

#sidebar2 .lightbox-container:nth-of-type(odd) {
  transform: rotate(3deg)
}

#sidebar2 .lightbox-container:nth-of-type(2n) {
  transform: rotate(-3deg)
}

#sidebar2 .lightbox-container:is(:nth-of-type(2n):hover, :nth-of-type(odd):hover) {
  transform: rotate(0deg)
}

#sidebar-content2 .lightbox-container:first-child {
  margin-top: 1rem
}

/* CHANGED */
#sidebar-content>div, .container, .stats-container {
  background-color: var(--background-color);
  box-shadow: var(--box-shadow);
  margin: 1.2rem 0;
  min-width: 0;
  position: relative;
  border-radius: 3px;
}

.container:last-child {
  margin-bottom: 0
}

.container.text {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  gap: 1rem;
  padding: 1rem
}

.container.text :is(ul, ol) li {
  margin: .5rem 0
}

.container.text.inline {
  display: inline-block
}

.container.text .cover-container {
  display: inline-block;
  height: fit-content;
  margin: 0
}

.container.inline .cover-container {
  float: inline-start;
  margin: 0 1rem 0 0
}

.last-updates {
  font-size: .8rem;
  position: relative
}

.last-updates .icon {
  margin-right: .2rem;
  vertical-align: -4px;
  width: .8rem
}

/* CHANGED */
.container.list {
  background-color: inherit;
  box-shadow: none;
  display: flex;
  flex-wrap: wrap;
  height: fit-content;
  justify-content: space-evenly;
  margin-bottom: 0;
  width: 100%;
  border: none;
}

.container p {
  margin-block-end: auto;
  margin-block-start: auto
}

.sidebar-section {
  margin: 0 !important
}

.profile {
  padding: 25px;
  text-align: center
}

.profile-image {
  height: auto;
  max-width: 100%
}

.profile-name {
  color: var(--accent-color);
  font-family: MontserratAlternates, Arial, Helvetica, sans-serif;
  font-size: 2rem;
  font-weight: 700;
  text-align: center
}

.links-container {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-evenly
}

img.icon {
  border-radius: 5px;
  vertical-align: middle;
  width: 36px
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  flex-wrap: wrap
}

.sidebar-nav :is(a, ul) {
  font-weight: 600;
  list-style-type: none;
  margin: auto 0;
  padding-inline-start: 10px;
  width: fit-content
}

.sidebar-nav a img.icon {
  margin-right: 2px;
  vertical-align: -2px;
  width: 1rem
}

.aplayer {
  font-family: Montserrat, Arial, Helvetica, sans-serif !important;
  grid-area: aplayer;
  margin: 0 !important;
  min-width: 269px
}

.main {
  align-content: start;
  display: grid;
  grid-area: main;
  grid-auto-flow: row
}

/* CHANGED */
.section-title {
    color: oklch(0.89 0.146 91.5);
    background-color: var(--background-color);
    font-family: MontserratAlternates,Arial,Helvetica,sans-serif;
    font-size: 2rem;
    padding: 3px;
    position: absolute;
    display: inline-block;
    top: -1.5rem;
    z-index: 1;
    margin-left: 1rem;
}

.section-title.s {
  font-size: 1.2rem
}

.section-title.m {
  font-size: 1.3rem
}

.section-title.l {
  font-size: 2rem
}

.section-title img.icon {
  filter: invert(1);
  margin-right: 5px;
  vertical-align: -10px
}

.site-updates {
  max-height: 125px;
  overflow: auto
}

.site-updates p {
  margin: .2rem 1rem
}

.site-updates .post-date {
  font-weight: 600;
  text-decoration: none
}

.microblog-container {
  background-color: var(--main-color);
  box-shadow: var(--box-shadow)
}

#microblog {
  margin: 1rem
}

.post {
  background-color: var(--main-color);
  box-shadow: var(--box-shadow);
  display: none;
  margin: 1rem 0;
  padding: 1rem
}

.post iframe {
  max-width: 100%
}

.favorite-text a:before,
.post a:before,
.site-updates a:before,
.stats a:before {
  content: url(/img/icons/link.svg);
  display: inline-block;
  margin-right: 3px;
  vertical-align: middle
}

.post-header {
  display: flex;
  font-size: .9rem;
  justify-content: space-between
}

.post-date {
  text-decoration: underline;
  text-underline-position: under
}

.post-date img.icon {
  margin-right: 5px;
  vertical-align: -12px;
  width: 2rem
}

.post-content {
  margin: 1rem;
  padding-inline-start: 0
}

.post-content li {
  margin: .3rem
}

.post-content li ul {
  padding-inline-start: 1rem
}

.spoiler {
  background-color: #000
}

.spoiler:hover {
  background-color: unset
}

.post-tags img.icon {
  margin-right: 5px;
  vertical-align: -15px
}

.filtered {
  display: none
}

.show {
  display: block
}

#filterContainer {
  display: flex;
  justify-content: center;
  margin: 1rem
}

.filter {
  background-color: #f1f1f1;
  border: none;
  cursor: pointer;
  font-family: Montserrat, Arial, Helvetica, sans-serif;
  margin: 0 .3rem;
  outline: none;
  padding: 12px 16px;
  transition: .5s ease
}

.filter:hover {
  background-color: #ddd;
  scale: 1.05
}

.filter.active {
  background-color: #666;
  color: #fff;
  scale: 1.1
}

.about-page-container .post,
.links-page-container .post {
  margin: 0
}

.go-to-link {
    display: inline-block;
    font-family: Montserrat, Arial, Helvetica, sans-serif;
    font-size: .9rem;
    font-style: italic;
    position: absolute;
    right: 1rem;
    bottom: -0.7rem;
    background-color: var(--background-color);
}

.go-to-link a {
  font-weight: 400
}

.cover-container {
  box-shadow: var(--box-shadow);
  height: auto;
  margin: 1rem;
  max-width: fit-content;
  position: relative;
  transition: .5s ease;
  width: 100%
}

.cover-container:hover {
  scale: 1.03
}

.cover-container a {
  color: var(--font-color-white);
  display: inline-block;
  font-size: .9rem;
  padding: 0 .5rem .5rem;
  text-align: center;
  width: 100%
}

.cover-container a.ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap
}

.cover {
  background-color: #000;
  color: #f8f8ff;
  height: auto;
  position: relative;
  transition: .5s ease;
  width: 100%
}

.cover.blur {
  filter: var(--blur)
}

.cover.blur:active,
.cover.blur:hover {
  filter: none
}

.cover img {
  height: 270px;
  object-fit: cover;
  width: 180px
}

.cover:hover .overlay {
  opacity: 1
}

.image {
  display: block;
  height: auto;
  width: 100%
}

.overlay {
  align-items: center;
  background-color: #00000099;
  bottom: 0;
  display: inline-flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100%;
  justify-content: space-between;
  left: 0;
  opacity: 0;
  position: absolute;
  right: 0;
  top: 0;
  transition: .5s ease;
  width: 100%
}

.overlay img.icon {
  filter: invert(1);
  height: auto;
  padding: 2px;
  width: 2rem
}

.overlay-text {
  color: var(--font-color-white);
  flex-direction: column;
  font-size: .8rem;
  margin-top: .3rem;
  position: relative;
  text-align: center
}

.overlay-text,
.overlay-text span {
  align-items: center;
  display: inline-flex;
  height: auto;
  width: 100%
}

.overlay-text span {
  gap: .3rem;
  justify-content: flex-start;
  padding: 0 0 .3rem .3rem;
  text-align: left
}

.cover.wrapper {
  align-content: center;
  background-color: unset;
  border-radius: 5px;
  color: #fff;
  cursor: default;
  display: inline-flex;
  flex-direction: column;
  flex-wrap: wrap;
  font-size: 1rem;
  justify-content: center;
  min-height: 2rem;
  min-width: 2rem;
  padding: 2px;
  position: absolute;
  width: fit-content;
  z-index: 1
}

.favorite-container {
  box-shadow: var(--box-shadow);
  display: flex;
  margin: 1rem;
  width: 45%
}

.favorite-container .cover-container {
  margin: 1rem
}

.favorite-text {
  margin-block-start: 1rem
}

.favorite-text a {
  font-size: 1.2rem
}

.favorite-text a:before {
  vertical-align: baseline
}

.favorite-text p {
  margin-block-start: 1rem
}

.favorite-container img {
  height: auto;
  max-width: 135px
}

.info {
  padding: 1rem
}

.animangavel-container,
.films-container,
.gallery-container,
.games-container,
.shows-container {
  min-width: 0
}

.stats-container {
  display: flex;
  flex-direction: column
}

.stats.container {
  padding: 1rem
}

.tab {
  display: flex;
  justify-content: space-evenly;
  overflow: hidden
}

.tab button {
  background-color: #242424;
  border: none;
  color: var(--font-color-white);
  cursor: pointer;
  float: left;
  font-family: Montserrat, Arial, Helvetica, sans-serif;
  font-size: 1rem;
  outline: none;
  padding: 0;
  transition: .3s;
  width: 100%
}

.tab button:hover {
  font-size: 1.1rem;
  font-weight: 500
}

.tab button.active {
  background-color: var(--accent-color);
  font-size: 1.3rem;
  font-weight: 600
}

.tab button img.icon {
  vertical-align: -13px
}

.tabcontent {
  animation: fadeEffect 1s;
  display: none
}

button.toc {
  background-color: unset;
  border: none;
  cursor: pointer;
  display: inline;
  font-family: inherit;
  font-size: inherit;
  font-weight: 600;
  width: fit-content
}

button.toc:before {
  content: url(img/icons/table-of-contents.svg);
  margin-right: 5px;
  vertical-align: middle
}

button.toc:hover {
  text-decoration: underline;
  text-underline-position: under
}

.stats ul {
  display: flex;
  gap: 1rem;
  list-style-type: none;
  padding: 0;
  padding-block-end: 1rem
}

.stats li {
  flex-basis: 15%
}

.total {
  font-weight: 600
}

footer {
  background-color: #080808;
  grid-area: footer
}

.footer-content {
  align-items: center;
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 1rem
}

.footer-content .site-name {
  text-align: center
}

.swiper {
  height: 100%;
  width: 100%
}

.swiper-button-next,
.swiper-button-prev {
  align-items: center;
  background-color: #00000099;
  color: var(--font-color-white);
  display: flex;
  height: 2rem;
  justify-content: center;
  opacity: .8;
  padding: 8px;
  width: 2rem
}

.swiper-gallery img,
.swiper-thumbs img {
  cursor: pointer
}

.swiper-gallery-container.games {
  margin: 1rem auto;
  width: 1024px
}

.swiper-gallery.games {
  height: 576px
}

.swiper-thumbs {
  box-sizing: border-box;
  height: 20%;
  padding: 10px 0
}

.swiper-thumbs img {
  max-height: 86px;
  object-fit: cover
}

.swiper-thumbs .swiper-slide {
  height: 100%;
  opacity: .4;
  width: 25%
}

.swiper-thumbs .swiper-slide-thumb-active {
  opacity: 1
}

.lightbox-container,
.media-container {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  height: auto;
  width: auto
}

.media-container :is(.youtube-wrapper, .lightbox):last-child:nth-child(3) {
  grid-column-end: 4
}

.media-container :is(.youtube-wrapper, .lightbox):last-child:nth-child(6) {
  grid-column-end: 4
}

.media-container :is(.youtube-wrapper, .lightbox):nth-last-child(2):nth-child(3) {
  grid-column-end: 2
}

.media-container.highlight :is(.youtube-wrapper, .lightbox):first-child {
  grid-column-end: span 3
}

.media-container.highlight :is(.youtube-wrapper, .lightbox):nth-last-child(2):nth-child(3) {
  grid-column-end: auto
}

.media-container.highlight :is(.youtube-wrapper, .lightbox):last-child:nth-child(5) {
  grid-column-end: 3
}

.lightbox,
.lightbox a {
  height: auto;
  overflow-wrap: anywhere;
  place-self: center;
  text-align: center;
  transition: transform .15s ease;
  width: auto
}

.lightbox img {
  height: auto;
  max-width: 500px;
  width: 100%
}

.lightbox.blur img {
  filter: var(--blur)
}

.lightbox.hero img {
  max-width: fit-content
}

.lightbox a:hover,
a.lightbox:hover {
  text-decoration: none;
  transform: scale(1.02)
}

.lightbox a:before,
a.lightbox:before {
  content: none
}

.lightbox3-backdrop {
  background: rgba(0, 0, 0, .75)
}

.youtube-wrapper {
  height: auto;
  margin: 1em auto;
  max-width: 640px;
  min-width: 200px;
  width: 100%
}

.youtube-title {
  font-weight: 600
}

.youtube-info {
  font-size: .8rem;
  text-align: center
}

lite-youtube {
  --lite-youtube-frame-shadow-visible: no
}

lite-youtube::part(playButton) {
  height: 15%;
  left: 7%;
  opacity: .8;
  top: 90%;
  width: 12%
}

.text-overlay,
.text-overlay.inside,
.youtube-title {
  font-size: 1rem;
  position: relative;
  text-align: center;
  text-overflow: ellipsis
}

.text-overlay.inside {
  background-color: #12121280;
  color: var(--font-color-white);
  overflow: hidden;
  top: -23px;
  white-space: nowrap
}

.text-overlay.outside,
.youtube-title {
  font-size: .9rem;
  margin-top: .3rem
}

@keyframes fadeEffect {
  0% {
    opacity: 0
  }

  to {
    opacity: 1
  }
}

@media only screen and (max-width:1280px) {
  .main-container {
    margin: 70px 1rem 0
  }

  .cover-container {
    margin: 1rem 0
  }

  .cover-container.swiper-slide {
    margin: 1rem
  }

  .cover {
    margin: auto
  }

  .cover img {
    height: 202px;
    width: 135px
  }

  .cover:active a,
  .cover:hover a {
    display: inline-block;
    font-size: .9rem;
    pointer-events: all
  }

  #sidebar-content2 .lightbox-container {
    grid-template-columns: auto;
    margin: 65px 0
  }

  .media-container {
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr))
  }
}

@media only screen and (max-width:600px) {
  :is(ul, ol) {
    padding-inline-start: 1rem
  }

  .post-content li ul {
    padding-inline-start: .5rem
  }

  header {
    gap: 1rem;
    justify-content: center;
    padding: 8px
  }

  header nav {
    display: flex;
    line-height: 1.5;
    overflow: auto;
    padding-bottom: 10px;
    white-space: nowrap
  }

  .grid-container {
    grid-template-areas: "header" "main-container" "footer";
    grid-template-columns: 1fr;
    grid-template-rows: max-content max-content max-content
  }

  .main-container {
    grid-template-areas: "sidebar" "main";
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    margin: 101px 10px 0
  }

  #sidebar {
    height: fit-content
  }

  #sidebar-content2 {
    flex-direction: row;
    flex-wrap: wrap
  }

  #sidebar-content2 .lightbox-container {
    grid-template-columns: auto;
    margin: auto;
    max-width: 48%
  }

  #sidebar-content2 .lightbox-container:first-child {
    margin: auto
  }

  #sidebar2 .lightbox-container:is(:nth-of-type(2n), :nth-of-type(odd)) {
    transform: none
  }

  .media-container :is(.youtube-wrapper, .lightbox) {
    grid-column: auto
  }

  #filterContainer,
  .tab {
    flex-wrap: wrap
  }

  .filter {
    margin: .5rem
  }

  .stats ul {
    flex-wrap: wrap
  }

  .cover img {
    height: 270px;
    width: 180px
  }

  .cover a {
    display: none;
    pointer-events: none
  }

  lite-youtube::part(playButton) {
    left: 8%;
    top: 90%
  }

  .favorite-container {
    flex-wrap: wrap;
    justify-content: center;
    text-align: center;
    width: 100%
  }

  .footer-content {
    align-items: center;
    flex-direction: column;
    justify-content: center;
    line-height: 1.5
  }

  .lightbox a {
    width: auto
  }

  .lightbox img {
    height: auto;
    max-width: 400px;
    width: 100%
  }

  .media-container :is(.youtube-wrapper, .lightbox):is(:last-child:nth-child(3), :last-child:nth-child(6), :nth-last-child(2):nth-child(3)),
  .media-container.highlight :is(.youtube-wrapper, .lightbox):is(:first-child, :last-child:nth-child(5)) {
    grid-column-end: auto
  }
}