* {
    margin: 1%;
}

@font-face {
    font-family: 'Full Pack25';
    src: url(/fonts/full_pack_2025/full\ Pack\ 2025.ttf);
}

@font-face {
    font-family: 'Neonize';
    src: url(/fonts/neonize/neonize.ttf);
}

@font-face {
    font-family: 'LEDLIGHT';
    src: url(/fonts/ledlight/LEDLIGHT.otf);
}

@font-face {
    font-family: 'Blank';
    src: url(/fonts/blank/blank-Regular.otf);
}

@keyframes crazy-shake {

  0%,
  100% {
    transform: translate(0, 0) rotate(0deg);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translate(1px, 2px);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translate(-2px, -1px);
  }
}


@keyframes rubberBand {
    from {
        transform: scale3d(1, 1, 1);
    }

    30% {
        transform: scale3d(1.25, 0.75, 1);
        rotate: 5deg;
    }

    40% {
        transform: scale3d(0.75, 1.25, 1);
        rotate: 0deg;
    }

    50% {
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        transform: scale3d(0.95, 1.05, 1);
    }

    75% {
        transform: scale3d(1.05, 0.95, 1);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}

@keyframes rubberBand2 {
    from {
        transform: scale3d(1, 1, 1);
    }

    30% {
        transform: scale3d(1.25, 0.75, 1);
        
    }

    40% {
        transform: scale3d(0.75, 1.25, 1);
       
    }

    50% {
        transform: scale3d(1.15, 0.85, 1);
    }

    65% {
        transform: scale3d(0.95, 1.05, 1);
    }

    75% {
        transform: scale3d(1.05, 0.95, 1);
    }

    to {
        transform: scale3d(1, 1, 1);
    }
}

b {
    font-size: 30px;
    font-family: 'Neonize';
}


/**/

body {
    background-color: yellow;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.title {
    font-family: 'Full Pack25';
    display: flex;
    align-items: center;
    justify-content: center;
    margin: -1%;
}

.cont {
    flex-direction: row;
    min-height: 120vh;
    display: flex;
    width: 100%;
    border: dotted 5px black;
}

.cont div {
    margin: 0.5%;
}

footer {

    overflow: hidden;
    align-items: center;
    justify-content: center;
    height: 5vh;
    width: 90%;
    border: black dotted 5px;
    display: flex;
    text-align: center;
    font-family: 'Full Pack25';
    font-size: clamp(12px, 1.5vw, 16px);
}

footer h1 {
    filter: drop-shadow(0px 3px white) drop-shadow(0 -0.5px white) drop-shadow(3px 0 white) drop-shadow(-0.5px 0 white);

}

.title h1 {
    font-size: 8vh;
    filter: drop-shadow(0px 3px white) drop-shadow(0 -0.5px white) drop-shadow(3px 0 white) drop-shadow(-0.5px 0 white);

}

.smiley10C {
    filter: drop-shadow(0px 3px white) drop-shadow(0 -0.5px white) drop-shadow(3px 0 white) drop-shadow(-0.5px 0 white);
    top: -1%;
    left: 33%;
    width: 5%;
    position: absolute;
    rotate: -20deg;
    animation-name: rubberBand;
    animation: rubberBand 3s infinite;
}

.dividers-cont {
    max-width: 100%;
}

.dividers-cont-left {
    width: 50%;
}

.dividers-cont-right {
    width: 50%;
}

#dividers-cont-m {
    width: 100%;
    display: flex;
    align-items: center;
    flex-direction: column;
}

nav {
    display: flex;
    flex-direction: column;
    padding: 5%;
    border: white 5px ridge;
    align-items: first baseline;
    background: url(/images/silver.jpg);
}

nav button {
    font-family: 'Full Pack25';
    background: none;
    border: none;
    color: white;
    filter: drop-shadow(0px 3px rgb(0, 0, 0)) drop-shadow(0 -0.5px rgb(0, 0, 0)) drop-shadow(3px 0 rgb(0, 0, 0)) drop-shadow(-0.5px 0 rgb(0, 0, 0));
  display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;

}


nav button:hover {
    font-style: italic;

}

.frame {
    border: white 5px ridge;
    width: 97%;
    height: 65%;
    font-family: 'Full Pack25';
}


.misc {
    width: 97%;
    height: 30%;
}

.chat {
    border: 5px ridge white;
    width: 96%;
    height: 65%;
}

.chatbox-title {
    width: 100%;
    position: relative;
    left: 0;
    top: 40vh;
    pointer-events: none;
    font-family: 'Neonize';
    color: white;
    filter: drop-shadow(0px 6px rgb(0, 0, 0)) drop-shadow(0 -3px rgb(0, 0, 0)) drop-shadow(6px 0 rgb(0, 0, 0)) drop-shadow(-3px 0 rgb(0, 0, 0));
}

.chatbox-title img {
    margin: -15px;
}

.active-icon {
    width: 18px;
    height: auto;
    display: none;
    filter: drop-shadow(0px 3px rgb(0, 0, 0)) drop-shadow(0 -0.5px rgb(0, 0, 0)) drop-shadow(3px 0 rgb(0, 0, 0)) drop-shadow(-0.5px 0 rgb(0, 0, 0));

}


nav button:focus .active-icon {
    display: inline-block;
}

nav button:focus {
    outline: none;
}

/*music player*/
.music-player {
    width: 95%;
    max-height: max-content;
    background: url(/images/silver.jpg);
    background-size: cover;
    border: 5px ridge #fff;
    padding: 10px;
    font-family: monospace;
    color: #fff;
}

.player-header {
    font-family: 'Full Pack25';
    text-align: center;
    font-size: 25px;
    letter-spacing: 2px;
    margin-bottom: 8px;
    filter: drop-shadow(0px 3px rgb(0, 0, 0)) drop-shadow(0 -0.5px rgb(0, 0, 0)) drop-shadow(3px 0 rgb(0, 0, 0)) drop-shadow(-0.5px 0 rgb(0, 0, 0));

}

.now-playing {
    font-size: 12px;
    text-align: center;
    margin-bottom: 6px;
    filter: drop-shadow(0px 3px rgb(0, 0, 0)) drop-shadow(0 -0.5px rgb(0, 0, 0)) drop-shadow(3px 0 rgb(0, 0, 0)) drop-shadow(-0.5px 0 rgb(0, 0, 0));

}

.controls {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 6px 0;
}

.controls button {
    background: black;
    border: 1px solid white;
    color: white;
    padding: 4px 8px;
    cursor: pointer;
}

.controls button:hover {
    background: white;
    color: black;
}

#progress {
    width: 100%;
}

