/* GLOBAL STYLING */
body {
    margin: 0;
    padding: 0;
    font-family: 'Arial', sans-serif;
    /* Mörk bakgrund som liknar en vägg */
    background-color: #222; 
    color: #fff;
    
    /* Centrerar innehållet och ser till att varningsränderna hamnar längst ner */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    min-height: 100vh;
}

/* HUVUDCONTAINER FÖR TEXTEN */
.container {
    text-align: center;
    padding: 2rem;
    flex-grow: 1; /* Tar upp tillgängligt utrymme */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* HUVUDRUBRIK (T.ex. "Bangers"-fonten) */
.graffiti-title {
    font-family: 'Bangers', cursive; /* En tjock, "comic/graffiti"-font */
    font-size: 7rem;
    line-height: 1;
    color: #FFFF00; /* Ljus, skarp gul färg */
    
    /* * HÄR ÄR NYCKELN TILL LÄSBARHET:
     * 1. En svart, skarp outline (stroke)
     * 2. En skarp, icke-suddig skugga för 3D-effekt
     */
    -webkit-text-stroke: 3px #000; /* Svart outline */
    text-shadow: 6px 6px 0px #FF00FF; /* Skarp magenta "3D"-skugga */
    
    margin: 0;
}

/* SUBTEXT (T.ex. "Permanent Marker"-fonten) */
.graffiti-tag {
    font-family: 'Permanent Marker', cursive; /* En "tagg"-liknande font */
    font-size: 2.5rem;
    color: #00FFFF; /* Ljus cyan */
    
    /* Lätt rotation för att se mer "sprayad" ut */
    transform: rotate(-4deg);
    
    /* En subtil skugga för att lyfta texten från bakgrunden */
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.7);
    margin-top: 1rem;
}

/* VARNINGSRÄNDER (Längst ner på sidan) */
.warning-stripes {
    width: 100%;
    height: 50px;
    
    /* Klassiska gul/svarta diagonala ränder */
    background-image: repeating-linear-gradient(
        45deg,
        #FFDE00, /* Gul färg */
        #FFDE00 25px,
        #000000 25px, /* Svart färg */
        #000000 50px
    );
    /* En skugga som separerar ränderna från innehållet */
    box-shadow: 0 -5px 15px rgba(0,0,0,0.5);
}


/* RESPONSIVITET FÖR MOBILA ENHETER */
@media (max-width: 768px) {
    .graffiti-title {
        font-size: 4rem;
        -webkit-text-stroke: 2px #000;
        text-shadow: 4px 4px 0px #FF00FF;
    }

    .graffiti-tag {
        font-size: 1.5rem;
    }
}

@media (max-width: 480px) {
    .graffiti-title {
        font-size: 3rem;
        -webkit-text-stroke: 1.5px #000;
        text-shadow: 2px 2px 0px #FF00FF;
    }
    
    .graffiti-tag {
        font-size: 1.2rem;
    }
    
    .warning-stripes {
        height: 30px;
    }
}