body {
    background-image: url(../media/BG-O23-OCT_00523.webp);
    background: linear-gradient(-45deg, #fff400, #e73c7e, #23a6d5);
    background-size: 100% 100%;
    animation: gradient 15s ease infinite;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
    min-height: 100vh;
}

@keyframes gradient {
  0% {
      background-position: 0 50%;
  }
  50% {
      background-position: 100% 50%;
  }
  100% {
      background-position: 0 50%;
  }
}
.popup{
  background-color: black;
 z-index: 10;
}

::-webkit-scrollbar{
  width: 0;
}

#scrollPath {
  position: fixed;
  top: 0;
  right: 0;
  width: 10px;
  height: 100%;
  background: rgba(255, 255, 255, 0.05);
  z-index: 10;
}

#progressbar{
  position: fixed;
  top: 0;
  right: 0;
  width: 10px;
  height: 100%;
  background: linear-gradient(to top, #008aff,#00ffe7);
  animation: animate 5s linear infinite;
  z-index: 10;
}

@keyframes animate {
  0%,100%
  {
    filter:hue-rotate(0deg);
  }
  50%{
    filter:hue-rotate(360deg);
  }
}

#progressbar:before{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, #008aff,#00ffe7);
  filter:blur(10px);
  z-index: 10;
}

#progressbar:after{
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  width: 100%;
  height: 100%;
  background: linear-gradient(to top, #008aff,#00ffe7);
  filter:blur(30px);
  z-index: 10;
}

.invisible {
    visibility: visible !important;}
.ocultar {
      visibility: hidden;}

@font-face {
  font-family: "Akira";
  src: url("../font/Akira.otf");
  font-display: block; 
}
@font-face {
  font-family: "Boris";
  src: url("../font/Boris.ttf");
  font-display: block; 
}
@font-face {
  font-family: "Franchise";
  src: url("../font/Franchise.ttf");
  font-display: block; 
}
@font-face {
  font-family: "Harabara";
  font-display: block;
  src: url("../font/Harabara.otf");
}
@font-face {
  font-family: "Hotlady";
  src: url("../font/Hotlady.ttf");
  font-display: block; 
}
@font-face {
  font-family: "Montserrat";
  src: url("../font/Montserrat.ttf");
  font-display: block; 
}
@font-face {
  font-family: "Oswald";
  font-display: block; 
  src: url("../font/Oswald.ttf");
}
@font-face {
  font-family: "Printed";
  font-display: block;
  src: url("../font/Printed.ttf"); 
}
@font-face {
  font-family: "Welbut";
  font-display: block;
  src: url("../font/Welbut.ttf");
}

h1 {
  font-family: "Akira"; 
  font-size: 1.5em;
  margin-bottom: 30px;
  color: white;
}
h3 {
  font-family: "Akira"; 
  font-size: 1em;
}
a, a:hover, a:focus, a:active {
  text-decoration: none;
  color: inherit;
}

p {
  font-family: "Montserrat";
  color: white;
  font-size: 14px;
}

.card {
  background-image: url('https://www.transparenttextures.com/patterns/diagmonds.png');
  background-color:#090213;
  border-radius: 13px;
  box-shadow: 10px 10px 15px rgba(0,0,0,0.556);
}

.card-song {
  box-shadow: 20px 20px 20px rgba(0,0,0,0.35);
}

.card-title {
  font-family: "Akira";
  font-size: 1.2em;
  text-align: center;
  padding: 0.7em;
}

ul {
  text-decoration: none;
  list-style-type: none;
}

ul li {
  font-family: "Montserrat";
  font-size: 1em;
  font-style: italic;
  color: white;
}

.pp {
  font-family: Verdana; 
  font-style: italic;
  font-size: .85em;
  font-weight: 700;
  color:#009CDE;
}

.mp {
  font-family: "Harabara";
  color: white;
  font-weight: 100;
}

.title-cancion {
  font-family: "Akira"; 
  font-size: 2.5em;
}