.volume {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    margin-top: 6px;
}


.playlist {
    margin-top: 8px;
    max-height: 140px;
    overflow-y: auto;
    border-top: 1px solid white;
    padding-top: 6px;
    list-style: none;
    font-family: 'Full Pack25';
    filter: drop-shadow(0px 3px rgb(0, 0, 0)) drop-shadow(0 -0.5px rgb(0, 0, 0)) drop-shadow(3px 0 rgb(0, 0, 0)) drop-shadow(-0.5px 0 rgb(0, 0, 0));

}

.playlist li {
    font-size: 12px;
    cursor: pointer;
    padding: 2px 0;
}

.playlist li.active {
    color: yellow;
}

/* PROGRESS BAR (song length) */
#progress {
    -webkit-appearance: none;
    appearance: none;
    width: 100%;
    height: 8px;
    background: black;
    border: 1px solid white;
    cursor: pointer;
}

/* Chrome / Safari */
#progress::-webkit-slider-runnable-track {
    background: black;
    height: 8px;
}

#progress::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 12px;
    height: 12px;
    background: yellow;
    border: 1px solid white;
    margin-top: -2px;
}

/* Firefox */
#progress::-moz-range-track {
    background: black;
    height: 8px;
}

#progress::-moz-range-thumb {
    width: 12px;
    height: 12px;
    background: yellow;
    border: 1px solid white;
}

/* VOLUME BAR */
#volume {
    -webkit-appearance: none;
    appearance: none;
    width: 80px;
    height: 6px;
    background: black;
    border: 1px solid white;
}

/* Chrome / Safari */
#volume::-webkit-slider-runnable-track {
    background: black;
    height: 6px;
}

#volume::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 10px;
    height: 10px;
    background: yellow;
    border: 1px solid white;
    margin-top: -2px;
}

/* Firefox */
#volume::-moz-range-track {
    background: black;
    height: 6px;
}

#volume::-moz-range-thumb {
    width: 10px;
    height: 10px;
    background: yellow;
    border: 1px solid white;
}

.contact {
    background: url(/images/silver.jpg);
    border: white ridge 5px;
    font-family: 'Neonize';
    color: white;
    height: 8vh;
}

.contact h1 {
    filter: drop-shadow(0px 3px rgb(0, 0, 0)) drop-shadow(0 -0.5px rgb(0, 0, 0)) drop-shadow(3px 0 rgb(0, 0, 0)) drop-shadow(-0.5px 0 rgb(0, 0, 0));

}

.contact:hover {
    background-color: grey;
    background-image: none;
}

.logo-div {
    position: absolute;
    perspective: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    transform: scaleX(-1);
    rotate: -10deg;
    top: -40vh;
    left: 65px;
}

