html {
    font-size: 8px !important;
}

/* @media (max-width: 800px) {
    html {
        font-size:8px !important;
    }
} */

body {
    background-image: url(grafiken/hintergrund.jpg);
    background-size: cover; /* Bild an den gesamten Bereich anpassen */
    background-position: center; /* Bild zentrieren */
    background-repeat: no-repeat; /* Wiederholung des Bildes verhindern */
    font-family: Arial, Helvetica, sans-serif;

    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
}

.obenLinks {
    position: absolute;
    top: 1rem;
    left: 1rem;
}

#start {
    font-size: 4.5rem;
}

#start1Überschrift {
    display: flex;
    justify-content: center; 
    margin: 90px;
    font-size: 4.8rem;
}

#startÜberschrift {
    display: flex;
    justify-content: center; 
    margin: 3rem;
}

#buttonPosition {
    display: flex;
    justify-content: center;
}

#startButton {
    font-size: 4.0rem;
    color: rgb(231, 232, 233);
    height: 10.0rem;
    width: 10.0rem;
    background-color: rgb(74, 135, 189);
    border-radius: 5%;
    transition: all .3s;
    cursor: pointer;
}

#startButton:hover {
    background-color: rgb(35, 97, 168);
}

#kategorie {
    font-size: 4.5rem;
}

#homeÜberschrift {
    display: flex;
    justify-content: center;
}

#auswahl {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    margin: 2.0rem;
}

.AuswahlK {
    background-color: rgb(74, 135, 189);
    color: rgb(231, 232, 233);
    width: 11.5rem;
    height: 4.5rem;
    border-radius: 10%;
    transition: .4;
    margin: 1.3rem;
    font-size: 1.4rem;
    cursor: pointer;
}

#AuswahlK:hover {
    background-color: rgb(35, 97, 168);
}

.figure-container {
    fill: transparent;
    stroke: #000000;
    stroke-width: .4rem;
    stroke-linecap: round;
    margin-top: 2rem;
  }

  #männchen {
    display: flex;
    justify-content: center;
  }


.menuP {
    position: absolute;
    top: 0;
    right: 0;
}


#buchstaben {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
}
.buchstabe {
    font-size: 3.0rem;
    background-color:rgb(74, 135, 189);
    color: rgb(231, 232, 233);
    padding: 1.2rem;
    margin: .8rem;
    margin-top: 3.0rem;
    border: solid .2rem rgb(0, 0, 0);
    border-radius: 100%;
    transition: .3s;
    cursor: pointer;
}

.buchstabe:hover {
    background-color: rgb(35, 97, 168);
}

#galgenwort {
    display: flex;
    justify-content: center;
    font-size: 3.0rem;
    margin: 4rem 0 ;
}

#buttonPosition {
    display: flex;
    justify-content: center;
}

#endeButton {
    font-size: 4.0rem;
    color: rgb(231, 232, 233);
    height: 10.0rem;
    width: 10.0rem;
    background-color: rgb(74, 135, 189);
    border-radius: 5%;
    transition: all .3s;
    cursor: pointer;
}

#endeButton:hover {
    background-color: rgb(35, 97, 168);
}

#leben {
    font-size: 3.2rem;
    position: absolute;
    top: 2.0rem;
    right: 20;
    margin: .5rem;
}

#endeSchlechtButton {
    font-size: 4rem;
    color: rgb(231, 232, 233);
    height: 10rem;
    width: 10rem;
    background-color: rgb(74, 135, 189);
    border-radius: 5%;
    transition: all .3s;
    cursor: pointer;
}

#endeSchlechtButton:hover {
    background-color: rgb(35, 97, 168);
}

#icons {
    cursor: pointer;
}

#icons2 {
    cursor: pointer;
}

#überschrift{
    display: flex;
    justify-content: center; 
    font-size: 3.2rem;
    margin: .5rem;
}

.rückgabe{
    display: flex;
    justify-content: center; 
    font-size: 3.2rem;
    margin: 5.0rem;
}

#lösungswort {
    display: flex;
    justify-content: center; 
    font-size: 3.2rem;
    margin: 6.0rem;
}

#lösungswortVerloren {
    display: flex;
    justify-content: center; 
    font-size: 3.2rem;
    margin: 6.0rem;
}


#anleitungtext {
    padding: 2rem;
}

p {
    color: rgb(48, 1, 1);
    font-size: 3rem;
}

#mname {
    font-size: 2.3rem;
}

h4 {
    color: rgb(48, 1, 1);
}