/* 1) Reset */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

/* 2) Body + full viewport background */
html, body {
    width: 100%;
    height: 100%;
    overflow: hidden;
}

body {
    font-family: 'Press Start 2P', monospace;
    background: url("../images/background.png") center center no-repeat;
    background-size: cover;
    position: relative;
}

/* 3) Header at top center */
#header {
    position: absolute;
    top: 2vh;
    left: 50%;
    transform: translateX(-50%);
    text-align: center;

    font-size: 2vw;  /* same as before */
    color: #fff;
    text-shadow: 1px 1px 0 #000;
    z-index: 9999;
}

/* 4) Container takes entire screen */
#container {
    position: relative;
    width: 100%;
    height: 100%;
}

/* 5) Big butt (visual only) - pointer-events none to ignore clicks */
#butt {
    position: absolute;
    left: 65%;
    top: 50%;
    transform: translate(-50%, -50%);
  
    width: 90vw; /* same big butt as before */
    height: auto;
    
    pointer-events: none;  /* <--- no clicks here! */
    image-rendering: pixelated;
}

/* --- NEW: the smaller hotspot for clicks (about 20% butt size, centered) --- */
#buttHotspot {
    position: absolute;
    /* Position it the same as #butt, but narrower. 
       We'll center it horizontally: left=65%, top=50%. */
    left: 65%;
    top: 50%;
    transform: translate(-50%, -50%);

    /* If butt is 90vw wide, 20% of that is ~18vw.
       We can do ~18vw wide x some fraction for height. 
       Let's guess 18vw x 25vw for a rectangular center area. 
       Adjust as needed! */
    width: 18vw;
    height: 25vw;

    cursor: pointer;
    z-index: 10; /* so it's on top of the butt image */
    /* For testing:
       background: rgba(255, 0, 0, 0.2);
       Remove or keep at 0 so user doesn't see it in final. */
}

/* 6) Bigger fart (no changes) */
#fart {
    position: absolute;
    left: 62%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    width: 50vw;
    height: auto;

    opacity: 0;
    pointer-events: none;
    transition: left 1s linear, opacity 1s linear, transform 1s linear;
    image-rendering: pixelated;
}

/* 7) "PUMP!" text (no changes) */
#pump {
    position: absolute;
    left: 52%;
    top: 50%;
    transform: translate(-50%, -50%);
    
    font-size: 3vw;
    color: #000;
    text-shadow: 2px 2px 0 #fff;

    opacity: 0;
    pointer-events: none;
    transition: opacity 0.4s, transform 0.4s;
}

/* Pump link style */
.pump-link {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}

/* Twitter link style */
.twitter-link {
    color: #fff;
    text-decoration: none;
    font-weight: bold;
}

.twitter-link:hover {
    color: #fff;
    text-decoration: none;
}