/*fontz*/
    @font-face {

        font-family: 'Aftershock';
        src: url('https://wtfghetto.madhammer.club/fontz/AFTERSHOCK.TTF') format('truetype');
        font-weight: normal;
        font-style: normal;
    }
        @font-face {

        font-family: 'Vipnagogialla';
        src: url('https://wtfghetto.madhammer.club/fontz/VIPNAGORGIALLARG.OTF') format('opentype');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {

        font-family: 'Reactor7';
        src: url('https://wtfghetto.madhammer.club/fontz/Reactor7.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'SEGASONIC';
        src: url('https://wtfghetto.madhammer.club/fontz/NiseSegaSonic.TTF');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'EBF';
        src: url('https://wtfghetto.madhammer.club/fontz/Cretino.otf');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'SONIC3';
        src: url('https://wtfghetto.madhammer.club/fontz/ANDES_.TTF');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'MM9';
        src: url('https://wtfghetto.madhammer.club/fontz/MMROCK9.TTF');
        font-weight: normal;
        font-style: normal;
    }
    @font-face {
        font-family: 'Chrono';
        src: url('https://wtfghetto.madhammer.club/fontz/ChronoType.otf');
        font-weight: normal;
        font-style: normal;
    }
    /*page specific*/

    body {

        background-image: url('https://wtfghetto.madhammer.club/images/1700400407491631.png');
        background-color: #000000;
        background-size: 100% 100%; 
        background-repeat: no-repeat;

        cursor: url('https://wtfghetto.madhammer.club/images/cursors/kBladeWeak.png') 0 0, pointer;

        font-family: 'SEGASONIC', 'Courier New', Courier, monospace;
        -webkit-font-smoothing : none;

        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;

        margin: 0px;
        padding: 0px;
        image-rendering: pixelated;
        
    }

    body.about {

        background-image: url('https://wtfghetto.madhammer.club/images/sweetasfuck3.png');
        background-color: #000000;
        background-size: 100% 100%; 
        background-repeat: no-repeat;

        cursor: url('images/cursors/megamanstand.png') 0 0, pointer;

        font-family: 'SEGASONIC', 'Courier New', Courier, monospace;
        -webkit-font-smoothing : none;

        display: flex;
        flex-direction: column;
        justify-content: flex-start;
        align-items: center;

        margin: 0;
        padding: 0;
        image-rendering: pixelated;
        
    }
    /*page specific*/

    .wrapperTop {
        display: flex;
        flex-direction:column;
	    height: 45px;
        width: 1002px;
	    background-image: url('https://wtfghetto.madhammer.club/images/wrapperTopText.png');
	    background-repeat: repeat-x;
        z-index: 2;
    }
        .wrapperTop.about{
        display: flex;
        flex-direction:column;
	    height: 45px;
        width: 1002px;
	    background-image: url('https://wtfghetto.madhammer.club/images/wrapperTopText2.png');
	    background-repeat: repeat-x;
        z-index: 2;
    }
    /*page specific*/

    .wrapper {

        padding: 20px;
        box-sizing: border-box;
        display: flex;
        justify-content: space-between;
        align-items: flex-start;
        width: 1002px; /*used to be 1500 from rev*/ 
        height: 175vh; /*ALSO CHANGE FOR SITE HEIGHT*/
        box-shadow: 
            -40px 0 60px -20px rgb(0, 0, 0), /* Left shadow */
            40px 0 60px -20px rgb(0, 0, 0);  /* Right shadow */
        /* the order of this matters, its creating the layers used for the background of this div */
        background: 

        linear-gradient(rgba(0,16,255,1) 0%, rgba(0,0,0,0) 6%,  rgba(0,0,0,0) 40%, rgba(0,0,0,0) 93%,  rgba(0,0,0,0) 6%, rgb(255, 0, 0) 100%),
        url('https://wtfghetto.madhammer.club/images/code.gif'), 
        url('https://wtfghetto.madhammer.club/images/starz.png'); 
        
        /* each chunk seperated by a comma controls one of the three layers */
        background-size: cover, 500px, 100px;
        background-repeat: no-repeat, repeat, repeat;
        background-position: top, center, center;
        z-index: 1;
    }
    /*page specific*/

    .ghettobar {
	    display: flex;
        flex-direction:column;
        width: 100%;
	    height: 9px;
	    background-image: url('https://wtfghetto.madhammer.club/images/ghettobar.png');
	    background-repeat: repeat-x;
        pointer-events: none;
    }
    /*page specific*/

    .segment {
        font-size: 14px;
        line-height: 1.5;
        margin-top: 40px;
        margin-bottom: 0px;
        padding: 0px;
        background-color: rgb(41, 37, 43);
        background-image: url('https://wtfghetto.madhammer.club/images/darkTile2.png');
        color: #ffee00;
        /*text-decoration: underline;
        text-underline-offset: 5px;*/

        /*border-radius: 8px;*/

    }

    .wrapperBottom {
        display: flex;
        flex-direction:column;
	    height: 28px;
        width: 1002px;
	    background-image: url('https://wtfghetto.madhammer.club/images/wrapperBottom.png');
	    background-repeat: repeat-x;
        pointer-events: none;
        z-index: 2;
    }

    #musicTech {

        position: fixed; /* Fix the container to the screen */
        left: 0px; /* Stick the container to the left side */
        top: 0px; /* Position the container at the top */
        z-index: 9999; /* Make sure it's above other content */
        margin: 0px;
        padding: 0px;
    }

    .musicTech {    /* 237x223*/
        position: relative;
        background-repeat: no-repeat;
        background-position: center;
        background-size: cover;
        /*border: 5px solid #ff0000;*/
        max-width: 237px;
        font-size: 18px;
        font-family: "Reactor7";
        height: 36px;
        pointer-events: none;
        white-space: nowrap; 

        z-index: 9999; /*this puts stuff above other stuff*/
        text-decoration: underline;
        
    /* Glowing blue text */
	
        color: #ffffff; /* Blue text */
        text-shadow: 0 0 2px #da007f, 0 0 2px #da007f, 0 0 2px #da007f, 0 0 2px #da007f, 0 0 2px #da007f, 0 0 2px #da007f, 0 0 2px #da007f, 0 0 2px #da007f;
	    text-underline-offset: 5px;

    
        /* Container setup */
        overflow: hidden; /* Hide the overflowed text */
        box-sizing: border-box; /* Set relative positioning for the text inside */

    }

    /* Scroll container */
    .musicTech .scroll-wrapper {
    display: flex;
    position: absolute;
    animation: scroll-left 22s linear infinite; /* 5s duration for each cycle */

}

/* The scrolling text */
    .musicTech .scroll-text {
    white-space: nowrap;
    padding-right: 200%;
    z-index: 4;
}

@keyframes scroll-left {
    0% {
        transform: translateX(100%); /* Start from off-screen right */
    }
    100% {
        transform: translateX(-100%); /* End off-screen left */
    }
}

    #musicUi {

        position: fixed;
        left: 0px;
        top: 0px;
        width: auto;
        height: auto;
        pointer-events: none;
        z-index: 3;
    }
    #autoplay-overlay {
    position: fixed;
    top: 0px;
    left: 0px;
    width: auto;
    height: auto;
    z-index: 9999;
    pointer-events: none;
    transition: all 2.6s ease;
    }

    .disintegrate {
    transform: scale(1.2) rotate(5deg);
    filter: blur(10px) brightness(2);
    opacity: 0;
    }

    #cogImage {
        transition: transform 1.1s ease;
    }

    .button4music {
        position: fixed;
        top: 0px;
        left: 347.5px;
        padding: 10px, 20px;
        cursor: pointer;
        z-index: 1000; /*this puts stuff above other stuff*/
        pointer-events: all;

    }
