* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

body {
  background-color: #fae1b8;
  font-family: onepiece, Arial, Helvetica, sans-serif;
  overflow-x: hidden;
}

@font-face {
  font-family: onepiece;
  src: url(fonts/manga.ttf);
}

/* ========================= Splash ========================= */

.backdropsplash {
  background: url("images/splashbg.png") no-repeat;
  background-size: cover;
  position: fixed;
  /* background-position: center; */
  inset: 0;
  z-index: 3;
  display: flex;
  justify-content: center;
  align-items: center;
}

.backdropsplash.disabled {
  visibility: hidden;
  opacity: 0;
  transition: visibility 0.5s, opacity 0.5s linear;
}

.enterContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
}

.splashLogo {
  background: url(images/onememelogo.png) no-repeat;
  background-size: contain;
  display: inline-block;
  width: 3556px;
  height: 1214px;
  zoom: 0.15;
}

.enterQuestion {
  font-size: 2rem;
  color: white;
  margin-bottom: 1rem;
}

.enterButton {
  background: url("images/setsailsprite.png") no-repeat;
  display: inline-block;
  width: 600px;
  height: 188px;
  zoom: 0.4;
  background-position: 0px 0px;
}

.enterButton:hover {
  background-position: 0px -188px;
  cursor: pointer;
}

/* ======================== Section One ======================== */

#myVideo {
  width: 100vw;
  height: 100vh;
  object-fit: cover;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  bottom: 0;
  z-index: -1;
  margin: 0;
  filter: contrast(110%);
}

.sectionOne {
  height: 98vh;
}

.homeContainer {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
}

.homeTop {
  display: flex;
  justify-content: space-between;
  margin-top: 1rem;
  margin-right: 1rem;
  margin-left: 1rem;
}

.homeLogo {
  background: url(images/onememelogo.png) no-repeat;
  background-size: contain;
  display: inline-block;
  width: 3556px;
  height: 1214px;
  zoom: 0.1;
}

.homeTopLinks,
.homeBottomLinks {
  display: flex;
  gap: 1.5rem;
}

.homeBottomLinks {
  margin-bottom: 1rem;
  margin-left: 1rem;
}

.linkPF {
  background: url(images/scrollPF.png) no-repeat;
}

.linkDS {
  background: url(images/scrollDS.png) no-repeat;
}

.linkDT {
  background: url(images/scrollDT.png) no-repeat;
}

.linkTG {
  background: url(images/scrollTG.png) no-repeat;
}

.linkTW {
  background: url(images/scrollTW.png) no-repeat;
}

.homeLink {
  background-size: contain;
  display: inline-block;
  width: 301px;
  height: 398px;
  zoom: 0.275;
}

.homeLink:hover {
  scale: 1.05;
  cursor: pointer;
}

/* ======================== Section Two ======================== */

.sectionTwo {
  background-image: url("images/billboardbgposters.png");
  background-repeat: no-repeat;
  height: 100vh;
  width: 100vw;
  background-size: cover;
  background-position: center center;
}

.wantedPosters {
  height: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding-bottom: 17.5rem;
  gap: 2rem;
}

.wantedZoro,
.wantedLoffy,
.wantedSonji,
.wantedOsopp,
.wantedNomi {
  animation: wdszoom0 2s linear 0s infinite alternate;
  -webkit-animation-delay: 0s;
  animation-delay: 0s;
}

@-webkit-keyframes wdszoom0 {
  100% {
    transform: scale(0.95);
  }
}

.wantedZoro:hover,
.wantedLoffy:hover,
.wantedSonji:hover,
.wantedOsopp:hover,
.wantedNomi:hover {
  scale: 1.05;
  cursor: pointer;
}

