html,
body {
  /* padding: 0; */
  width: 100%;
  position: relative;
  background-color: black !important;
}

body {
  width: 100vw;
  overflow-x: hidden;
  overflow: hidden;
  overflow-y: scroll !important;
  scroll-snap-type: none !important;
  scroll-behavior: smooth;
}

section {
  padding: 5% 0;
  height: auto;
  width: 100%;
  scroll-snap-align: none !important;
}

.content0 {
  padding: 0;
}

.section2 {
  height: 100%;
}

@font-face {
  font-display: swap;
  font-family: "DirtyLine";
  src: url("../fonts/Dirtyline 36daysoftype 2022.woff") format("woff"),
    url("../fonts/Dirtyline 36daysoftype 2022.woff2") format("woff2"),
    url("../fonts/Dirtyline 36daysoftype 2022.ttf") format("truetype");
  font-style: normal;
  font-weight: normal;
  text-rendering: optimizeLegibility;
}

.heading_title {
  display: flex;
  z-index: 1;
  position: relative;
  width: 100%;
  margin: 2% 0%;
  overflow: hidden;
}

.title {
  display: flex;
  justify-content: center;
  overflow: hidden;
}

.title-heading {
  height: fit-content;
  width: fit-content;
  margin-top: 4% !important;
  color: white;
  font-size: clamp(3em, 10vw, 10em);
  font-weight: bolder;
  margin: 0 5%;
  font-family: DirtyLine;
  letter-spacing: 10px;
  position: relative;
  z-index: 1;
  text-align: center;
  overflow: hidden;
  transform: translateY(100%);
  -webkit-transform: translateY(100%);
  transition: transform 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition: transform 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.title-heading.show {
  transform: translateY(0%);
  -webkit-transform: translateY(0%);
  transition: transform 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition: transform 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.title_icon,
.heading_title_text {
  transform: translateY(105%);
  transition: transform 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition: transform 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.title_icon.show,
.heading_title_text.show {
  transform: translateY(0%);
  transition: transform 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition: transform 1s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.subheading {
  font-size: 1.4em;
  font-weight: normal;
  margin-left: 5%;
  color: white;
  font-family: Helvs;
  position: relative;
  z-index: 1;
}

.heading_title_text {
  width: 100%;
  font-family: Helvs;
  font-weight: bold;
  font-size: 6em;
  color: white;
}

#headerstitle {
  margin-top: 15%;
}

#ontop-gradient {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -1;
  background-color: rgba(0, 0, 0, 0.4);
  outline-color: white;
  outline-style: solid;
  outline-width: 1px;
  transition: box-shadow 0.5s ease;
  -webkit-transition: box-shadow 0.5s ease;
}

#gradient-canvas {
  text-align: center;
  justify-content: center;
  align-items: center;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: -2;
  --gradient-color-1: #ffffff;
  --gradient-color-2: #34b4fe;
  --gradient-color-3: #000000;
  --gradient-color-4: #00bbff;
  background-color: black;
}

.folders {
  margin: 0 0;
  width: 100%;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  z-index: 1;
}

.folder {
  z-index: 1;

  transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1),
    opacity 1s ease, filter 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition: transform 0.3s cubic-bezier(0.075, 0.82, 0.165, 1),
    opacity 1s ease, filter 0.3s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.folder_image {
  width: 300px;
  height: 100%;
  object-fit: cover;
  z-index: 1;
}

.marginLeft {
  margin-left: auto;
}

.title_icon {
  align-self: center;
  justify-self: center;
  font-size: 5.5em;
  color: white;
  margin: 0 2.5%;
}

.images {
  margin-top: 3em;
}

hr {
  color: white;
}

.merch_image {
  height: 200px;
  width: 200px;
}

.header_image {
  width: auto;
  height: 200px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

img {
  pointer-events: none;
}

* {
  user-select: none;
}

/*! Headers */
.slider {
  width: 100%;
  align-self: center;
}

.slider-wrapper {
  width: 100%;
  white-space: nowrap;
}

.slider_container_overflow {
  width: 90%;
  overflow: hidden;
}

.slider-item {
  display: inline-block;
  width: 1400px;
  overflow: hidden;
}

.slider-item figure {
  position: relative;
  padding-bottom: 40%;
  overflow: hidden;
}

.slider-item figure img {
  height: 400px;
  aspect-ratio: 3/1;
  position: absolute;
  object-fit: cover;
}

.slider-progress {
  width: 20vw;
  height: 2px;
  background: rgba(255, 255, 255, 0.1);
  position: absolute;
  left: 50%;
  transform: translate(-50%, -50%);
}

.slider-progress-bar {
  position: absolute;
  width: 100%;
  height: 100%;
  background: rgba(255, 255, 255, 0.8);
  transform: scaleX(0);
  transform-origin: 0% 0%;
}

/* ! Headers End */

/* ! Merchandise Designs */
.merch_slider {
  width: 100%;
}

.merch_slider_wrapper {
  margin-bottom: 5%;
  width: 100%;
  white-space: nowrap;
}

.merch-slider-item {
  display: inline-block;
  width: 400px;
  height: 400px;
}

.merch-slider-item figure {
  padding-bottom: 50%;
  overflow: hidden;
}

.merch-slider-item figure img {
  width: 400px;
  height: 400px;
  position: absolute;
  object-fit: cover;
}
/* ! Merchandise End */

/* !Responsiveness */

@media screen and (max-width: 600px) {
  .scrolltotop {
    right: 25px !important;
    height: 50px !important;
    width: 50px !important;
  }
  .scrolltop_icon {
    font-size: 20px;
  }
  #bar {
    width: 1vw;
    height: 1vh;
    background-color: #ff5000;
  }

  section {
    height: fit-content;
    margin-bottom: 20%;
  }

  .heading_title_text {
    font-size: 2.5em;
    margin: 1%;
  }
  .title_icon {
    font-size: 2.5em;
    margin: 0 7%;
  }

  .slider-item figure img {
    height: 100px;
    position: absolute;
    width: 100%;
    object-fit: contain;
  }
  .slider-item figure {
    position: inherit;
  }

  .slider-item {
    width: 80vw;
  }

  .header_image {
    height: 300px;
  }

  .folder_image {
    width: 300px;
  }
  .folders {
    flex-direction: column;
  }

  .merch_item {
    width: 300px !important;
    height: 300px !important;
  }

  .slider {
    overflow: hidden;
    width: 100% !important;
    align-self: center;
  }
}

/* ! Merch Designs */

.merchdesigns {
  height: 100%;
}

.merch_items {
  width: 100%;
  height: 100%;
  justify-content: center;
  align-items: center;
  display: flex;
  gap: 2rem;
  flex-wrap: wrap;
}

@media (max-width: 900px) {
  .merch_items {
    flex-direction: column;
  }
}

.merch_item {
  position: relative;
  width: 400px;
  height: 400px;
  overflow: hidden;
  border: 1px solid rgba(255, 255, 255, 0.1);
  transition: opacity 0.5s ease;
  -webkit-transition: opacity 0.5s ease;
}

.item-img {
  width: 100%;
  height: 100%;
}

.apparel_image {
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(0) brightness(1);
  transition: all 1.5s cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition: all 1.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.item-copy {
  position: absolute;
  top: 0;
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
}

.item-copy > div {
  flex: 1;
  display: flex;
  align-items: center;
}

.item-copy-2 {
  justify-content: flex-end;
}

.shape {
  width: 175px;
  height: 175px;
  background: rgba(255, 255, 255, 0.3);
  backdrop-filter: blur(5px);
  color: #fff;
  font-size: 12px;
  padding-top: 15px;
  padding-bottom: 10px;
  opacity: 0;
  transform: scale(0.75);
  transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  -webkit-transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  outline-width: 1000px;
  outline-color: white !important;
}

.shape {
  clip-path: polygon(
    0% 0px,
    0px 0%,
    calc(100% - 50px) 0px,
    100% 50px,
    100% 100%,
    calc(100% - 0px) 100%,
    50px 100%,
    0px calc(100% - 50px)
  );
}

.shape {
  clip-path: polygon(
    50px 0px,
    0px 50px,
    0px 100%,
    calc(100% - 50px) 100%,
    100% calc(100% - 50px),
    100% 100%,
    100% 0%,
    0px 0%
  );
}

.shape {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

@font-face {
  font-family: Orbitron;
  src: url("../fonts/Orbitron.ttf") format("truetype");
}

.shape #number {
  font-family: Orbitron !important;
  font-size: 50px;
  font-weight: 400;
  padding-left: 50px;
}

.text-right {
  text-align: right;
  font-size: 1.1em;
  font-family: Orbitron;
  padding-right: 50px;
  padding-bottom: 15px;
}

.text-left {
  font-family: Orbitron;
  padding-left: 50px;
}

.merch_item:hover img {
  transform: scale(1.8);
  filter: brightness(0.4);
}

.merch_item:hover .shape {
  opacity: 1;
  transform: scale(1);
}

/* Controls container  */

.video_controls_container {
  width: 100%;
  position: fixed;
  bottom: 20px;
  justify-content: center;
  align-items: center;
  display: flex;
  z-index: 2;
  opacity: 1;
  transition: opacity 0.5s ease;
  -webkit-transition: opacity 0.5s ease;
}

.video_controls_container.hidden {
  animation: scaleAnimation 0.7s both normal;
}

@keyframes scaleAnimation {
  0% {
    transform: scale(1);
  }

  50% {
    transform: scale(1.5);
  }

  100% {
    transform: scale(1);
  }
}

.video_controls_playback,
.video_controls_others {
  backdrop-filter: blur(50px);
  background-color: rgba(240, 240, 240, 0.7);
  box-shadow: 0px 0px 50px rgba(0, 0, 0, 0.5);
}

.video_controls_others {
  display: flex;
  height: 60px;
  width: 170px;
  border-radius: 100px;
  align-items: center;
  justify-content: center;
  transition: width 0.1s ease;
  -webkit-transition: width 0.5s cubic-bezier(0.075, 0.82, 0.165, 1);
}

.video_controls_others.hidden {
  width: 60px;
  transition: width 0.1s ease;
  -webkit-transition: width 0.1s ease;
}

.icons {
  height: 100%;
  width: 100%;
  display: flex;
  text-align: center;
  justify-content: space-evenly;
  align-content: center;
  flex-wrap: wrap;
  color: black;
  opacity: 1;
  transition: opacity 5s ease;
}

.icons.hidden {
  display: none;
  opacity: 0;
  transition: opacity 5s ease;
}

.control_icon {
  align-items: center;
  display: flex;
  font-size: 1.8em;
}

#control_playback {
  opacity: 1;
  display: flex;
}

#control_playback.hidden {
  opacity: 0;
  display: none;
}

