body{
    background-color: black;
    background-image: url(images/dark_grunge_texture_background.jpg);
    background-size: contain;
    padding: 5px 10px;
    font-family: "Play";
    margin: auto;
    color:#ffffff;
}

a{
    color: #00d6b3;
    text-decoration: none;
}
a:hover{
    text-decoration: underline;
}


/* FEATURED CHARACTER */

#featcontainer {
    display: flex;
    position: absolute;

    width: 200px;
    height: 800px;

    left: 0;
    top: 0;
}

#featbg{
    height: 750px;
    width: 200px;
    position: absolute;
    margin-top: 45px;
    margin-left: 1305px;
    z-index: -1;
    -webkit-mask-image: linear-gradient(to bottom, black 70%, transparent 100%);
    mask-image: linear-gradient(to bottom, black 50%, black 10%, transparent 100%);
}

#chpic{
    position: absolute;
    margin-top: 45px;
    margin-left: 1305px;
    z-index: 1;
    height: 750px;
        filter: drop-shadow(2px 0px 0px #86004a) 
          drop-shadow(-2px 0px 0px #00856f) 
          drop-shadow(0px 3px 0px #86004a) 
          drop-shadow(0px -3px 0px #00856f);
}
#feat{
    position: static;
    margin-top: 90px;
    margin-left: 1510px;
    z-index: 1;
    flex-shrink: 0;
    flex-basis: auto;
    writing-mode: vertical-rl;
    text-orientation: upright;
    font-family: "Asimovian";
    letter-spacing: -5px;
    font-size: 30px;
     filter: drop-shadow(2px 0px 0px #86004a) 
          drop-shadow(-2px 0px 0px #00856f) 
          drop-shadow(0px 3px 0px #86004a) 
          drop-shadow(0px -3px 0px #00856f)
}



/* NAVIGATIONNNN */
#homelink{
    color: white;
    text-decoration: none;
}

#navtitle{
    background: linear-gradient(#86004a, #5c1b91, #00856f );
    font-size: 20px;
}

nav{
    position: absolute;
    margin-left: 0px;
    top: 25px;
    text-align: right;
    font-size: 20px;
    height: 470px;
    width: 325px;

    mask-composite: intersect;
    mask-image: linear-gradient(to top, transparent, black 10%),
                linear-gradient(to right, transparent, black 25%);
    background: linear-gradient(#7c0637, #3c1652, #470329, #0000);
    border-right: solid #86004a;
    border-top: solid #86004a;
    border-radius: 0 10px 0 0;
    padding: 0px;
    display: block;

}

ul{
    list-style-type: none;
    padding: 0;
    margin: 0; 
}
li{
    border-bottom: 1px solid #86004a;
    padding: 5px;
}



#cd{
    position: absolute;
    height: 60px;
    margin-top: 400px;
    margin-left: 25px;
    filter: saturate(1.5);
    filter: drop-shadow(2px 0px 0px #000000) 
          drop-shadow(-2px 0px 0px #000000) 
          drop-shadow(0px 3px 0px #86004a) 
          drop-shadow(0px -3px 0px #00856f);
    z-index: 1;
}


/* MUSIC PLAYERRRR */
.player-container {
    position: absolute;
    mask-composite: intersect;
    background: linear-gradient(#00a589, #8b7141, #86004ab2);
    mask-image: linear-gradient(to top, transparent, black 10%),
                linear-gradient(to left, transparent, black 10%);
    padding: 15px;
    border-top: 4px solid #86004a;
    border-left: 2px solid #86004a;
    border-radius: 45px 0 0 0;
    text-align: center;
    width: 255px;
    height: 375px;
    margin-left: 42px;
    margin-top: 435px;
   
}

.album-art {
    background-image: url(https://i.scdn.co/image/ab67616d00001e0285270a0d79648e867c206379);
    background-size: contain;
    width: 210px;
    height: 150px;
    border: solid #00d6b3;
    border-radius: 40px;
    margin: 0 auto 20px auto;
    display: flex;
    justify-content: center;
    align-items: center;
}

.track-title {
    font-size: 1.4rem;
    color: #ffffff;
    margin: 0 0 5px 0;
    filter: drop-shadow(2px 0px 0px #000000) 
          drop-shadow(-2px 0px 0px #000000) 
          drop-shadow(0px 3px 0px #af0864) 
        drop-shadow(0px -3px 0px #0aa08c);
}

.artist-name {
    font-size: 1rem;
    color: #ffeffa;
    margin: 0 0 25px 0;
    filter: drop-shadow(2px 0px 0px #000000) 
          drop-shadow(-2px 0px 0px #000000) 
          drop-shadow(0px 3px 0px #af0864) 
        drop-shadow(0px -3px 0px #0aa08c);
}

audio {
    width: 250px;
    align-items: center;
    outline: black;
    padding-right: 5px;
    filter: 
        invert(1) hue-rotate(180deg)
        drop-shadow(2px 0px 0px #f8c455) 
        drop-shadow(-2px 0px 0px #380688) 
        drop-shadow(0px 3px 0px #af0864) 
        drop-shadow(0px -3px 0px #0aa08c);
}





/* the circlessssss*/

.circlecontainer{
    display: flex;
    margin-left: 350px;
    margin-right: 500px;
    margin-top: 50px;
    max-width: fit-content;
}

.circle{
    display: flex;
    flex-direction: row;
    border: solid;
    border-color: #86004a;
    border-radius: 50%;
    height: 350px;
    width: 400px;
    background: 
    radial-gradient(circle at 35% 35%, #86004a 0%, #051a1d99 55%, #00d6b3 80%),
    /* grid lines */
    repeating-linear-gradient(55deg, transparent, transparent 20px, #ffffff 25px),
    repeating-linear-gradient(180deg, transparent, transparent 20px, #ffffff 25px),
    #86004a;
    transform-style: preserve-3d;
    box-shadow: 0 10px 20px -10px #86004a;
    transition: all 0.3s ease;
    animation: moveUpDown 2.5s infinite alternate ease-in-out;

    position: relative;
    overflow: hidden;
}
.circle:hover{
    background-color: #ffe48c;
    color: #ffdc6b;
}
.circle::before {
    content: "";
    position: absolute;
    inset: -10%;

    border-radius: 50%;

    background:
    radial-gradient(circle at 35% 35%, #86004a 0%, #051a1d99 55%, #00d6b3 80%),        repeating-linear-gradient(
            55deg,
            transparent 0px,
            transparent 20px,
            rgba(255,255,255,0.6) 21px,
            rgba(255,255,255,0.6) 24px,
            transparent 25px
        ),
        repeating-linear-gradient(
            180deg,
            transparent 0px,
            transparent 20px,
            rgba(255,255,255,0.6) 21px,
            rgba(255,255,255,0.6) 24px,
            transparent 25px
        )#86004a; 
    animation: gridSpin 8s linear infinite;

    pointer-events: none;
}




.circle2{
    display: flex;
    flex-direction: column;
    border: solid;
    border-color: #00d6b3;
    border-radius: 50%;
    height: 310px;
    width: 350px;
    background: radial-gradient(circle at 35% 35%, #00d6b3 0%, #051a1d99 55%, #86004a 80%), 
    repeating-linear-gradient(55deg, transparent, transparent 20px, #ffffff 25px),
    repeating-linear-gradient(180deg, transparent, transparent 20px, #ffffff 25px);
    
    transform-style: preserve-3d;
    transition: all 0.3s ease;
    box-shadow: 0 10px 20px -10px #00d6b3;
    animation: moveUpDown 2.5s infinite alternate ease-in-out;

    position: relative;
    overflow: hidden;
}
.circle2::before {
    content: "";
    position: absolute;
    inset: -10%;

    border-radius: 50%;

    background:
    radial-gradient(circle at 35% 35%, #00d6b3 0%, #051a1d99 55%, #86004a 80%),
        repeating-linear-gradient(
            55deg,
            transparent 0px,
            transparent 20px,
            rgba(255,255,255,0.6) 21px,
            rgba(255,255,255,0.6) 24px,
            transparent 25px
        ),
        repeating-linear-gradient(
            180deg,
            transparent 0px,
            transparent 20px,
            rgba(255,255,255,0.6) 21px,
            rgba(255,255,255,0.6) 24px,
            transparent 25px
        )#00d6b3; 
    animation: gridSpin 8s linear infinite;

    pointer-events: none;
}


@keyframes gridSpin {
    from {
        transform: translateX(0);
    }

    to {
        transform: translateX(-50px);
    }
}
@keyframes moveUpDown{
    0% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(-10px);
  }
}
@keyframes globeGrid {
    0% {
        transform: scaleX(1) translateX(0);
    }
    25% {
        transform: scaleX(0.85) translateX(-10px);
    }
    50% {
        transform: scaleX(1) translateX(0);
    }
    75% {
        transform: scaleX(0.85) translateX(10px);
    }
    100% {
        transform: scaleX(1) translateX(0);
    }
}


/* the circlessssss END*/


#stargif{
    display: flex;
    height: 15px;
    width: 500px;
    align-items: center;
    margin-left: 550px;
    opacity: 50%;
    padding: 20px;
}




/* the world + character boxes */

.worldcontainer{
    display: flex;
    gap: 0px;
    margin-left: 320px;
}

#remiborder{
    border: double #00977e;
    border-radius: 10px;
    width: 500px;
    flex-shrink: 0;
    background-color: black;
}
#remititle{
    background: linear-gradient(#01a085, #0a7377, #86004a);
    margin-top: 0px;
    margin-bottom: 2px;
    text-align: center;
    font-family: "Play";
}


#wiwoborder{
    border: double#86004a;
    border-radius: 10px;
    width: 500px; 
    flex-shrink: 0;
    background-color: black;
}
#wiwotitle{
    background: linear-gradient(#a10159, #6e003d, #076b5a );
    margin-top: 0px;
    margin-bottom: 2px;
    text-align: center;
    font-family: "Play";
}

.descr{
    padding-left: 10px;
    
}

/* THE SMALL CHARACTER IMAGES */
.chimg{
    height: 100px;
    border: 2px solid #86004a;
    margin-bottom: 0px;
    transition: transform 0.3s ease-in-out;
}

.imglink{
    position: relative;
    z-index: 9999;
    pointer-events: auto;   
}
.chimg:hover{
    transform: scale(1.05); 
}


/* BACKGROUND OF THE SPHERES */
#blackbg{
    position: absolute;

    border-top: solid #6e003d;
    border-left: solid #6e003d;
    border-right: solid #6e003d;
    border-radius: 20px 20px 0 0;
    background-color: black;
    height: 100vh;
    width: 935px;
    margin-left: 355px;
    margin-right: 500px;
    margin-bottom: 50px;
    z-index: -1;
    overflow: hidden;
}









#sitecontainer{
    display: block;
    position: absolute;
    margin-left: 1570px;
    margin-top: 50px;
    border: solid #00a589;
    border-radius: 10px;
    padding: 10px;
    height: fit-content;
    width: 180px;
    background: linear-gradient(#86004a96, #000000b6, #86004a96, #0000);
    transition: transform 0.2s ease;
}
.button{
    transition: transform 0.2s ease;
}
.button:hover{
    transform: scale(1.05);
}


/* STAMPSSS */

.stampcontainer {
    width: 930px;
    overflow: hidden;
    white-space: nowrap; 
    padding: 10px 0;
    display: flex;
    margin-left: 360px;
    margin-top: 5px;
    bottom: 0;
}

.stampsmq {
    display: inline-block;
    padding-left: 0%;
    animation: scroll 20s linear infinite;
}

@keyframes scroll {
  0% { transform: translateX(0); }
  100% { transform: translateX(-50%); }
}





/* stars in bg*/
.sky {
  width: 100vw;
  height: 100vh;
  position: absolute;
  z-index: -1;
}

.stars {
  width: 2px;
  height: 2px;
  background: transparent;
  overflow: hidden;
 
 box-shadow:
    1vw 2vh #fff,
    4vw 5vh #fff,
    7vw 1vh #fff,
    10vw 7vh #fff,
    13vw 3vh #fff,
    16vw 9vh #fff,
    19vw 4vh #fff,
    22vw 1vh #fff,
    25vw 6vh #fff,
    28vw 3vh #fff,
    31vw 8vh #fff,
    34vw 2vh #fff,
    37vw 5vh #fff,
    40vw 10vh #fff,
    43vw 3vh #fff,
    46vw 7vh #fff,
    49vw 1vh #fff,
    52vw 5vh #fff,
    55vw 9vh #fff,
    58vw 3vh #fff,
    61vw 7vh #fff,
    64vw 2vh #fff,
    67vw 5vh #fff,
    70vw 1vh #fff,
    73vw 8vh #fff,
    76vw 4vh #fff,
    79vw 10vh #fff,
    82vw 2vh #fff,
    85vw 6vh #fff,
    88vw 3vh #fff,
    91vw 9vh #fff,
    94vw 1vh #fff,
    97vw 5vh #fff,

    2vw 13vh #fff,
    5vw 17vh #fff,
    8vw 11vh #fff,
    11vw 20vh #fff,
    14vw 15vh #fff,
    17vw 18vh #fff,
    20vw 12vh #fff,
    23vw 21vh #fff,
    26vw 14vh #fff,
    29vw 18vh #fff,
    32vw 11vh #fff,
    35vw 20vh #fff,
    38vw 15vh #fff,
    41vw 18vh #fff,
    44vw 12vh #fff,
    47vw 21vh #fff,
    50vw 14vh #fff,
    53vw 19vh #fff,
    56vw 11vh #fff,
    59vw 16vh #fff,
    62vw 13vh #fff,
    65vw 20vh #fff,
    68vw 15vh #fff,
    71vw 18vh #fff,
    74vw 12vh #fff,
    77vw 21vh #fff,
    80vw 14vh #fff,
    83vw 19vh #fff,
    86vw 11vh #fff,
    89vw 17vh #fff,
    92vw 13vh #fff,
    95vw 20vh #fff,
    98vw 15vh #fff,

    1vw 25vh #fff,
    4vw 29vh #fff,
    7vw 23vh #fff,
    10vw 32vh #fff,
    13vw 27vh #fff,
    16vw 30vh #fff,
    19vw 24vh #fff,
    22vw 34vh #fff,
    25vw 26vh #fff,
    28vw 31vh #fff,
    31vw 23vh #fff,
    34vw 29vh #fff,
    37vw 25vh #fff,
    40vw 33vh #fff,
    43vw 27vh #fff,
    46vw 31vh #fff,
    49vw 24vh #fff,
    52vw 35vh #fff,
    55vw 28vh #fff,
    58vw 32vh #fff,
    61vw 25vh #fff,
    64vw 30vh #fff,
    67vw 23vh #fff,
    70vw 34vh #fff,
    73vw 27vh #fff,
    76vw 31vh #fff,
    79vw 24vh #fff,
    82vw 29vh #fff,
    85vw 26vh #fff,
    88vw 33vh #fff,
    91vw 25vh #fff,
    94vw 30vh #fff,
    97vw 27vh #fff,

    2vw 37vh #fff,
    5vw 42vh #fff,
    8vw 35vh #fff,
    11vw 45vh #fff,
    14vw 39vh #fff,
    17vw 43vh #fff,
    20vw 36vh #fff,
    23vw 47vh #fff,
    26vw 40vh #fff,
    29vw 44vh #fff,
    32vw 37vh #fff,
    35vw 46vh #fff,
    38vw 41vh #fff,
    41vw 45vh #fff,
    44vw 38vh #fff,
    47vw 48vh #fff,
    50vw 40vh #fff,
    53vw 44vh #fff,
    56vw 36vh #fff,
    59vw 47vh #fff,
    62vw 41vh #fff,
    65vw 45vh #fff,
    68vw 38vh #fff,
    71vw 48vh #fff,
    74vw 40vh #fff,
    77vw 44vh #fff,
    80vw 37vh #fff,
    83vw 46vh #fff,
    86vw 42vh #fff,
    89vw 48vh #fff,
    92vw 39vh #fff,
    95vw 45vh #fff,
    98vw 41vh #fff,

    1vw 51vh #fff,
    4vw 56vh #fff,
    7vw 49vh #fff,
    10vw 54vh #fff,
    13vw 52vh #fff,
    16vw 58vh #fff,
    19vw 50vh #fff,
    22vw 55vh #fff,
    25vw 48vh #fff,
    28vw 57vh #fff,
    31vw 51vh #fff,
    34vw 59vh #fff,
    37vw 53vh #fff,
    40vw 56vh #fff,
    43vw 49vh #fff,
    46vw 58vh #fff,
    49vw 52vh #fff,
    52vw 55vh #fff,
    55vw 48vh #fff,
    58vw 59vh #fff,
    61vw 51vh #fff,
    64vw 57vh #fff,
    67vw 49vh #fff,
    70vw 54vh #fff,
    73vw 52vh #fff,
    76vw 58vh #fff,
    79vw 50vh #fff,
    82vw 55vh #fff,
    85vw 48vh #fff,
    88vw 57vh #fff,
    91vw 51vh #fff,
    94vw 59vh #fff,
    97vw 53vh #fff,

    3vw 9vh #fff,
    12vw 13vh #fff,
    18vw 2vh #fff,
    24vw 16vh #fff,
    33vw 7vh #fff,
    39vw 13vh #fff,
    48vw 18vh #fff,
    57vw 6vh #fff,
    63vw 17vh #fff,
    72vw 5vh #fff,
    81vw 13vh #fff,
    90vw 7vh #fff,
    96vw 18vh #fff,

    6vw 28vh #fff,
    15vw 33vh #fff,
    21vw 26vh #fff,
    30vw 35vh #fff,
    36vw 22vh #fff,
    45vw 37vh #fff,
    54vw 25vh #fff,
    60vw 33vh #fff,
    69vw 29vh #fff,
    78vw 36vh #fff,
    87vw 24vh #fff,
    96vw 31vh #fff,

    8vw 46vh #fff,
    17vw 38vh #fff,
    24vw 50vh #fff,
    33vw 43vh #fff,
    42vw 51vh #fff,
    51vw 38vh #fff,
    60vw 46vh #fff,
    69vw 52vh #fff,
    78vw 43vh #fff,
    87vw 50vh #fff,
    96vw 44vh #fff;

  animation: twinkle 2s infinite ease-in-out;
}


@keyframes twinkle {
  0%, 100% { opacity: 0.3; }
  50% { opacity: 1; }
}