@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans&display=swap'); /* Nunito */
@import url('https://fonts.googleapis.com/css2?family=Kanit&display=swap'); /* Kanit */
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap'); /* Poppins */

::-webkit-scrollbar {
    width: 0;
}
/* ONLY CHANGE THESE COLORS */
:root {
    --background: #111111;
    --secondary-background: #151515;
    --main-color: #850000;
    --main-hover-color: #258efe;
    --discord-col: #7289DA;
    --paypal: #253B80;
}
body {
    margin: 0;
}
/* custom colors for html code */
.bg {
    background-color: var(--background);
}
.bgGreen {
    background-color: #68FF19; /* You can replace 'green' with your desired green color */
}
.transBg {
    background-color: rgba(10, 11, 12, 0.3);
}
.dg {
    background-color: var(--secondary-background);
}
.bgCol {
    background-color: var(--main-color);
}
.bgTrans {
    background-color: rgba(37, 142, 254, 0.5);
}
.bgCol-hover:hover {
    background-color: var(--main-hover-color);
}
.textCol {
    color: var(--main-color);
}
.textCol-hover {
    transition: 0.3s linear;
}
.textCol-hover:hover {
    color: var(--main-color);
}
.textPaypal {
    color: var(--paypal);
}
.dcBg {
    background-color: var(--discord-col);
}


.colShwHvr {
    box-shadow: 0px 0px 2px 1px var(--background);
    transition: 0.3s linear;
}
.colShwHvr-left:hover {
    box-shadow: 0px 0px 2px 1px var(--main-color);
    transform: perspective(300px) rotateY(2deg);
}
.colShwHvr-center:hover {
    box-shadow: 0px 0px 2px 1px var(--main-color);
    -webkit-transform: scale(2);
  transform: scale(1.03);
}
.colShwHvr-right:hover {
    box-shadow: 0px 0px 2px 1px var(--main-color);
    transform: perspective(300px) rotateY(-2deg);
}
.colShwHvr-right-img:hover {
    transform: perspective(300px) rotateY(-2deg);
}


.brdCol {
    border-color: var(--main-color);
}
.brdBg {
    border-color: var(--background);
}
.brdDg {
    border-color: var(--secondary-background);
}
.discordCol {
    background-color: var(--discord-col);
}
.fnt {
    font-family: 'Nunito Sans', sans-serif;
}
.fntBold {
    font-family: 'Kanit', sans-serif;
}
.fntPoppins {
    font-family: 'Poppins', sans-serif;
}
.content {
    max-width: 90rem;
    margin-inline: auto;
}
.contentLogin {
    max-width: 40rem;
    margin-inline: auto;
}
.miAuto {
    margin-inline: auto;
}

.card1 {
    transform: perspective(300px) rotateY(2deg);
    transition: 0.3s linear;
}
.card2 {
    transform: perspective(300px) rotateY(-2deg);
    transition: 0.3s linear;
}
.card3 {
    transform: perspective(300px) rotateY(2deg);
    transition: 0.3s linear;
}
.card4 {
    transform: perspective(300px) rotateY(-2deg);
    transition: 0.3s linear;
}


@keyframes spin {
    0% {
        transform: rotate(0deg);
    }
    100% {
        transform: rotate(360deg);
    }
} 
.spin {
    animation: spin 0.2s linear infinite;
}
.spin img {
    overflow-clip-margin: content-box;
    overflow: clip;
}


/* Status Colors */
.green {
    color: #15803d;
}
.greenTrans {
 background-color: rgba(21, 128, 61, 0.2);
}

/* Extra */

.sdwLight {
    box-shadow: 0px 0px 2px 1px black;
}
.moidgndnfg {
    height: 58rem;
}
.transStore {
    background-color: rgba(10, 10, 10, 0.7);
}
.dgmnojdfng {
    width: 21rem;
}
.gmodgnodfngdfgg {
    margin-right: 1.5rem;
}
.gmodgnodfngdfg {
    margin-right: 4.55rem;
}
.dgmnojdfngtryr {
    width: 35rem;
}
.dmfgodfng {
    width: 21rem;
}


.typewriter-text {
    display: inline-block;
    overflow: hidden;
    animation: typing 3s steps(30, end);
  }
  
  @keyframes typing {
    from {
      width: 0;
    }
    to {
      width: 100%;
    }
  }

  .typewriter-text2 {
    display: inline-block;
    overflow: hidden;
    animation: typing 3s steps(30, end);
  }
  
  @keyframes typing {
    from {
      width: 0;
    }
    to {
      width: 100%;
    }
  }
  
  .customHomeWidthForTwext {
    width: 40rem;
  }

  .maxHeight {
    height: 52rem;
  }