body {
    background-color: hsl(0, 0%, 95%);
    font-family: Verdana, Geneva, Tahoma, sans-serif;
    text-align: center;
    font-size: 0.75em
}

/* Stor tal-label */
#talLabel {
    font-size: 8em;
    margin: 20px 0;
}

/* Overordnede label-stile */
#Label {
    font-size: 2em;
    margin-bottom: 10px;
}

/* Forbedret countdown og vigtige labels */
#countdownLabel{
    font-size: 1.5em;
    font-weight: bold;
    color: hsl(0, 0%, 20%);
    padding: 10px;
    border: 2px solid hsl(0, 0%, 30%);
    border-radius: 10px;
    display: inline-block;
    margin: 10px 0;
    background-color: hsl(0, 0%, 90%);
}

.preview {
    font-size: 1.5em;
    font-weight: bold;
    color: hsl(0, 0%, 20%);
    border-radius: 10px;
}

/* Game over label */
#gameOverLabel {
    display: none;
    color: red;
    font-weight: bold;
    font-size: 3em;
    margin-top: 20px;
    padding: 20px;
    border: 3px solid red;
    border-radius: 10px;
    background-color: hsl(0, 100%, 90%);
    z-index: -101;
}

#completedLabel {
    display: none;
    color: hsl(130, 95%, 30%);
    font-weight: bold;
    font-size: 3em;
    margin-top: 20px;
    padding: 20px;
    border: 3px solid hsl(130, 95%, 30%);
    border-radius: 10px;
    background-color: hsl(130, 100%, 90%);
    z-index: -101;
}

/* Katastrofe label */
#katastrofeLabel {
    display: none;
    color: red;
    font-weight: bold;
    font-size: 2em;
    margin-top: 10px;
}

/* Bonus animation */
#bonusLabel {
    font-size: 2em;
    opacity: 0;
    transition: opacity 0.5s;
    color: hsl(120, 100%, 40%);
}

/* Leaderboard stil */
#leaderboard {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Placer elementerne til venstre */
    margin-top: 0; /* Fjern eventuelle top-marginer */
    padding: 0; /* Fjern padding */
    position: absolute; /* Gør containeren absolut placeret */
    top: 0; /* Placer den øverst på siden */
    left: 0; /* Placer til venstre */
    z-index: 10; /* Sørg for at containeren er øverst */
    align-items: left;
    width: 250px;
    padding: 15px;
    border: 3px solid hsl(200, 100%, 40%);
    border-radius: 10px;
    background-color: hsl(200, 100%, 95%);
    text-align: left;
    font-size: 1.2em;
    font-weight: bold;
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
    text-transform: capitalize;
    margin: 5px;
}

/* Mindre mellemrum mellem spillerne */
#leaderboard p {
    margin: 10px 0; /* Mindre margin mellem spillere */
    padding: 5px 0; /* Mindre padding */
    font-size: 1em; /* Eventuelt reducere fontstørrelse lidt */
}

#leaderboard h3 {
    text-align: center;
    margin-top: 5px;
    margin-bottom: 10px;
}

#leaderboardHeader {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 240px; /* Justér bredden efter behov */
}

#toggleLeaderboard {
    background: none;
    border: none;
    font-size: 16px;
    cursor: pointer;
    padding: 5px;
    font-size: 1.3em;
    font-weight: bold;
}


.tooltip {
    position: absolute;
    background-color: hsl(0, 0%, 20%);
    color: white;
    padding: 10px;
    border-radius: 5px;
    font-size: 1em;
    font-family: Arial, sans-serif;
    display: none; /* Skjult som standard */
    z-index: 1000;
    white-space: normal; /* Tillader linjeskift */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.2);
}
/* Knapper */
#btnContainer {
    margin-top: 20px;
}

.upgrade {
    background-color: darkgray;
    color: black;
    padding: 10px 20px;
    margin-bottom: 5px;
    border-radius: 5px;
    font-size: 1.3em;
    text-align: center;
    cursor: pointer;
    width: 200px;
    height: 45px;
    border: black solid 2px;
    transition: background-color 0.3s ease, color 0.3s ease;
}

.upgrade:disabled {
    background-color: darkgray;
    cursor: not-allowed;
}

.upgrade.can-buy {
    background-color: hsl(60, 100%, 40%);
}

.upgrade.purchased {
    background-color: hsl(120, 100%, 40%);
}

/* Større knap til Formering */
#formeringUp {
    width: 300px;
    height: 55px;
    font-size: 2em;
}

#login-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Placer elementerne til venstre */
    margin-top: 0; /* Fjern eventuelle top-marginer */
    padding: 0; /* Fjern padding */
    position: absolute; /* Gør containeren absolut placeret */
    top: 0; /* Placer den øverst på siden */
    right: 0; /* Placer til højre */
    z-index: 100; /* Sørg for at containeren er øverst */
    align-items: end;
    margin: 5px;
}

/* Container for usernameInput og playWithoutLogin knap */
#username-container {
    visibility: hidden;
    position: absolute; /* Gør containeren absolut placeret */
    display: flex;
    align-items: center;  /* Vertikal justering */
    justify-content: flex-start;  /* Lader dem være ved siden af hinanden */
    gap: 5,;  /* Plads mellem input og knap */
}

/* Juster bredden på inputfeltet og knappen */
#usernameInput {
    padding: 8px;
    width: 130px;  /* Juster efter behov */
}

#playWithoutLogin {
    padding: 8px 16px;
    background-color: #4CAF50;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#playWithoutLogin:hover {
    background-color: #45a049;
}


#logInd, #logUd {
    padding: 8px 16px;
    margin-bottom: 10px;
    background-color: hwb(218 9% 35%);
    border: solid black 1px;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
}

#logInd:hover {
    background-color: hwb(218 9% 65%);
}

#logUd {
    background-color: hwb(0 2% 32%);
}

#logUd:hover{
    background-color: hwb(0 2% 42%);
}

#username {
    color: hsl(0, 0%, 30%);
    margin-top: 10px;
}

#howToPlayLabel {
    font-size: 2em;
    background-color: antiquewhite;
    border: solid 5px black;
    border-radius: 5px;
    float: none;
    margin: 100px;
    padding: 20px;
    display: none;
}

#howToPlay {
    background-color: rgb(23, 148, 186);
    border-radius: 2.5px;
    border: none;
    
}


/* Main Menu */

#mainMenu {
    width: 100%;
    height: 100vh; /* Fylder hele skærmen */
    background-image: url('Baggrunde/Bjørnedyr.png'); /* Skift til din billedsti */
    background-size: cover; /* Sørger for at billedet dækker hele området */
    background-position: center; /* Centrerer billedet */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    color: white; /* Hvis du vil have teksten læsbar */
    text-shadow: 2px 2px 5px rgba(0, 0, 0, 0.7); /* Gør teksten mere tydelig */
}


#startGameBtn {
    background-color: hsl(120, 100%, 40%);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    font-size: 1.5em;
    cursor: pointer;
}