.logo {
    width: 200px;
    height: 200px;
    background: url(/images/IMG_0680.png);
    transform: rotateY(45deg);
    animation: rotateAnimation 1s linear infinite;

}

.logo-div2 {
    position: absolute;
    perspective: 500px;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    transform: scaleX(-1);
    rotate: 10deg;
    top: -40vh;
    right: 65px;
}

.logo2 {
    width: 200px;
    height: 200px;
    background: url(/images/IMG_0680.png);
    transform: rotateY(45deg);
    animation: rotateAnimation 1s linear infinite;

}

@keyframes rotateAnimation {
    from {
        transform: rotateY(45deg);
    }

    to {
        transform: rotateY(225deg);
    }
}

.bio {
    border: ridge 5px white;
    height: auto;
    background: url(/images/silver.jpg);
    background-size: cover;
    display: flex;
    flex-direction: column;
}

.bio-pic {
    width: 98%;
}

.bio-blurb {
    background-color: yellow;
    border: white ridge 5px;

}

.bio-blurb h1 {
    font-family: 'Blank';
    color: white;
    filter: drop-shadow(0px 3px rgb(0, 0, 0)) drop-shadow(0 -0.5px rgb(0, 0, 0)) drop-shadow(3px 0 rgb(0, 0, 0)) drop-shadow(-0.5px 0 rgb(0, 0, 0));
    font-size: 25px;
}

.bio-blurb img {
    width: 20px;
}


.tiny-timer {
    font-size: 0.6em;
    margin-left: 8px;
    opacity: 0.6;
    letter-spacing: 1px;
}

.link-blurb {
    background-color: yellow;
    border: white ridge 5px;
}


.link-blurb h1 {
    font-family: 'Blank';
    color: white;
    filter: drop-shadow(0px 3px rgb(0, 0, 0)) drop-shadow(0 -0.5px rgb(0, 0, 0)) drop-shadow(3px 0 rgb(0, 0, 0)) drop-shadow(-0.5px 0 rgb(0, 0, 0));
    font-size: 25px;
}

.link-title {
      color: white;
    filter: drop-shadow(0px 3px rgb(0, 0, 0)) drop-shadow(0 -0.5px rgb(0, 0, 0)) drop-shadow(3px 0 rgb(0, 0, 0)) drop-shadow(-0.5px 0 rgb(0, 0, 0));
        font-family: 'Neonize';
    font-size: 50px;
}


/*Contact page*/
.contact-body {
    background-color: black;
    color: white;
}

.contact-cont {
    width: 50%;
    flex-direction: column;
    display: flex;
    align-items: center;
    text-align: center;
}

.contact-header {
    display: flex;
    flex-direction: row;
}

.contact-header h1,
.contact-cont h1 {
    font-family: 'Full Pack25';
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1%;
    white-space: nowrap;
}

.contact-cont p {
    font-family: 'Blank';
    font-size: 25px;
    width: 100%;
}

.contact-cont a {
    color: yellow;
}

/*404*/

.error404-body{
    background-color: black;
    color: yellow;
}

.error404-cont h1 {
    font-family: 'Blank';
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1%;
    white-space: nowrap;
}

.error404-cont {
     animation: crazy-shake 0.5s ease-in-out infinite;
    width: 50%;
    flex-direction: column;
    display: flex;
    align-items: center;
}

.error404-cont img {
    width: 10%;
}

.socials {
    background: none;
    border: none;
  display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 8px;
    text-decoration: none;

}


.socials:hover {
    font-style: italic;

}

/*Home*/
.home-body {
background: url(/images/silver.jpg);
background-size: 100% 500%;
overflow-x: hidden;
}

.home-cont {
   
    width: auto;
    flex-direction: row;
    display: flex;
    align-items: start;
}

.shows {
    background: yellow;
    border: 5px ridge white;
    flex-direction: column;
    padding: 15px;
    display: flex;
    gap: 20px;
    width: 50vh;
    max-width: 95%;
    color: white;
}

.shows li {
    font-family: 'Blank';
    color: white;
    filter: drop-shadow(0px 3px rgb(0, 0, 0)) drop-shadow(0 -0.5px rgb(0, 0, 0)) drop-shadow(3px 0 rgb(0, 0, 0)) drop-shadow(-0.5px 0 rgb(0, 0, 0));
    font-size: 15px;
}

.show-title {
        width: 100%;
    position: relative;
    top: 5vh;
left: 50vh;
    pointer-events: none;
    font-family: 'Neonize';
    color: white;
    filter: drop-shadow(0px 6px rgb(0, 0, 0)) drop-shadow(0 -3px rgb(0, 0, 0)) drop-shadow(6px 0 rgb(0, 0, 0)) drop-shadow(-3px 0 rgb(0, 0, 0));

}


