/* GENERAL */
@font-face {
  font-family: bodega;
  src: url(fonts/bodega.otf);
}

@font-face {
  font-family: itf;
  src: url(fonts/ITC.otf);
}

html {
  scroll-behavior: smooth;
  font-size: 1rem;
  background-color: black;
}

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

body {
  background-image: url(images/newmetbackground.png);
  min-height: 100vh;
  background-repeat: no-repeat;
  background-attachment: fixed;
  background-position: center;
  background-size: cover;
}

a {
  font-family: itf, Arial, Helvetica, sans-serif;
  text-decoration: none;
  color: white;
  font-weight: bolder;
}

li {
  list-style-type: none;
}

h1 {
  font-family: itf, Arial, Helvetica, sans-serif;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: black;
  font-size: 2.5rem;
}

h2 {
  font-family: itf, Arial, Helvetica, sans-serif;
  -webkit-text-stroke-width: 2px;
  -webkit-text-stroke-color: black;
  font-size: 2.5rem;
}

p {
  font-family: bodega, Arial, Helvetica, sans-serif;
  font-size: 2.5rem;
}

/* --------------------------------------------------------------------------- */

/* SPLASH */

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

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

.newmetlogo {
  background-image: url(images/newmetlogo.svg);
  background-size: 50rem 20rem;
  width: 50rem;
  height: 20rem;
}

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

/* --------------------------------------------------------------------------- */

/* NAVIGATION */

.backdropnav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 3;
  background-color: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(5px);
}

.backdropnav.active {
  display: block;
}

header {
  display: grid;
  grid-template-columns: 2fr 1fr 1fr;
  padding: 20px 50px;
  position: fixed;
  width: 100%;
  top: 0;
  z-index: 2;
  align-items: center;
  background-color: transparent;
}

header .logo {
  display: inline-block;
  background-image: url(images/newmetlogo.png);
  background-size: 10.5rem 4rem;
  width: 10.5rem;
  height: 4rem;
}

header .logo:hover {
  scale: 1.05;
}

header .bags {
  display: inline-block;
  background-image: url(images/pumpfun.png);
  background-size: 3rem 3rem;
  width: 3rem;
  height: 3rem;
}

header .bags:hover {
  scale: 1.1;
}

#menuBtn {
  font-size: 2.5rem;
  color: #fff000;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: black;
}

aside {
  position: fixed;
  transition: right 0.4s ease;
  right: -320px;
  width: 320px;
  background-color: black;
  padding: 80px 40px;
  z-index: 4;
  height: 100vh;
  top: 0;
}

aside.active {
  right: 0;
}

aside a {
  display: block;
  /* color: white; */
  text-decoration: none;
  padding: 12px 0;
  font-size: 25px;
  font-weight: 500;
  background: -webkit-linear-gradient(#fff000, #ff7400);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke-width: 1px;
  -webkit-text-stroke-color: red;
}

aside a:hover {
  scale: 1.05;
}

aside button.close {
  color: white;
  font-size: 35px;
  border: 0;
  background-color: transparent;
  position: absolute;
  top: 10px;
  right: 10px;
  padding: 10px;
  font-weight: 100;
  cursor: pointer;
}

header nav.center {
  text-align: center;
  margin-left: -5rem;
  font-size: 1.8rem;
}

header nav.right {
  text-align: right;
}

.desktop {
  display: none;
}

/* --------------------------------------------------------------------------- */

/* CONTENT TOP */

.section {
  display: flex;
  justify-content: center;
  align-items: center;
  height: auto;
  width: auto;
}

.content {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 95%;
  height: 95%;
  background-image: linear-gradient(rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 1));
  border-radius: 1rem;
  color: white;
  margin-top: 1rem;
}

.titleLogo {
  background-image: url(images/newmetlogo.svg);
  background-size: 60rem 30rem;
  width: 60rem;
  height: 30rem;
}

.top {
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  align-items: center;
}

/* --------------------------------------------------------------------------- */

/* CHARACTERS */

.character {
  background-size: 20rem 20rem;
  width: 20rem;
  height: 20rem;
  outline: 2px solid grey;
  cursor: pointer;
}

.character:hover {
  scale: 1.1;
}

.character:focus {
  scale: 0.5;
}

.pepe {
  background-image: url(images/pepe.png);
}

div.one:hover ~ div.sell {
  background-color: orange;
  color: orange;
}

.doge {
  background-image: url(images/doge.png);
}

.wif {
  background-image: url(images/wif.png);
}

.bome {
  background-image: url(images/bome.png);
}

.mew {
  background-image: url(images/mew.png);
}

.pop {
  background-image: url(images/popcat.png);
}

.slerf {
  background-image: url(images/slerf.png);
}

.ponke {
  background-image: url(images/ponke.png);
}

.peng {
  background-image: url(images/peng.png);
}

.giga {
  background-image: url(images/giga.png);
}

