/* Größe des Würfels verändern => STRG F, 40vw,32vw,20vw; proportional zueinnder */

h1 {
  text-align: center;
}

h2 {
  text-align: center;
}

p {
  text-align: center;
}

body {
  margin: 0;
}

table {
  max-width: 100%;
  min-width: 100%;
  text-align: center;
  border: 1px solid;
}

th {
  width: 50%;
}

.friends {
  color: white;
  font-size: 1.5em;
}

svg {
  margin-left: 20%;
  align-items: center;
  align-self: center;
  align-content: center;
  align-tracks: center;
  justify-items: center;
  justify-content: center;
  justify-self: center;
  justify-tracks: center;
}

.table {
  width: 60%;
  margin-left: 20%;
  margin-right: 20%;
}

.btn {
  width: 50%;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #4CAF50;
  /* Grün */
  color: white;
  font-size: 1.2em;
  cursor: pointer;
  transition: background-color 0.3s;
}

.btn:hover {
  background-color: #000901;
  /* Dunkleres Grün */
}

.back {
  background-color: red;
}

.create {
  background-color: lightblue;
}

.next {
  background-color: lightgreen;
}

#headlineTable {
  text-align: center;
}

.center {
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}

#InGame {
  margin-left: 10%;
  width: 80%;
  display: block;
  justify-content: center;
  align-items: center;
}

.Buttons {
  margin-left: 20%;
  max-width: 60%;
  display: flex;
  justify-content: center;
  align-items: center;
}

#GamesButtons {
  margin-left: 20%;
  width: 60%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.day {
  background: #eee;
  color: black;
}

.night {
  background: #333;
  color: white;
}

.day_dark-scheme {
  background: #333;
  color: white;
}

.night_dark-scheme {
  background: black;
  color: #ddd;
}

.day_light-scheme {
  background: white;
  color: #555;
}

.night_light-scheme {
  background: #eee;
  color: black;
}

.day-reverse {
  color: #eee;
  background: black;
}

.night-reverse {
  color: #333;
  background: white;
}

.day_dark-scheme-reverse {
  color: #333;
  background: white;
}

.night_dark-scheme-reverse {
  color: black;
  background: #ddd;
}

.day_light-scheme-reverse {
  color: white;
  background: #555;
}

.night_light-scheme-reverse {
  color: #eee;
  background: black;
}

.icons {
  font-size: 2rem;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 50%;
  color: white;
  background-color: black;
  position: fixed;
  bottom: 0;
  right: 0;
  width: 10vw;
  height: 10vw;
  border: 5px solid lightgrey;
}

#Chatbtndiv {
  right: 11%;
}

#ChatSelection {
  position: -webkit-sticky;
  /* Für Safari */
  position: sticky;
  top: 0;
  /* Abstand vom oberen Rand des Viewports */
  z-index: 1000;
  /* Sicherstellen, dass es über anderen Inhalten liegt */
  padding: 10px;
  /* Optional: Innenabstand */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
  /* Optional: Schatten für bessere Sichtbarkeit */
  justify-content: center;
  align-items: center;
  display: flex;
  height: 10vh;
}

.chatbtn {
  height: 100%;
}

#Inboxbtndiv {
  right: 22%;
}


#Partypreviewdiv {
  position: fixed;
  bottom: 0;
  left: 0;
}

#FriendListdiv {
  position: relative;
  max-width: 60%;
  margin-left: 20%;
  max-height: 60%;
  margin-top: 20%;
  justify-content: center;
  text-align: center;
  background-color: grey;
  border-radius: 10%;
}

#AddFrienddiv {
  position: relative;
  max-width: 60%;
  margin-left: 20%;
  max-height: 60%;
  margin-top: 20%;
  justify-content: center;
  text-align: center;
  background-color: grey;
  border-radius: 10%;
}

#Inboxdiv {
  position: relative;
  max-width: 60%;
  margin-left: 20%;
  max-height: 60%;
  margin-top: 20%;
  justify-content: center;
  text-align: center;
  background-color: grey;
  border-radius: 10%;
}

.mitteilungen {
  background-color: red;
  justify-content: center;
  align-items: center;
  text-align: center;
  border-radius: 50%;
  color: white;
  background-color: red;
  position: absolute;
  bottom: 9;
  right: 0;
  width: 3vw;
  height: 3vw;
  border: 5px solid black;

}


#FriendList {
  padding: 0px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

#box div {
  position: absolute;
  height: 20vw;
  width: 20vw;
  border: 1px solid lightgrey;
  background: rgb(0, 0, 0);
  text-align: center;
  font-size: 16vw;
}

#box {
  -webkit-animation-name: animation;
  -webkit-animation-timing-function: linear;
  -webkit-animation-duration: 1s;
  -webkit-transform-style: preserve-3d;
  -webkit-transform-origin: 10vw 10vw 0;
}

#box .one {
  color: white;
  -webkit-transform: translateZ(10vw);
}

#box .two {
  color: white;
  -webkit-transform: rotateX(-90deg) translateZ(10vw);
}

#box .three {
  color: white;
  -webkit-transform: rotateY(90deg) rotateX(90deg) translateZ(10vw);
}

#box .four {
  color: white;
  -webkit-transform: rotateY(180deg) rotateZ(90deg) translateZ(10vw);
}

#box .five {
  color: white;
  -webkit-transform: rotateY(-90deg) rotateZ(90deg) translateZ(10vw);
}

#box .six {
  color: white;
  -webkit-transform: rotateY(90deg) translateZ(10vw);
}

@-webkit-keyframes animation {

  from,
  to {}

  20% {
    -webkit-transform: rotateY(90deg) rotateZ(90deg);
  }

  50% {
    -webkit-transform: rotateY(225deg) rotateZ(225deg);
  }

  80% {
    -webkit-transform: rotateZ(270deg) rotateZ(270deg);
  }

  100% {
    -webkit-transform: rotateZ(360deg) rotateZ(360deg);
  }
}

input,
select {
  padding: 10px;
  border: 2px solid #4CAF50;
  /* Grün */
  border-radius: 5px;
  font-size: 1em;
  width: 60%;
  transition: border-color 0.3s;
}

input:focus {
  border-color: #000901;
  /* Dunkleres Grün */
  outline: none;
}



.chatlog {
  top: 0;
  bottom: 32px;
  left: 0;
  right: 200px;
  overflow-y: auto;
  padding: 8px;
  overflow-wrap: break-word;
  max-height: 35vh;
}

#chatlog span.username {
  font-weight: bold;
}

#spacer {
  height: 100%;
}

#roster {
  font-weight: bold;
  padding: 8px;
}

#chat-input {
  height: 3vw;
  display: block;
  position: absolute;
  width: 60vw;
  bottom: 0;
  left: 0;
  border-radius: 20px;
}

form {
  margin: 0px;
}

#Chatdiv {
  overflow-y: scroll;
  position: relative;
  width: 60vw;
  margin-left: 20%;
  height: 60vh;
  margin-top: 10%;
  margin-bottom: 10%;
  justify-content: center;
  text-align: center;
  background-color: grey;
}