.cardTitle {
  color: white;
 font-size: 3.5em;
}

.btn-buy {
    font-family: "Akira";
    font-size: 0.65em;
    color: #FFCA2C;
    background-color: #14192E;
}

.cardNumber {
  font-family: "Franchise";
    font-size: 1.75em;
    letter-spacing: 0.1em;
    color: white;
    text-shadow: 2px 3px 4px rgba(0,0,0,0.5);
}

.linear-wipe0 {
	background-image: -webkit-linear-gradient(-45deg, white, #f6ed47,white,turquoise, white, #e73c7e,white);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-animation: hue 5s infinite linear;
}

.linear-wipe {
	letter-spacing: 0.05em;
	color: #f35626;
	background-image: -webkit-linear-gradient(-45deg, #fff400, #e73c7e);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-animation: hue 5s infinite linear;
}

@-webkit-keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }
  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}

.linear-wipe1 {
	letter-spacing: 0.05em;
	color: #f35626;
	background-image: -webkit-linear-gradient(-45deg, #698F00, #23a6d5);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-animation: hue 5s infinite linear;
}

@-webkit-keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }
  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}

.linear-wipe2 {
  letter-spacing: 0.05em;
  color: #f35626;
  background-image: -webkit-linear-gradient(-45deg, #fff400, #e73c7e);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  -webkit-animation: hue 5s infinite linear;
}

@-webkit-keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }
  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}

