:root{
    --brandcolor: #101142;
    --hotpink: #FF0066;
    --red:#FF0000;
    --orange: #FF7400;
    --yellow: #FFC100;
    --white: #fff;
    --black: #000;
    --silver: #d8d8d8;
    --pr-color: #fff;
    --second-color: #0a0a0a;
    --cubicbz: cubic-bezier(.9, 0, .1, 1);
    font-size: 10px;
}

.battle{
    display:flex;
    flex-direction: column;
    width: 100%;
    height: 100%;
    justify-content: center;
    align-items: center;
    overflow: hidden;
    position: relative;
    margin: 5em auto 2em;
    box-shadow: 0 .5em 1em rgba(0,0,0,0.15);
    border-radius: 4em;
}
.warriors {
    display:flex;
    width: 100%;
    height: 5em;
    justify-content: center;
    align-items: center;
    margin-top: 5em;
}
.artist-row {
    display: flex;
    flex-direction:column;
    justify-content: center;
    /* transform: translateY(150%); */
    transition: .6s;
    height: 20vh;
    width: 100%;
    overflow:hidden;
    opacity: 1;
    margin:5em 0 0;
    position: relative;
    background: transparent;
}
.column {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 30vh;
    background: none;
    position: absolute;
}
.artist-row-3 .column, .artist-row-1 .column, .artist-row-2 .column{
    top: -1rem;
    left: -1rem;
}
.warriors-dropdown {
    height: 30vh;
    width: calc(80%/3);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    overflow:hidden;
    background: inherit;
    background: transparent;
}
.warriors-dropdown h5 {
    display: flex;
    margin-bottom: -5em;
}
.battle h2 {
    position: absolute;
    top: 3rem;
}
.battle-left, .battle-right {
    height: 100%;
    width: 40%;
    display: flex;
    justify-content: center;
    align-items: center;
}
.artist-row-1,.artist-row-2,.artist-row-3 {
    position: relative;
}
.previous-warrior-1,.next-warrior-1,.previous-warrior-2,.next-warrior-2,.previous-warrior-3,.next-warrior-3 {
    position: absolute;
    z-index: 11;
    width: 4rem;
    background: black;
    color: white;
    border: none;
    border-radius: .2rem .2rem;
    cursor: pointer;
    transition: .2s;
}
.artist-row button:hover {
    background-color: orange;
    color: black;
    border: 1px solid black;
}
.previous-warrior-1, .previous-warrior-2,.previous-warrior-3{
    left:1em;
    top: 0;
    padding:0 4.5em 0 .5em;
    text-align: center;
}
.next-warrior-1,.next-warrior-2,.next-warrior-3{
    right: 1em;
    top: 0
} 
.artist-row .column {
    display: none; /* Hide all columns initially */
}
.artist-row .column:first-child {
    display: flex; /* Show the first column */
}
.battlefield{
    height: 20vh;
    width: 100%;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}
.enlarged-column {
    width: 5em;
    height: 5em;/* Enlarge the column */
    display: flex;
    transform-origin: center;
    align-items: center;/* Ensure it scales from its center */
    position: relative;
    border-radius: 50%;
}
.enlarged-column img {
    width: 60%;
    height: 60%;
    border-radius: 50%;
    object-fit: cover;
    cursor: pointer;
    transition: .2s;
}
.battle-left img:hover {
    border: .5rem solid black;
    box-shadow: 
    0 0 1rem blue,
    0 0 1rem blue
    ;
    transform: scale(1.2);
}
.battle-right img:hover {
    border: .5rem solid black;
    box-shadow: 
    0 0 1rem crimson,
    0 0 1rem crimson
    ;
    transform: scale(1.2);
}
.control-buttons {
    position: absolute;
    top: 2em;
    height: 5vh;
    width: 60%;
    display: flex;
    justify-content: space-evenly;
    z-index: 10040;
}
.reset-button:hover{
    color: white;
    background: black;
    font-weight: 800;
    text-transform: uppercase;
}
.start-battle:hover{
    background: var(--yellow);
    color: var(--brandcolor);
    font-weight: 800;
}
button {
    cursor: pointer;
    z-index: 10000;
}
.battle-result {
    position: absolute;
    bottom: 0;
    left: 0;
    background: rgba(255,255,255,.9);
    width: 100%;
    z-index: 10030 !important;
    height: 100%;
    display: none;
}
.battle-result p {
    font-size: 2rem;
    display: flex;
    width: 100%;
    justify-content: center;
    transition: 2s;
    background: rgba(255,255,255,.8);
}
.start-battle, .reset-button, .see-results {
   width: 11rem;
   border-radius: 1rem;
   border: 2px solid black;
}
.start-battle {
    border: 2px solid var(--yellow);
    background: var(--brandcolor);
    color: var(--yellow);
    width: 13rem;
}
.see-results:hover {
    background: var(--hotpink);
    color: #fff;
    font-weight: 800;
    text-transform: uppercase;
}
footer{
    height: 5vh;
}
.toggle-switch {
    z-index: 10036 !important;
}
.battle svg {
    position: absolute;
    z-index: 0;
    width: 40%;
    opacity: .5;
}
body{
    display: flex;
    justify-content: center;
    align-items: center;
}
.st2{
    fill:none;stroke:rgb(214, 183, 7);
    stroke-linejoin:round;
    stroke-dasharray: 144;
    stroke-dashoffset: -144;
    animation: draw2 2s 1s infinite alternate both;
}
#BG {
    fill:none;
    stroke-linejoin:round;
    stroke-dasharray: 677;
    stroke-dashoffset: -677;
    animation: draw1 4s infinite both;
}
@keyframes draw1{
    from{
        stroke-dashoffset: 600;
    }
    to{
        stroke-dashoffset: 0;
    }
}

@keyframes draw2{
    from{
        stroke-dashoffset: 600;
    }
    to{
        stroke-dashoffset: 0;
    }
}
.xs-logo {
    width: 2rem;
    height: 2rem;
}
@media screen and (max-width: 768px) {
    .enlarged-column{
        width: 11rem !important;
        height: 11rem !important;
        margin-top: -10rem;
    }
    .battle-result p {
        justify-content: center;
    }
}
/* ---------------*/
.column {
    display: flex;
    width: 100%;
    height:100%;
    padding: 0 1rem;
    z-index: 10;
  }
  /* Style the images inside the grid */
  .artist-row img {
    opacity: 0.7; 
    cursor: pointer; 
    transition: .25s;
    height: 11em;
    width: 11em;
    z-index: 10;
    border-radius: 50%;
    object-fit: cover;
  }
  .artist-row img:hover {
    opacity: 1;
    box-shadow: 
    0 0 10px var(--black),
    0 0 12px var(--black)
    ;
  }
  .artist-row img:active {
    filter: brightness(1);
  }
  /* Clear floats after the columns */
  .row:after {
    content: "";
    display: table;
    clear: both;
  }
  
  /* The expanding image container */
  .container {
  display: none;
  transition: .6s;
  position: fixed;
  z-index: 10033 !important;
  left: 0;
  top: 0;
  width: 130%;
  height: 100%;
  background-color: rgba(0,0,0,0.9);
  /* transform:translateY(-100%); */
  }