#volume-slider {
    position: fixed;
    top: 24px;
    left: 340.5px;
    width: 211px;
    height: 24px;
    -webkit-appearance: none;
    background: transparent;
    z-index: 1000;
    pointer-events: all;
}

/* Sparkster as the thumb */
#volume-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    background: url('https://wtfghetto.madhammer.club/images/sparkster.png') no-repeat center;
    background-size: contain;
    width: 56px;
    height: 44px;
    border: none;
    cursor: pointer;
}

#volume-slider::-moz-range-thumb {
    background: url('https://wtfghetto.madhammer.club/images/sparkster.png') no-repeat center;
    background-size: contain;
    width: 56px;
    height: 44px;
    border: none;
    cursor: pointer;
}

/* Goomba at the end */
#volume-cap {
    position: fixed;
    top: 24px;
    left: 559.5px; /* 340.5 + 211 + 8 spacing */
    height: 24px;
    pointer-events: none;
}

#volume-slider::-webkit-slider-runnable-track {
    background: #888;
    height: 4px;
    border-radius: 2px;
}

#volume-slider::-moz-range-track {
    background: #888;
    height: 4px;
    border-radius: 2px;
}


    #play-tunez-btn:hover {
        background-color: #cc0000;
    }

    audio {
        display: none; /* Hide the audio player */
    }

    .logo {

        width: auto;
        height: auto;
        display: block;
        margin-left: auto;
        margin-right: auto;
        padding: 0%;
        margin: 0%;

    }

        #chainTop {
        position: fixed;
        left: 0px;
        top: 0px;
        width: 100%;    
        height: auto;        
        pointer-events: none;   
        z-index: 3;  
    }

    #chainTop img {
        width: 100%;          
        height: auto;            
        object-fit: cover;   
    }   

    #chainBottom {
        position: fixed;
        left: 0px;
        bottom: 0px;
        width: 100%;    
        height: auto;        
        pointer-events: none; 
        z-index: 3;    

    }    
    
    #chainBottom img {
        width: 100%;          
        height: auto;            
        object-fit: cover;  

    }

    #blackGradiant {
        position: fixed;
        width: 100%;
        bottom:0px;
        pointer-events: none;
        z-index: 0;
    }

    #blackGradiant img {
        width: 100%;
        position: bottom;
        display: block;
        float: left;
    }
