body, html {
    height: 100%;
    margin: 0;
}

* {
    box-sizing: border-box;
}

.bg {
    background-image: url(../img/start_image.png);
    height: 100%;
    background-position: center;
    background-repeat: no-repeat;
    background-size: cover;
}

@font-face {
    font-family: 'Macondo'; /* Name, den du der Schrift gibst */
    src: url('../font/Macondo,Prompt/Macondo/Macondo-Regular.ttf') format('ttf'); /* Pfad zu deiner Schriftdatei */
    font-weight: normal; /* oder z.B. 700 für Fett */
    font-style: normal; /* oder z.B. italic */
}

.game_name {
    position: absolute;
    width: auto;
    height: 350px;
    top: 45%;
    margin: 0;
    padding: 25px;
    color: white;
    font-family: 'Macondo';   
}

.container_form {
    position: absolute;
    width: auto;
    height: 350px;
    top: 58.5%;
    margin: 0;
    padding: 25px;
    color: white;
    font-family: 'Macondo';
}

.game_name_anmelden {
    position: absolute;
    width: auto;
    height: 350px;
    top: 15%;
    margin: 0;
    padding: 25px;
    color: white;
    font-family: 'Macondo';   
}

.container_form_anmeldung {
    position: absolute;
    width: auto;
    height: 350px;
    top: 30%;
    margin: 0;
    padding: 25px;
    color: white;
    font-family: 'Macondo';    
}

.container_form a {
    color: white;
    text-decoration: none;
    margin-left: 5px;
}

.container_form a:hover {
    color: #9da3a1;
    text-decoration: none;
}

.container_form_anmeldung a {
    color: white;
    text-decoration: none;
    margin-left: 5px;
}

.container_form_anmeldung a:hover {
    color: #9da3a1;
    text-decoration: none;
}

input[type=text], input[type=password] {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    border: none;
    background: #f1f1f1;
    font-family: 'Macondo';
}

input[type=text]:focus, input[type=password]:focus {
    background-color: #ddd;
    outline: none;
    font-family: 'Macondo';
}

select {
    width: 100%;
    padding: 15px;
    margin: 5px 0 22px 0;
    border: none;
    background: #f1f1f1;
    font-family: 'Macondo';    
}

.btn {
    background-color: #9da3a1;
    color: white;
    padding: 16px 20px;
    border: none;
    cursor: pointer;
    width: 100%;
    opacity: 0.9;
    font-family: 'Macondo';
}

.btn:hover {
    opacity: 1;
}

.center {
    display: block;
    margin-left: auto;
    margin-right: auto;
    width: 50%;
}

.game_hud {
    position: relative;
    z-index: 99;
    margin-top: 0%;
}

.profile_picture {
    position: fixed;
    top: 0;
    width: 100px;          /* Gleiche Breite wie die Höhe */
    height: 100px;         /* Gleiche Höhe wie die Breite */
    background-color: lightsteelblue; /* Hintergrundfarbe des Kreises */
    border-radius: 50%;    /* Rundet das DIV zu einem Kreis ab */
    z-index: 99;
    background-size:     cover;                      
    background-repeat:   no-repeat;
    background-position: center center; 
    font-family: 'Macondo'; 
    text-align: center;
    font-size: 90px;
}

.profile_picture_level {
    font-family: 'Macondo'; 
    text-align: center;
    font-size: 35px;
}

progress {
    position: fixed;
    z-index: 98;
    border-radius: 7px; 
    width: 100%;
    height: 22px;
    box-shadow: 1px 1px 4px rgba( 0, 0, 0, 0.2 );
    font-family: 'Macondo'; 
    color: lightpink;
}

progress::-webkit-progress-bar {
    background-color: lightgrey;
}

progress::-webkit-progress-value {
    background-color: darkred;
    border-bottom-right-radius: 7px;
    border-top-right-radius: 7px; 
    box-shadow: 1px 1px 5px 3px lightslategray;
    font-family: 'Macondo'; 
    color: lightpink;
}

progress::-moz-progress-bar {
    background-color: lightsalmon;
    border-radius: 7px;
}

.pulsing-dot {
  width: 20px;
  height: 20px;
  background: rgba(0, 200, 255, 0.7);
  border-radius: 50%;
  box-shadow: 0 0 8px rgba(0, 200, 255, 0.9);
  position: relative;
}

.pulsing-dot::after {
  content: "";
  width: 20px;
  height: 20px;
  position: absolute;
  left: 0;
  top: 0;
  border-radius: 50%;
  background: rgba(0, 200, 255, 0.4);
  animation: pulse 1.5s ease-out infinite;
}

@keyframes pulse {
  0% {
    transform: scale(1);
    opacity: 0.7;
  }
  70% {
    transform: scale(2.5);
    opacity: 0;
  }
  100% {
    transform: scale(1);
    opacity: 0;
  }
}

.ghost_button {
    color: #009688;
    background: #fff;
    border: 1px solid #009688;
    font-size: 17px;
    padding: 7px 12px;
    font-weight: normal;
    margin: 6px 0;
    margin-right: 12px;
    display: inline-block;
    text-decoration: none;
    font-family: 'Macondo'; 
    min-width: 120px;
    text-align: center;
}

.ghost_button:hover, .ghost_button:active {
  color:#fff;
  background:#009688;
}

.game_highscore {
    position: absolute;
    width: 100%;
    height: 350px;
    top: 15%;
    margin: 0;
    padding: 25px;
    color: white;
    font-family: 'Macondo';       
}

.highscore_table {
    width: 100%; /* Setzt die Breite der Tabelle auf 100% der verfügbaren Breite */
    border-collapse: collapse; /* Fügt die Rahmen der Zellen zusammen */
}

.highscore_table td, th {
    padding: 8px; /* Fügt Innenabstand zu Zellen hinzu */
    border: 1px solid #ccc; /* Gibt jeder Zelle einen dünnen grauen Rahmen */
    text-align: left; /* Ordnet den Text in Zellen nach links an */
}

.game_menu_link {
    color: #9da3a1;
    text-decoration: none;
    margin-left: 5px;
}

.game_menu_link:hover {
    color: #9da3a1;
    text-decoration: none;
}