.linear-wipe3 {
	letter-spacing: 0.05em;
	color: white;
	background-image: -webkit-linear-gradient(-45deg, #ffff14, #fffff7,#9ca5ce, #5a7bde, #feff52,#fffff7);
	-webkit-background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-animation: hue 3s infinite linear;
}

@-webkit-keyframes hue {
  from {
    -webkit-filter: hue-rotate(0deg);
  }
  to {
    -webkit-filter: hue-rotate(-360deg);
  }
}

.letras {
  font-family: "Montserrat";
  font-style: sans-serif;
  font-weight: bold;

}

.cant{
  display: flex;
  justify-content: center;
  align-items: center;
  font-family: "Montserrat";
  font-weight: bold;
  color: white;
}

.music{
  margin-bottom: 10px;
}

.music:hover{
  background-color: #f7f7f7;
  color: black;
  border-radius: 3px;
  cursor: pointer;
}

.color{
  color: #18f0ff;
}
.chords{
  color: #ffec18;
}
.playlist{
      height: 51px;
}

/*-----FOOTER-----*/
footer {
  background-color: black;
  font-family: "Welbut";
  font-size: 0.9em;
  color: white;
}

footer span {
  font-size: 1.2em;
}
/* GLITCH EFFECT EÓLIVO*/

.hero {
  display: inline-block;
  color: #fff;
  z-index: 2;
  /* Bright things in dark environments usually cast that light, giving off a glow */
  filter: drop-shadow(0 1px 3px);
}

.layers {
  position: relative;
}

.layers::after,
.layers::before {
  content: attr(data-text);
  position: absolute;
  width: 110%;
  z-index: -1;
}

.layers::before {
  top: 10px;
  left: 15px;
  color: #e0287d;
}

.layers::after {
  top: 5px;
  left: -10px;
  color: #1bc7fb;
}

.single-path {
  clip-path: polygon(0% 12%, 53% 12%, 53% 26%, 25% 26%, 25% 86%, 31% 86%, 31% 0%, 53% 0%, 53% 84%, 92% 84%, 92% 82%, 70% 82%, 70% 29%, 78% 29%, 78% 65%, 69% 65%, 69% 66%, 77% 66%, 77% 45%, 85% 45%, 85% 26%, 97% 26%, 97% 28%, 84% 28%, 84% 34%, 54% 34%, 54% 89%, 30% 89%, 30% 58%, 83% 58%, 83% 5%, 68% 5%, 68% 36%, 62% 36%, 62% 1%, 12% 1%, 12% 34%, 60% 34%, 60% 57%, 98% 57%, 98% 83%, 1% 83%, 1% 53%, 91% 53%, 91% 84%, 8% 84%, 8% 83%, 4% 83%);
}

.paths {
  animation: paths 5s step-end infinite;
}

@keyframes paths {
  0% {
      clip-path: polygon(0% 43%, 83% 43%, 83% 22%, 23% 22%, 23% 24%, 91% 24%, 91% 26%, 18% 26%, 18% 83%, 29% 83%, 29% 17%, 41% 17%, 41% 39%, 18% 39%, 18% 82%, 54% 82%, 54% 88%, 19% 88%, 19% 4%, 39% 4%, 39% 14%, 76% 14%, 76% 52%, 23% 52%, 23% 35%, 19% 35%, 19% 8%, 36% 8%, 36% 31%, 73% 31%, 73% 16%, 1% 16%, 1% 56%, 50% 56%, 50% 8%);
  }
  5% {
      clip-path: polygon(0% 29%, 44% 29%, 44% 83%, 94% 83%, 94% 56%, 11% 56%, 11% 64%, 94% 64%, 94% 70%, 88% 70%, 88% 32%, 18% 32%, 18% 96%, 10% 96%, 10% 62%, 9% 62%, 9% 84%, 68% 84%, 68% 50%, 52% 50%, 52% 55%, 35% 55%, 35% 87%, 25% 87%, 25% 39%, 15% 39%, 15% 88%, 52% 88%);
  }
  30% {
      clip-path: polygon(0% 53%, 93% 53%, 93% 62%, 68% 62%, 68% 37%, 97% 37%, 97% 89%, 13% 89%, 13% 45%, 51% 45%, 51% 88%, 17% 88%, 17% 54%, 81% 54%, 81% 75%, 79% 75%, 79% 76%, 38% 76%, 38% 28%, 61% 28%, 61% 12%, 55% 12%, 55% 62%, 68% 62%, 68% 51%, 0% 51%, 0% 92%, 63% 92%, 63% 4%, 65% 4%);
  }
  45% {
      clip-path: polygon(0% 33%, 2% 33%, 2% 69%, 58% 69%, 58% 94%, 55% 94%, 55% 25%, 33% 25%, 33% 85%, 16% 85%, 16% 19%, 5% 19%, 5% 20%, 79% 20%, 79% 96%, 93% 96%, 93% 50%, 5% 50%, 5% 74%, 55% 74%, 55% 57%, 96% 57%, 96% 59%, 87% 59%, 87% 65%, 82% 65%, 82% 39%, 63% 39%, 63% 92%, 4% 92%, 4% 36%, 24% 36%, 24% 70%, 1% 70%, 1% 43%, 15% 43%, 15% 28%, 23% 28%, 23% 71%, 90% 71%, 90% 86%, 97% 86%, 97% 1%, 60% 1%, 60% 67%, 71% 67%, 71% 91%, 17% 91%, 17% 14%, 39% 14%, 39% 30%, 58% 30%, 58% 11%, 52% 11%, 52% 83%, 68% 83%);
  }
  76% {
      clip-path: polygon(0% 26%, 15% 26%, 15% 73%, 72% 73%, 72% 70%, 77% 70%, 77% 75%, 8% 75%, 8% 42%, 4% 42%, 4% 61%, 17% 61%, 17% 12%, 26% 12%, 26% 63%, 73% 63%, 73% 43%, 90% 43%, 90% 67%, 50% 67%, 50% 41%, 42% 41%, 42% 46%, 50% 46%, 50% 84%, 96% 84%, 96% 78%, 49% 78%, 49% 25%, 63% 25%, 63% 14%);
  }
  90% {
      clip-path: polygon(0% 41%, 13% 41%, 13% 6%, 87% 6%, 87% 93%, 10% 93%, 10% 13%, 89% 13%, 89% 6%, 3% 6%, 3% 8%, 16% 8%, 16% 79%, 0% 79%, 0% 99%, 92% 99%, 92% 90%, 5% 90%, 5% 60%, 0% 60%, 0% 48%, 89% 48%, 89% 13%, 80% 13%, 80% 43%, 95% 43%, 95% 19%, 80% 19%, 80% 85%, 38% 85%, 38% 62%);
  }
  1%,
  33%,
  47%,
  7%,
  78%,
  93% {
      clip-path: none;
  }
}

.movement {
  /* Normally this position would be absolute & on the layers, set to relative here so we can see it on the div */
  position: relative;
  animation: movement 8s step-end infinite;
}

@keyframes movement {
  0% {
      top: 0;
      left: -20px;
  }
  15% {
      top: 10px;
      left: 10px;
  }
  60% {
      top: 5px;
      left: -10px;
  }
  75% {
      top: -5px;
      left: 20px;
  }
  100% {
      top: 10px;
      left: 5px;
  }
}

.opacity {
  animation: opacity 5s step-end infinite;
}

@keyframes opacity {
  0% {
      opacity: 0.1;
  }
  5% {
      opacity: 0.7;
  }
  30% {
      opacity: 0.4;
  }
  45% {
      opacity: 0.6;
  }
  76% {
      opacity: 0.4;
  }
  90% {
      opacity: 0.8;
  }
  1%,
  33%,
  47%,
  7%,
  78%,
  93% {
      opacity: 0;
  }
}

.font {
  animation: font 7s step-end infinite;
}

@keyframes font {
  0% {
      font-weight: 100;
      color: #e0287d;
      filter: blur(3px);
  }
  20% {
      font-weight: 500;
      color: #fff;
      filter: blur(0);
  }
  50% {
      font-weight: 300;
      color: #1bc7fb;
      filter: blur(2px);
  }
  60% {
      font-weight: 700;
      color: #fff;
      filter: blur(0);
  }
  90% {
      font-weight: 500;
      color: #e0287d;
      filter: blur(6px);
  }
}

.glitch span {
  animation: paths 5s step-end infinite;
}

.glitch::before {
  animation: paths 5s step-end infinite, opacity 5s step-end infinite, font 8s step-end infinite, movement 10s step-end infinite;
}

.glitch::after {
  animation: paths 5s step-end infinite, opacity 5s step-end infinite, font 7s step-end infinite, movement 8s step-end infinite;
}

/******************************************************/

.byw{
  -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
  filter: grayscale(95%);
}

.ivocard {
  font-size: 1.75em;
  text-shadow: 2px 7px 35px black;
  transition: all .2s ease-in-out;
  width:140px;
}

.ivocard:hover {
  transition: all .2s ease-in-out;
  transition: transform 0.5s;
  transform: scale(1.3);
}

.pack:hover {
  transition: transform 0.5s;
  transform: scale(1.2);
}

.pack {
  transition: all .2s ease-in-out;
}

.btn-buy:hover {
  background-color: #FFCA2C;
  color: #14192E;
  transition: transform 0.5s;
  transform: scale(1.1);
}
  
.btn-dark {
  background-color: #000000;
  border: none;
  font-family: "Akira";
}
  
.btn-dark:hover {
  background-color: #000000;
  box-shadow:
  0 0 10px 2px #ffd900,  /* inner white */
  0 0 12px 4px rgb(255, 221, 0), /* middle magenta */
  0 0 15px 8px rgb(255, 221, 0); /* outer cyan */
}

.btn-collection {
  background-color: #000000;
  border: none;
  font-family: "Akira";
}
  
#card-slide {
  width:180px;
  height:262px;
  transition: 2s ease;
}
  