#icons_main_replay {
  opacity: 0;
  transition: opacity 0.1s ease;
  -webkit-transition: opacity 0.1s ease;
}

.dot {
  background-color: #00bbff;
  height: 0px;
  width: 0px;
  border-radius: 100px;
  z-index: 5;
}

.dot.visible {
  animation: heightWidth 0.5s both normal;
}

@keyframes heightWidth {
  0% {
    height: 0px;
    width: 0px;
  }

  50% {
    height: 60px;
    width: 60px;
  }

  100% {
    height: 20px;
    width: 20px;
  }
}

/* Anime Headers */

#anime_headers_text {
  font-family: Helvs;
  font-weight: bolder;
  margin: 0;
  line-height: 1.6;
}

.content3 {
  transition: opacity 0.3s ease;
  overflow: hidden;
}

.anime_header_carousel {
  display: flex;
  justify-content: center;
}

.anime-slider-wrapper {
  position: relative;
  max-width: 70%;
}

.anime-slider {
  display: flex;
  aspect-ratio: 3 / 1;
  overflow-x: auto;
  box-shadow: 0 1.5rem 3rem -0.75rem hsla(0, 0%, 0%, 0.25);
  border-radius: 1rem;
  outline: solid 1px white;
  -ms-overflow-style: none;
  scrollbar-width: none;
}

