body {
    font-family: 'Courier New', Courier, monospace; /* Lägg till flera fallback-teckensnitt */
    background: url('../images/background4.png') no-repeat center center fixed;
    background-size: cover;
    color: #ffffff; /* Ändra textfärgen till vit */
    text-align: center;
    padding: 50px;
    text-shadow: 2px 2px 4px #000; /* Lägg till en skugga för att göra texten mer framträdande */
    position: relative; /* Lägg till position: relative för att kunna positionera den absoluta bilden */
}

.container {
    width: 99%; /* Ändra bredden till procent för att vara responsiv */
    max-width: 600px; /* Maximal bredd för containern */
    height: auto; /* Låt höjden anpassas efter innehållet */
    background-color: rgba(0, 0, 0, 0.8); /* Halvt genomskinlig svart bakgrund */
    border: 2px solid rgb(255, 255, 255);
    border-radius: 15px; /* Rundade kanter */
    margin: 0 auto; /* Centrera ramen */
    padding: 0px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2); /* Lägg till en skugga för att ge djup */
    position: relative; /* Lägg till position: relative för containern */
    z-index: 1; /* Se till att containern ligger ovanpå bakgrunden */
}
h1 {
    margin-bottom: 5px; /* Minskar avståndet under <h1> */
}


#minecraftserver {
    font-family: 'Arial', sans-serif;
    margin-bottom: 2px;
    color: yellow;
    border: 2px solid rgb(255, 255, 255); /* Ram runt texten */
    border-radius: 8px; /* Rundade kanter */
    width: 100%; /* Bredden anpassas till containern */
    max-width: 210px; /* Maximal bredd på 330px */
    padding: 5px; /* Lite padding för att ge utrymme runt texten */
    margin: 0 auto; /* Centrerar elementet */
}



#server-status {
    font-family: 'Arial Black', sans-serif;
    background-color: rgb(187, 187, 187);
    border: 2px solid rgb(255, 255, 255);
    border-radius: 8px;
    width: 220px;
    margin: 40px auto;
    text-shadow: none;
    font-weight: "bold";
}

a {
    font-family: 'Arial Black', sans-serif;
    background-color: rgba(11, 192, 87, 0.7); 
    border: 2px solid rgb(255, 255, 255);
    border-radius: 8px;
    padding: 5px;
    width: 250px;
    margin: 0 auto;
    color: #082909;
    text-decoration: none;
    font-size: 15px;
    font-weight: "bold";
    text-shadow: none;
    font-weight: "bold";
}


a:hover {
    text-decoration: underline;
}

.creeper-hole {
    position: fixed; /* Ändra till fixed för att placera bilden relativt till webbläsarfönstret */
    bottom: 10px;
    right: 10px;
    width: 100px; /* Justera storleken på bilden efter behov */
    height: auto;
    z-index: 2; /* Se till att bilden ligger ovanpå containern */
}

.copyright {
    position: fixed; /* Ändra till fixed för att placera texten relativt till webbläsarfönstret */
    bottom: 10px;
    right: 120px; /* Placera texten till vänster om bilden */
    color: #fff; /* Vit textfärg */
    font-size: 14px;
    text-shadow: 1px 1px 2px #000; /* Lägg till en skugga för att göra texten mer framträdande */
}

#reportForm textarea {
    background-color: rgba(50, 50, 50, 0.3); /* Mörkgrå med 30% genomskinlighet */
    color: white; /* Vit text */
    border: 1px solid white; /* Vit kantlinje */
    border-radius: 10px; /* Rundade hörn */
    padding: 8px;
    font-size: 16px;
    width: 80%; /* Anpassar sig till förälderelementet */
    resize: none; /* Tillåter ingen ändring av storlek */
}

#reportForm textarea::placeholder {
    color: rgba(255, 255, 255, 0.7); /* Ljusare vit för placeholder-text */
}

#reportForm button {
    font-family: 'Arial Black', sans-serif;
    background-color: rgba(11, 192, 87, 0.7); 
    border: 2px solid rgb(255, 255, 255);
    border-radius: 8px;
    padding: 5px;
    width: 150px;
    margin: 0 auto;
    color: #082909;
    text-decoration: none;
    font-size: 15px;
    font-weight: "bold";
    text-shadow: none;
    font-weight: "bold";
    cursor: pointer;
    transition: background-color 0.3s, color 0.3s;
}

#reportForm button:hover {
    background-color: darkgreen; /* Mörkare grön vid hover */
    color: white; /* Vit text vid hover */
}