.glow {
  width:230px;
  height:340px;
  border-radius: 3%;
  box-shadow:   
  0 0 60px 2px #fff,  /* inner white */
  0 0 100px 8px #f0f, /* middle magenta */
  0 0 140px 16px #0ff; /* outer cyan */
  }

/*****************SHAKE ANIMATIO*******************/
.shake:hover {
/* Start the shake animation and make the animation last for 0.5 seconds */
  animation: shake 2.5s;
/* When the animation is finished, start again */
  animation-iteration-count: infinite;
}
  
@keyframes shake {
  0% { transform: translate(1px, 1px) rotate(0deg); }
  10% { transform: translate(-1px, -2px) rotate(-1deg); }
  20% { transform: translate(-3px, 0px) rotate(1deg); }
  30% { transform: translate(3px, 2px) rotate(0deg); }
  40% { transform: translate(1px, -1px) rotate(1deg); }
  50% { transform: translate(-1px, 2px) rotate(-1deg); }
  60% { transform: translate(-3px, 1px) rotate(0deg); }
  70% { transform: translate(3px, 1px) rotate(-1deg); }
  80% { transform: translate(-1px, -1px) rotate(1deg); }
  90% { transform: translate(1px, 2px) rotate(0deg); }
  100% { transform: translate(1px, -2px) rotate(-1deg); }
}