/* border stuff around teh warpper. hopefully this isnt too unoptmised LOL*/


/* Make the page-view-tally part of the flex layout */
.page-view-tally {
    margin-top: 80px; /* Adjust this for vertical spacing KEEP AS 92*/
    margin-right: 1.5%;
    width: 12%;
    height: auto;
    display: block;
    flex-shrink: 0; /* Prevent shrinking */
}

    #stickers_envelope {
        margin-right: 1.5%;
        margin-top: 80px;
        width: 12%;
        height: 100%;
        display: block;
        float: left;

    }

    .content {

        flex-grow: 1;
        margin: 0 15px; /* KEEP SECOND THING AS 20*/
        overflow-y: auto;
        height: 180vh; /*CHANGE FOR SITE HEIGHT*/

    }

    .content h2 {

        text-align: center;
        font-size: 1.5em;
        background: linear-gradient(
            to right,
            transparent 0%,
            rgba(128, 0, 0, 0.4) 50%,
            transparent 100%
        );
    }
    .segmentwrapper
    {
        padding-top: 40px;
    }

    .fix-stroke {
   paint-order: stroke fill;
}
/*RED FLASH THAT HAPPENS WHEN NUKE GOES OFF*/
#red-flash {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100vw;
    height: 100vh;
    background: red;
    opacity: 0.9;
    z-index: 99999;
    display: none;
}
/*THIS IS FOR DA UPDATES*/
    #news-window {
      width: 133px;
      height: 300px;
      box-sizing: border-box;
      border: 1px solid #cc00ff;
      padding: 8px;
      font-family: "Reactor7";
      font-size: 18px;
      overflow-y: scroll; /* always show vertical scrollbar */
      overflow-x: hidden; /* hide horizontal scrollbar */
      background-color: #000000;
      color: #ffffff;
    }

    #news-window p {
      border-bottom: 1px solid #ccc; /* underline between posts */
      margin: 0 0 8px 0; /* space below each post */
      padding-bottom: 4px;
    }

    #news-window p:last-child {
      border-bottom: none; /* no underline after last post */
    }
    
/*VISITED LINKS TURN INTO THIS COLOUR*/
    a:link {
  color: rgb(0, 255, 34);
  background-color: transparent;
  text-decoration: none;
    }
    a:visited {
  color: rgb(14, 179, 152);
  background-color: transparent;
  text-decoration: none;
    }
/*da stamps will RAISE*/
/* Initial stamp style */
.stamp {
    transition: all 0.3s ease; /* Smooth transition for all properties */
}

/* Hover effect */
.stamp:hover {
    filter: brightness(150%); /* Make it 50% brighter */
    transform: translateY(-2px); /* Slide up by 2px */
    cursor: url('https://wtfghetto.madhammer.club/images/cursors/NUKEDROP.png'), pointer;
}

#musicVisualizerBox {
  position: fixed;
  top: 0px;
  right: 0px;
  width: 388px;
  height: 445px;
  z-index: 10; /* BELOW all your .musicTech and musicUi */
  pointer-events: none;
  overflow: hidden;
}

#musicVisualizerCanvas {
  width: 100%;
  height: 100%;
  display: block;
}
    #visualizerUI {

        position: fixed; /* Fix the container to the screen */
        right: 0px; /* Stick the container to the left side */
        top: 0px; /* Position the container at the top */
        z-index: 1; /* Make sure it's above other content */
        margin: 0px;
        padding: 0px;
    }
#musicVisualizerCanvas, #visualizerUI, #musicUi {
  will-change: transform, opacity;
}


.overlay {
    position: fixed;
    top: 0px;
    left: 0px;
    width: 100%;      /* Ensure it covers the full width */
    height: 100vh;
    background-color: rgba(0, 0, 0, 1);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 999999; /* Make sure it’s on top of everything */
    opacity: 1;
    transition: opacity 1.6s ease-in-out;
}

#overlay img {
    max-width: 100%;
    max-height: 100%;
       cursor: url('https://wtfghetto.madhammer.club/images/cursors/crosshair1.png')12 0, pointer;
}