.wantedOsopp {
  background: url("images/wantedsprite.png") no-repeat;
  display: inline-block;
  width: 500px;
  height: 747px;
  zoom: 0.195;
  background-position: 0px 0px;
  -webkit-transform: rotate(7deg);
  -moz-transform: rotate(7deg);
  -o-transform: rotate(7deg);
  -ms-transform: rotate(7deg);
  transform: rotate(7deg);
}

.wantedZoro {
  background: url("images/wantedsprite.png") no-repeat;
  display: inline-block;
  width: 500px;
  height: 747px;
  zoom: 0.195;
  background-position: 0px -747px;
  -webkit-transform: rotate(-8deg);
  -moz-transform: rotate(-8deg);
  -o-transform: rotate(-8deg);
  -ms-transform: rotate(-8deg);
  transform: rotate(-8deg);
}

.wantedLoffy {
  background: url("images/wantedsprite.png") no-repeat;
  display: inline-block;
  width: 500px;
  height: 747px;
  zoom: 0.195;
  background-position: 0px -1494px;
  -webkit-transform: rotate(5deg);
  -moz-transform: rotate(5deg);
  -o-transform: rotate(5deg);
  -ms-transform: rotate(5deg);
  transform: rotate(5deg);
}

.wantedSonji {
  background: url("images/wantedsprite.png") no-repeat;
  display: inline-block;
  width: 500px;
  height: 747px;
  zoom: 0.195;
  background-position: 0px -2241px;
  -webkit-transform: rotate(4deg);
  -moz-transform: rotate(4deg);
  -o-transform: rotate(4deg);
  -ms-transform: rotate(4deg);
  transform: rotate(4deg);
}

.wantedNomi {
  background: url("images/wantedsprite.png") no-repeat;
  display: inline-block;
  width: 500px;
  height: 747px;
  zoom: 0.195;
  background-position: 0px -2988px;
  -webkit-transform: rotate(-4deg);
  -moz-transform: rotate(-4deg);
  -o-transform: rotate(-4deg);
  -ms-transform: rotate(-4deg);
  transform: rotate(-4deg);
}

/*  POPUP  */

.backdropWanted {
  display: none;
}

.backdropWanted.enabled {
  position: fixed;
  inset: 0;
  z-index: 3;
  background-color: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(5px);
  display: flex;
  justify-content: center;
  align-items: center;
}

.wantedZoroPU {
  display: none;
}

.wantedZoroPU.enabled {
  background: url("images/popupspritesmaller.png") no-repeat;
  display: inline-block;
  width: 386px;
  height: 577px;
  zoom: 1.5;
  background-position: 0px -577px;
}

.wantedLoffyPU {
  display: none;
}

.wantedLoffyPU.enabled {
  background: url("images/popupspritesmaller.png") no-repeat;
  display: inline-block;
  width: 386px;
  height: 577px;
  zoom: 1.5;
  background-position: 0px 0px;
}

.wantedSonjiPU {
  display: none;
}

.wantedSonjiPU.enabled {
  background: url("images/popupspritesmaller.png") no-repeat;
  display: inline-block;
  width: 386px;
  height: 577px;
  zoom: 1.5;
  background-position: 0px -1154px;
}

.wantedOsoppPU {
  display: none;
}

.wantedOsoppPU.enabled {
  background: url("images/popupspritesmaller.png") no-repeat;
  display: inline-block;
  width: 386px;
  height: 577px;
  zoom: 1.5;
  background-position: 0px -1731px;
}

.wantedNomiPU {
  display: none;
}

.wantedNomiPU.enabled {
  background: url("images/popupspritesmaller.png") no-repeat;
  display: inline-block;
  width: 386px;
  height: 577px;
  zoom: 1.5;
  background-position: 0px -2308px;
}

.close {
  z-index: 4;
  color: whitesmoke;
  font-size: 4rem;
  border: 0;
  background-color: transparent;
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 10px;
  font-weight: 100;
  cursor: pointer;
}

/*  POPUP  */

/* ======================== Section Three ======================== */

h1 {
  font-size: 10rem;
}

h2 {
  font-size: 5rem;
}