/****************BATTLE*******************/

.kataFight {
  font-family: "Katahdin";
  font-size: 0.65em;
}

.fightTxt {
  font-size: 0.85em;
}

.btnFight {
  font-family: "Akira";
  font-size: 1.3em;
  background-color: #28a745;
}

.btnFight:hover {
  background-color: #29B94A;
}

.btnConnectTwitch {
  font-family: "Akira";
  color: white;
  background-color: #931ec4;
  border-color: #931ec4;
}

.btnConnectTwitch:hover {
  color: white;
  background-color: #B52EEF;
  border-color: #B52EEF;
  opacity: 115%;
}

.btnLeader {
  font-family: "Akira";
  color: white;
  background-color: #FFC107;
  border-color: #FFC107;
  opacity: 115%;
}

.btnLeader:hover {
  color: white;
  background-color: #ffd147;
  border-color: #ffd147;
  opacity: 115%;
}

.user {
  height: 1.85em;
}

.write {
  font-family: "Montserrat";
  font-weight: 800;
  color: white;
  font-size: 0.85em;
}

.command {
  color: #ffd200;
  font-size: 1.3em;
}

.lifeBoost {
  color: #00e7b3;
  font-size: 1.45em;
  font-weight: 900;
}

.lifeBoostTxt {
  font-family: "Montserrat",italic;
  font-weight: bold;
  color: #00e7b3;
  font-size: 0.65em;
}
.hp {
  font-size: 1.25em;
}

hr {
  color: white;
}