.pudgy {
  background-image: url(images/pudgy.png);
}

.nub {
  background-image: url(images/nub.png);
}

/* CONTENT BOTTOM */

.bottom {
  display: flex;
  gap: 10px;
  margin-top: 2rem;
  margin-left: 10px;
  margin-right: 10px;
  padding-bottom: 2rem;
}

.box {
  text-align: center;
  width: 25%;
  padding: 1rem;
  min-height: 30rem;
}

/* SELECTION BOTTOM */

.selection {
  background-color: rgba(255, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.selection.pepe,
.selection.doge,
.selection.wif,
.selection.bome,
.selection.mew,
.selection.pop,
.selection.slerf,
.selection.ponke,
.selection.peng,
.selection.giga,
.selection.pudgy,
.selection.nub {
  background-size: 35rem 35rem;
  width: 25%;
  min-height: 100%;
  background-repeat: no-repeat;
  background-position: center;
  text-align: center;
  padding: 1rem;
}

.selection.pepe {
  background-image: url(images/pepe.png);
}

.selection.doge {
  background-image: url(images/doge.png);
}

.selection.wif {
  background-image: url(images/wif.png);
}

.selection.bome {
  background-image: url(images/bome.png);
}

.selection.mew {
  background-image: url(images/mew.png);
}

.selection.pop {
  background-image: url(images/popcat.png);
}

.selection.slerf {
  background-image: url(images/slerf.png);
}

.selection.ponke {
  background-image: url(images/ponke.png);
}

.selection.peng {
  background-image: url(images/peng.png);
}

.selection.giga {
  background-image: url(images/giga.png);
}

.selection.pudgy {
  background-image: url(images/pudgy.png);
}

.selection.nub {
  background-image: url(images/nub.png);
}

/* INFO BOTTOM */

.info {
  background-color: rgba(17, 0, 255, 0.5);
}

/* LINKS BOTTOM */

.links {
  background-color: rgba(255, 255, 0, 0.5);
}

.linklogos {
  width: 90px;
  height: auto;
  transition: transform 0.2s;
  animation: fadeIn 3s;
  margin: 1px;
}

.linklogos:hover {
  transform: scale(1.1);
}

/* BUY BOTTOM */

.buy {
  background-color: rgba(255, 255, 0, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.buy {
  background-color: rgba(0, 255, 8, 0.5);
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}

.buy:hover {
  background-color: rgba(0, 255, 8, 0.75);
  scale: 1.01;
  transition: 0.1s;
}

/* --------------------------------------------------------------------------- */

/* REACTIVE CHANGES */

@media (max-width: 1500px) {
  .titleLogo {
    background-size: 40rem 20rem;
    width: 40rem;
    height: 20rem;
  }

  .character {
    background-size: 10rem 10rem;
    width: 10rem;
    height: 10rem;
  }

  .selection.pepe,
  .selection.doge,
  .selection.wif,
  .selection.bome,
  .selection.mew,
  .selection.pop,
  .selection.slerf,
  .selection.ponke,
  .selection.peng,
  .selection.giga,
  .selection.pudgy,
  .selection.nub {
    background-size: 30rem 30rem;
  }

  .box {
    min-height: 25rem;
  }

  p {
    font-size: 2rem;
  }
}

@media (max-width: 1000px) {
  .titleLogo {
    background-size: 28rem 14rem;
    width: 28rem;
    height: 14rem;
  }

  .newmetlogo {
    background-size: 30rem 12rem;
    width: 30rem;
    height: 12rem;
  }

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

  .box {
    width: auto;
  }

  .selection.pepe,
  .selection.doge,
  .selection.wif,
  .selection.bome,
  .selection.mew,
  .selection.pop,
  .selection.slerf,
  .selection.ponke,
  .selection.peng,
  .selection.giga,
  .selection.pudgy,
  .selection.nub {
    width: 100%;
  }

  .buy {
    height: auto;
    min-height: 25rem;
  }
}

@media (max-width: 450px) {
  .titleLogo {
    margin-top: 2rem;
    background-size: 20rem 10rem;
    width: 20rem;
    height: 10rem;
  }

  .newmetlogo {
    background-size: 20rem 8rem;
    width: 20rem;
    height: 8rem;
  }

  header {
    display: flex;
    justify-content: space-between;
  }

  header .logo {
    display: none;
  }

  .bottom {
    display: grid;
    grid-template-columns: 1fr;
  }

  .buy,
  .sell {
    height: 10rem;
  }

  .box {
    width: auto;
    min-height: 25rem;
  }

  .selection.pepe,
  .selection.doge,
  .selection.wif,
  .selection.bome,
  .selection.mew,
  .selection.pop,
  .selection.slerf,
  .selection.ponke,
  .selection.peng,
  .selection.giga,
  .selection.pudgy,
  .selection.nub {
    width: 100%;
    height: 25rem;
  }
}