h3 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

li {
  font-size: 1.5rem;
}

ul {
  list-style-type: none;
}

.sectionThree {
  height: auto;
  width: 100vw;
  padding-bottom: 10rem;
}

.roadmapContainer {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-top: 5rem;
}

.roadmapBottom {
  display: flex;
  justify-content: center;
  width: 90%;
}

.plutonContainer,
.uranusContainer,
.poseidonContainer {
  width: 100%;
  text-align: center;
}

.tokenomicsContainer {
  margin-top: 10rem;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  text-align: center;
}

/* ======================== Footer ======================== */

footer {
  display: flex;
  justify-content: center;
  align-items: center;
}

.goldroger {
  background: url(images/goldroger.png) no-repeat;
  background-size: contain;
  display: inline-block;
  width: 1024px;
  height: 576px;
  zoom: 0.75;
  opacity: 0.75;
  box-shadow: 0 0 25px 25px #fae1b8 inset;
  margin-bottom: 5rem;
}

/* ======================== Responsive Settings ======================== */

@media (max-width: 720px) {
  .homeLogo {
    zoom: 0.0625;
  }

  .homeLink {
    zoom: 0.18;
  }

  .homeTopLinks,
  .homeBottomLinks {
    gap: 1.125rem;
  }

  .homeTop,
  .homeBottomLinks {
    margin: 0.75rem;
  }
}

@media (max-width: 650px) {
  .sectionTwo {
    background-image: url("images/mobbg.png");
    background-repeat: no-repeat;
    height: 90vh;
    width: 100vw;
    background-size: cover;
    background-position: center center;
    background-color: red;
  }

  .wantedPosters {
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-top: 4rem;
    gap: 0.4rem;
  }

  .wantedZoro,
  .wantedLoffy,
  .wantedSonji,
  .wantedOsopp,
  .wantedNomi {
    zoom: 0.16;
  }

  h1 {
    font-size: 7.5rem;
  }

  h2 {
    font-size: 4rem;
  }

  h3 {
    font-size: 2.5rem;
    margin-bottom: 1rem;
  }

  li {
    font-size: 1.5rem;
  }

  .roadmapBottom {
    display: grid;
    grid-template-columns: 1fr;
    grid-gap: 2rem;
  }

  .tokenomicsContainer {
    gap: 2rem;
  }
}

@media (max-width: 550px) {
  .splashLogo {
    zoom: 0.125;
  }

  .enterQuestion {
    font-size: 1.5rem;
  }

  .enterButton {
    zoom: 0.4;
  }

  .wantedZoroPU.enabled,
  .wantedLoffyPU.enabled,
  .wantedSonjiPU.enabled,
  .wantedOsoppPU.enabled,
  .wantedNomiPU.enabled {
    zoom: 0.9;
  }
}

@media (max-width: 495px) {
  .homeLogo {
    zoom: 0.05;
  }

  .homeLink {
    zoom: 0.16;
  }

  .homeTopLinks,
  .homeBottomLinks {
    gap: 0.75rem;
  }

  .homeTop,
  .homeBottomLinks {
    margin: 0.5rem;
  }
}

@media (max-width: 450px) {
  .splashLogo {
    zoom: 0.1;
  }

  .enterQuestion {
    font-size: 1.25rem;
  }

  .enterButton {
    zoom: 0.4;
  }
}

@media (max-width: 400px) {
  .wantedZoro,
  .wantedLoffy,
  .wantedSonji,
  .wantedOsopp,
  .wantedNomi {
    zoom: 0.14;
  }
}

@media (max-width: 380px) {
  .wantedPosters {
    padding-top: 7rem;
    gap: 0.1rem;
  }

  .wantedZoro,
  .wantedLoffy,
  .wantedSonji,
  .wantedOsopp,
  .wantedNomi {
    zoom: 0.125;
  }

  h1 {
    font-size: 5rem;
  }
}