.nameFighter {
  font-family: "Akira";
  font-size: 1.55em;
  color: white;
  font-weight: bold;
  -webkit-mask-image: linear-gradient(-75deg, rgba(0,0,0,.6) 30%, #000 50%, rgba(0,0,0,.6) 70%);
  -webkit-mask-size: 200%;
  animation: shine 2s linear infinite;
}

@keyframes shine {
  from { -webkit-mask-position: 150%; }
  to { -webkit-mask-position: -50%; }
}

.textVs {
  font-family: "Katahdin";
  font-size: 2em;
  color: red;
}

.monitorTitle {
  font-family: "Printed";
  font-size: 0.65em;
  color: white;
}

.monitorTxt {
  font-family: "Katahdin";
  font-size: .9em;
  color: white;
}

.monTimeTitle {
  font-family: "Printed" !important;
  font-size: 0.9em !important;
}

.leaderTitles {
  font-family: "Oswald";
}

.leaderNames {
  font-family: "Oswald";
  font-style: italic;
}

.yellow {
    font-family: "Oswald";
    font-style: italic;
    color: #ffd200;
    font-size:1.25em;
}

.damage {
    font-family: "Katahdin";
    color: red;
    font-size:1.25em;
}

.skull {
    font-size:1.5em;
}

/***************VS Animación****************/
.heart {
	color: #e00;
	-webkit-animation: beat .45s infinite alternate;
	-moz-animation: beat .45s infinite alternate;
	-ms-animation: beat .45s infinite alternate;
	-o-animation: beat .45s infinite alternate;
	animation: beat .45s infinite alternate;
	-webkit-transform-origin: center;
	-moz-transform-origin: center;
	-o-transform-origin: center;
	-ms-transform-origin: center;
	transform-origin: center;
}


@keyframes beat {
 to {
  -webkit-transform: scale(1.2);
  -moz-transform: scale(1.2);
  -o-transform: scale(1.2);
  -ms-transform: scale(1.2);
  transform: scale(1.2);
 }
}

@-moz-keyframes beat {
 to {
  -moz-transform: scale(1.2);
  transform: scale(1.2);
 }
}

@-webkit-keyframes beat {
 to {
  -webkit-transform: scale(1.2);
  transform: scale(1.2);
 }
}

@-ms-keyframes beat {
 to {
  -ms-transform: scale(1.2);
  transform: scale(1.2);
 }
}

@-o-keyframes beat {
 to {
  -o-transform: scale(1.2);
  transform: scale(1.2);
 }
}

/****************CHANGE TEXT ANIMACION*****************/
.change-text {
  animation-name: fontChange;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes fontChange {
  0% {
    font-family: "Printed";
  }
  20% {
    font-family: "Oswald";
  }
  40% {
    font-family: "Boris";
  }
  60% {
    font-family: "Verdana";
  }
  80% {
    font-family: "Arial";
  }
  100% {
    font-family: "Franchise";
  }
}
/********************MONITORING ANIMACION****************************/

.loading:after {
  overflow: hidden;
  display: inline-block;
  vertical-align: bottom;
  -webkit-animation: ellipsis steps(4,end) 950ms infinite;      
  animation: ellipsis steps(4,end) 950ms infinite;
  content: "\2022 \2022 \2022"; /* ascii code for the ellipsis character */
  width: 0px;
}

@keyframes ellipsis {
  to {
    width: 1.85em;    
  }
}

@-webkit-keyframes ellipsis {
  to {
    width: 1.85em;    
  }
}
/***************BATALLAS************/
cache {
  position: absolute;
  z-index: -1000;
  opacity: 0;
}

cache image {
  position: absolute;
}

#loader {
position: absolute;
left: 50.20%;
top: 50%;
z-index: 1;
width: 120px;
height: 120px;
margin: -76px 0 0 -76px;
border: 10px solid #f3f3f3;
border-radius: 50%;
border-top: 10px solid #c51d0b;
-webkit-animation: spin 1.5s linear infinite;
animation: spin 1.5s linear infinite;
}
#loader-ico{
position: absolute;
left: 50%;
top: 50%;
z-index: 1;
width: 80px;
height: auto;
margin: -59px 0 0 -52px;
}

@-webkit-keyframes spin {
0% { -webkit-transform: rotate(0deg); }
100% { -webkit-transform: rotate(360deg); }
}

@keyframes spin {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg); }
}

#loader-box{
display:block; 
width: 100%; 
height:100vh; 
background-color: #000000;  
position: fixed; 
z-index: 2000; 
top:0;
}

.mostrar-element{
display: block;
}
.ocultar-element{
display: none;
}
.card-in-list{
height: 50px;
width: 30px;
}
.list-rivals{
max-height: 400px;
overflow: auto;
}

.list-rivals > li{
border-bottom: solid 1px silver !important;
background-color: #000;
color:#fff;
}

.item-name-center{
display: flex;
justify-content: center;
align-items: center;
}

#imgattack {
      display: none;
        width: 200px;
        height: 200px;
        animation: sprite 1s steps(9) infinite;
        background-size: 200px 2000px;
        top: 100px;
        background-repeat : no-repeat;
        background-image: url('img/attack-cards/Guadana.png'); 
        background-position: center;
       /*border: solid #fff;*/

    }
  @keyframes sprite {
    from { background-position: 0 0%; }
    to { background-position: 0 100%; }
  }


.progress-bar{
width: 100%;
height: 20px;
background-color: #eee;
border-radius: 20px;
margin-bottom: -20px;
display: none;
  
}