.anime-slider::-webkit-scrollbar {
  display: none;
}

.anime-slider img {
  transform: translateX(0%);
  transition: transform 1s ease;
  flex: 1 0 100%;
  scroll-snap-align: start;
  object-fit: cover;
}

#anime_headers_title {
  margin-top: -1%;
}

/*! Thumbnails */

.content4,
.content5 {
  transition: opacity 1s ease;
  display: relative;
  z-index: 1;
}

.thumbnail_container {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 1%;
  flex-wrap: wrap;
  justify-content: center;
  margin: 5%;
}

.two_thumbnails {
  width: 100%;
  display: flex;
  flex-direction: row;
  gap: 1%;
  justify-content: center;
}

.two_thumbnails img {
  width: 48.5%;
}

.thumbnail_image {
  margin-top: 1%;
  width: 32%;
  aspect-ratio: 16 / 9;
  filter: grayscale(100%) brightness(30%);
  z-index: 1;
  pointer-events: all;
  transition: filter 0.3s ease, opacity 0.5s ease;
  outline: solid 1px white;
}

.thumbnail_image.hover {
  filter: grayscale(0%) brightness(100%);
}

.advert_container {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1%;
  position: relative;
  z-index: 1;
  align-items: center;
  margin-top: 3%;
}

.advert_image {
  margin-bottom: 1%;
  width: 25%;
  height: 100%;
  aspect-ratio: initial;
  pointer-events: all;
  transition: all 1s cubic-bezier(0.075, 0.82, 0.165, 1);
  filter: grayscale(100%) brightness(30%);
  box-shadow: 0px 0px 50px black;
  outline: solid 2px white;
}

