body {
    width: 100%;
    height: 100dvh;

    background: #000;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;
}

#form {
    width: 100%;
    max-width: 500px;

    background: #1b1b1b;
    padding: 30px;

    border-radius: 5px;
    gap: 5px;

    display: flex;
    flex-direction: column;

    justify-content: center;
    align-items: center;
}

#form>* {
    width: 100%;
    height: auto;

    padding: 10px;
    user-select: none;
}

#form>input#password:not(.shown) {
    display: none;
}

#form>input {
    border: 1px solid lightskyblue;
    border-radius: 5px;

    outline: none;
    background: transparent;

    font-size: 18px;
    color: lightskyblue;
}

#form>button {
    border: none;
    border-radius: 5px;

    outline: none;
    background: rgb(0, 157, 255);

    color: #ffffff;
    font-size: 20px;

    transition: .3s ease-out;
}

#form>button:not(.joinning):hover {
    background: rgb(103, 217, 255);
}

#form>button.joinning {
    cursor: not-allowed;
    opacity: .5;
}

#form>p.error:not(.shown) {
    display: none;
}

#form>p.error {
    width: 100%;
    border-radius: 5px;

    color: #ffffff;
    background: red;
}

#form>h1 {
    padding: 0;
    width: 100%;

    text-align: center;
    margin-bottom: 20px;

    color: rgb(0, 157, 255);
}