.progress-done{
width: 0;
background: linear-gradient(to left, #06ff06,#ff1919);
height: 20px;
border-radius: 20px;
display: flex;
color: #fff;
font-weight: 600;
justify-content: center;
align-items: center;
transition: 1s ease 0.3;
}

.winner-fill{
position: absolute; 
background-color:#433a3ad1;
width: 100%; 
height: 100%;
top:0;
left: 0;
border-radius:10px;
display: none;
}
.text-winner{
font-family:"Katahdin";
font-size: 20px;
color: white;
text-shadow: #856404 -1px 0px 5px;
}
.name-winner{
font-family: "Oswald", sans-serif;
font-style: italic;
font-size: 30px;
color: gold;
}

.battle-info{
border:solid #fff 1px; 
border-radius: 5px; 
height: 300px; 
overflow: auto; 
padding: 10px; 
color: #fff;
font-family:"Printed";
font-size:0.65em;


}

.battle-info > p > b {
  font-family:"Oswald",italic ;
  font-size: 1.3em;
}

.out-battle-btn{
border-radius: 50% !important;
}


.switch {
      position: relative;
      display: inline-block;
      margin: 0 5px;
    }

    .switch > span {
      position: absolute;
      top: 10px;
      pointer-events: none;
      font-family: 'Helvetica', Arial, sans-serif;
      font-weight: bold;
      font-size: 12px;
      text-transform: uppercase;
      text-shadow: 0 1px 0 rgba(0, 0, 0, .06);
      width: 50%;
      text-align: center;
    }

    input.check-toggle-round-flat:checked ~ .off {
      color: #F36F25;
    }

    input.check-toggle-round-flat:checked ~ .on {
      color: #fff;
    }

    .switch > span.on {
      left: 0;
      padding-left: 2px;
      color: #F36F25;
    }

    .switch > span.off {
      right: 0;
      padding-right: 4px;
      color: #fff;
    }

    .check-toggle {
      position: absolute;
      margin-left: -9999px;
      visibility: hidden;
    }
    .check-toggle + label {
      display: block;
      position: relative;
      cursor: pointer;
      outline: none;
      -webkit-user-select: none;
      -moz-user-select: none;
      -ms-user-select: none;
      user-select: none;
    }

    input.check-toggle-round-flat + label {
      padding: 2px;
      width: 97px;
      height: 35px;
      background-color: #F36F25;
      -webkit-border-radius: 60px;
      -moz-border-radius: 60px;
      -ms-border-radius: 60px;
      -o-border-radius: 60px;
      border-radius: 60px;
    }
    input.check-toggle-round-flat + label:before, input.check-toggle-round-flat + label:after {
      display: block;
      position: absolute;
      content: "";
    }

    input.check-toggle-round-flat + label:before {
      top: 2px;
      left: 2px;
      bottom: 2px;
      right: 2px;
      background-color: #F36F25;
      
    }
input.check-toggle-round-flat + label:after {
  top: 4px;
  left: 4px;
  bottom: 4px;
  width: 48px;
  background-color: #fff;
      -webkit-border-radius: 52px;
      -moz-border-radius: 52px;
      -ms-border-radius: 52px;
      -o-border-radius: 52px;
      border-radius: 52px;
      -webkit-transition: margin 0.2s;
      -moz-transition: margin 0.2s;
      -o-transition: margin 0.2s;
      transition: margin 0.2s;
    }

input.check-toggle-round-flat:checked + label {
}

input.check-toggle-round-flat:checked + label:after {
margin-left: 44px;
}

.error404 {
  color: rgb(249, 70, 70);
  font-size: 3em;
}

/******LINKTREE********/
.tree {
  margin: 0 auto;
  text-align: center;
  width: 100%;
  max-width: 800px;
}

/****************MEDIA QUERYES*******************/

@media (max-width: 600px) {



.float {
  display: none;
}

.floatStream {
  display: none;
}

.justify-content-center {
justify-content: space-evenly !important;
}
.bg-ivoverse{
}

.bg-blend{
  background-position-y: -27%;
}
.logo-ivoverso {
  width: 150px;
}
}