.join-window {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  width: 400px;
  padding: 40px;
  border-radius: 20px;
  filter: drop-shadow(0 0 10px #c5c5c5);
  background: linear-gradient(204deg,#e9e9e9 51%, rgba(240, 240, 240, 1) 44%);
  transition: 0.1s cubic-bezier(0.3, 0.8, 0.3, 2.3);
}

.join-window:hover {
  transform: scale(1.02);
  background: linear-gradient(204deg,#e9e9e9 52%, rgba(240, 240, 240, 1) 44%);
}

/* .join-window .logo {
  width: 240px;
  height: 240px;
  margin: -44px 0 30px;
} */

.join-window .logo {
  width: 100px;
  height: 100px;
  margin: 10px 0 30px;
  cursor: pointer;
}

.join-window .logo img {
  width: 100%;
  height: 100%;
}

.join-window .name,
.join-window .join,
.join-window .room {
  width: 100%;
  border-radius: 6px;
}

input {
  width: 100%;
  height: 50px;
  padding: 10px 20px;
  font-size: 18px;
  font-weight: 500;
  border-radius: 6px;
  border: none;
  outline: none;
  background-color: transparent;
  border: 2px solid #3a2819;
}

.join input {
  background-color: #bc0400;
  color: #feffff;
  cursor: pointer;
  font-size: 20px;
  border: unset;
}

.join:hover input {
  background-color: #ea1f0a;
}

.join-window .notice {
  width: 100%;
  padding: 10px 20px;
  background-color: #f4f5f7;
  margin-top: 30px;
  font-size: 13px;
  border-left: 2px solid #bc0400;
  border-radius: 0 6px 6px 0;
  user-select: none;
  color: #313131;
}