.PlayerList {
  border-radius: 20px;
  border: 2px solid var(--fg-double);
  width: 100%;
  max-width: 800px;
}
* {
  font-family: ariel, sans-serif;
}
.Panos {
  padding: 10px;
  background-color: var(--fg-thin);
  border-radius: 20px;
  border: 2px solid var(--fg-base);
}
.Pano {
  border-radius: 8px;
  border: 2px solid var(--fg-triple);
  margin-bottom: 10px;
  width: calc(100vw - 40px);
  max-width: 800px;
}
.Pano:last-child {
  margin-bottom: 0px;
}
.LinkButton {
  background-color: var(--fg-half);
  border: 2px solid var(--fg-half);
  border-radius: 15px;
  justify-content: center;
  padding: 10px;
  transition: background-color 0.2s;
}
.LinkButton:hover {
  background-color: var(--fg-base);
}
a {
  color: var(--fg);
  text-decoration: none;
}
.Buttons {
  margin-top: 10px;
  gap: 5px;
  padding: 5px;
  background-color: var(--fg-half);
  border: 2px solid var(--fg-base);
  border-radius: 20px;
  overflow: hidden;
}
.New {
  background-color: rgba(0,128,255,0.3);
  box-shadow: 0 0 5px rgba(0,128,255,0.4);
  border: 2px solid rgba(0,128,255,0.3);
}
.New:hover {
  background-color: rgba(0,128,255,0.5);
}
h1 {
  font-size: 3em;
  background: linear-gradient(to bottom, rgb(55,175,0) 32%, rgba(135,55,0,1) 32%, rgba(135,55,0,1) 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
}
#Minecraft-Logo {
  margin-right: 10px;
}
.Destructive {
  background-color: rgba(255,0,0,0.3);
  box-shadow: 0 0 5px rgba(255,0,0,0.4);
  border: 2px solid rgba(255,0,0,0.3);
  transition: background-color 0.2;
  transition: color 0.2s;
  transition: border 0.2s;
}
.Destructive:hover {
  background-color: rgba(255,50,50,1);
  border: 2px solid rgba(100,0,0,0.3);
  color: white;
}
.ConfirmPopup {
  background-color: rgba(var(--bg-rgb),0.8);
  padding: 10px;
  border-radius: 20px;
  border: 2px solid rgba(0,0,0,0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
#ConfirmCheck:checked + .ConfirmDiv {
  display: flex !important;
  background-color: rgba(0,0,0,0.1);
  backdrop-filter: blur(3px);
  -webkit-backdrop-filter: blur(3px);
}
.ConfirmText {
  margin-bottom: 10px;
}
.ConfirmButtons {
  gap: 5px;
}
.Wordle {
  background: linear-gradient(to bottom right, lime, orange) padding-box,
              linear-gradient(to bottom right, color-mix(in hsl, lime, black 10%),color-mix(in hsl, orange, black 10%)) border-box;
  border: 2px solid transparent;
}
.Create {
  background-color: rgba(230,160,15,0.3);
  box-shadow: 0 0 5px rgba(230,160,15,0.4);
  border: 2px solid rgba(190,90,10,0.3);
}
.Create:hover {
  background-color: rgba(230,160,15,0.5);
}
.Buttons > * {
  flex-grow: 1;
}
.Buttons > * > * {
  text-align: center;
}
.DarkThemed > div {
  background-color: rgb(50,50,50);
  color: white;
  font-weight: bold;
  border-color: rgb(0,0,0);
  box-shadow: 0 0 5px 0px rgba(0,0,0,1);
  transition: box-shadow 3s;
}
.DarkThemed > div:hover {
  background-color: rgb(0,0,0);
  border-color: white;
  /* box-shadow: 0 0 30px 550px rgba(0,0,0,1);  */
}
/*
.DarkThemed:hover ~ * > div {
  background-color: rgba(0,0,0,0.06);
  border: 2px solid rgba(0,0,0,0.05);
  box-shadow: 0 0 0 0 transparent;
}
*/

body.Josh {
  background-image: url("/static/cat.gif");
}
.Josh .TitleArea {
  background-color: rgba(0,0,0,0.05);
  border: 2px solid rgba(0,0,0,0.1);
  border-radius: 20px;
  padding: 0 30px;
}
.Josh .Buttons, .Josh .Panos, .Josh .PlayerList, .Josh .TitleArea {
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}
#Minecraft-Logo {
  transition: rotate 20s;
}
.Josh #Minecraft-Logo {
  rotate: 10980deg;
}
@view-transition {
  navigation: auto;
  types: slide;
}
#ButtonLogin {
  view-transition-name: login;
}
#ButtonAudioPlayer {
  view-transition-name: musicplayer;
}
#ButtonChat {
  view-transition-name: chat;
}
/*
html::view-transition-old(musicplayer) {
  animation-duration: 5s;
}
html::view-transition-new(musicplayer) {
  animation-duration: 5s;
}
*/

.Hidden {
	display: none;
}