.advert_image:hover {
  transform: scale(1.3);
  filter: grayscale(0%) brightness(100%);
}

#ad1,
#ad3 {
  z-index: 1;
}

#ad2 {
  z-index: 2;
}

.popup_image_container {
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(10px);
  width: 100%;
  height: 100%;
  z-index: 100;
  position: fixed;
  top: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  flex-wrap: nowrap;
  transform: translateY(-100%);
  transition: transform 0.5s ease;
  /* visibility: hidden; */
}

.popup_image_container.show {
  transition: transform 0.5s ease;
  transform: translateY(0%);
}

.popup_image {
  width: auto;
  height: clamp(20vh, 50vw, 70vh);
  aspect-ratio: initial;
  margin: 0;
  align-self: center;
  transform: scale(0);
  transition: transform 0.5s ease;
  pointer-events: none;
}

.popup_image.show {
  transition: transform 0.5s ease;
  transform: scale(1);
}

.close_text {
  margin-top: 5%;
  margin-bottom: -5%;
  text-align: center;
  color: lightgray;
  font-size: 2em;
  transition: color 0.2s ease;
}

.close_text:hover {
  color: #00bbff;
}

.scrolltotop {
  width: 60px;
  height: 60px;
  background-color: black;
  position: fixed;
  bottom: 20px;
  right: 50px;
  border-radius: 100px;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  pointer-events: all;
  z-index: 10;
  transition: opacity 0.3s ease;
  opacity: 0;
  border: none;
  box-shadow: 0px 0px 60px 15px #00bbff;
}

#scrolltop_icon {
  font-size: 3em;
  z-index: 12;
}

.scrolltoptop_container {
  z-index: 500;
}

/* .content5 > * {
  position: relative;
  z-index: 1;
} */

.fallout_images {
  display: flex;
  background-color: black;
  justify-content: center;
  flex-direction: column;
  align-items: center;
  padding-bottom: 10%;
  position: relative;
  z-index: 1;
  /* padding: 3% 0; */
}

.fallout_title {
  background-color: black;
  margin-bottom: 0;
  padding: 3% 0;
}

#fallout1 {
  margin-top: -5px;
  width: 80%;
}
.fallout_cards {
  display: flex;
  direction: row;
  gap: 3%;
  justify-content: center;
  flex-wrap: wrap;
}

.fallout_cards > * {
  width: 45%;
  margin-top: 3%;
}

@font-face {
  font-display: swap;
  font-family: GothamBold;
  src: url("../fonts/Gotham-Bold.otf") format("opentype");
  src: url("../fonts/GothamBold.ttf") format("truetype");
}

.fallout_secondarytitle {
  width: 55%;
  color: white;
  font-family: GothamBold;
  font-size: 2.4vw;
  text-align: left;
  font-weight: normal;
}

.fallout_panels {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-content: center;
  gap: 1%;
}

.fallout_panels img {
  margin-top: 0;
  margin-bottom: -9%;
  width: 30%;
}

#streampanelstext {
  margin-top: 5%;
  font-size: 1.8vw;
}

#control_forward,
#control_backward {
  transition: transform 0.1s ease-in-out;
}

.div_hoveronme_container {
  position: absolute;
  display: grid;
  place-items: normal;
  height: 100%;
  z-index: 2;
  transition: opacity 0.4s ease;
  pointer-events: none;
}

.hoveronme_text {
  margin-top: 70%;
  font-size: 3em;
  color: white;
  font-family: Helvs;
  text-transform: uppercase;
  font-weight: bold;
}