.pfp {
    border: 5px solid black;
    display: flex;
    justify-content: center;
    align-items: center;

}

.pfp img {
    width: 50vh;
    max-width: 100%;
    height: auto;
}

.myspace-bio {
    background: yellow;
    border: 5px ridge white;
    flex-direction: column;
    padding: 15px;
    display: flex;
    gap: 20px;
    width: 50vh;
    max-width: 95%;
    color: white;
}

.pfp {
  border: 5px ridge white;
    background: url(/images/silver.jpg);
    padding: 8px;
}

.pfp img {
    width: 500px;
    height: auto;
    display: block;
}

.bio-info {
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    font-family: 'Blank';
}

.bio-info p b {
        font-family: 'Blank';
    color: white;
    filter: drop-shadow(0px 3px rgb(0, 0, 0)) drop-shadow(0 -0.5px rgb(0, 0, 0)) drop-shadow(3px 0 rgb(0, 0, 0)) drop-shadow(-0.5px 0 rgb(0, 0, 0));
    font-size: 25px;
}

.blurb {
        font-family: 'Blank';
    color: white;
    filter: drop-shadow(0px 3px rgb(0, 0, 0)) drop-shadow(0 -0.5px rgb(0, 0, 0)) drop-shadow(3px 0 rgb(0, 0, 0)) drop-shadow(-0.5px 0 rgb(0, 0, 0));
    font-size: 25px;
} 

.username {
    font-family: 'Neonize';
    font-size: 32px;
    margin-bottom: 10px;
    filter: drop-shadow(0px 3px rgb(0, 0, 0)) drop-shadow(0 -0.5px rgb(0, 0, 0)) drop-shadow(3px 0 rgb(0, 0, 0)) drop-shadow(-0.5px 0 rgb(0, 0, 0));
}

.bio-text {
    margin-top: 10px;
    padding: 10px;
    background: yellow;
    color: black;
    border: 3px ridge white;
}

/*watch*/

.watch-body{
    background: black;
}

.watch-cont {   
    width: auto;
    flex-direction:column;
    display: flex;
    align-items: center;
    justify-content: center;
}

.watch-cont a {
      font-family: 'Neonize';
    color: white;
    filter: drop-shadow(0px 6px rgb(0, 0, 0)) drop-shadow(0 -3px rgb(0, 0, 0)) drop-shadow(6px 0 rgb(0, 0, 0)) drop-shadow(-3px 0 rgb(0, 0, 0));

}

.watch-cont a:active{
    color: yellow;
}

/*listen*/

.listen-body{
    background: black;
}

.listen-cont {   
    width: auto;
    flex-direction:column;
    display: flex;
    align-items: center;
    justify-content: center;
}

.listen-cont a {
      font-family: 'Neonize';
    color: white;
    filter: drop-shadow(0px 6px rgb(0, 0, 0)) drop-shadow(0 -3px rgb(0, 0, 0)) drop-shadow(6px 0 rgb(0, 0, 0)) drop-shadow(-3px 0 rgb(0, 0, 0));

}

.listen-cont a:active{
    color: yellow;
}


/*mobile sizing!!*/
@media (max-width: 800px) {
    body {
        width: 98%;
    }

    .cont {
        flex-direction: column;
    }

    footer {
        overflow-x: auto;
        flex-wrap: nowrap;
        width: 100%;
        font-size: 50%;
        overflow: auto;

    }

    .dividers-cont,
    .dividers-cont-right,
    .dividers-cont-left {
        width: 95%;
    }

    .dividers-cont-left {
        order: 2;
    }

    .dividers-cont {
        order: 1;
    }

    #dividers-cont-m {
        width: 95%;
    }

    .dividers-cont-right {
                display: flex;
        flex-direction: column;
    }


    .footertext {
        white-space: nowrap;
    }

    .smiley10C {
        display: none;
    }

    .frame {
        width: 95%;
        order: 1;
    }

    .chat {
        width: 95%;
        height: 500px;

    }


    .misc {
        width: 95%;
    }

    .chatbox-title {
    display: none;
    }

    .logo-div,
    .logo-div2 {
        display: none;
    }

    .music-player {
        overflow: scroll;
        height: 28vh;
    }

    .frame {
        height: 50vh;
    }

    .contact-cont {
        transform: scale(0.6);
        transform-origin: center;
    }

        .error404-body{
        transform: scale(0.5);
        transform-origin: center;
    }

    .home-body{
        transform: scale(0.7);
        transform-origin: center;
 
    }

    .home-cont{
               margin-top: -25vh;
        margin-bottom: -25vh;
    }

    .show-title{
        display: none;
    }

    .watch-body {
              transform: scale(0.8);
        transform-origin: center;
    }


}