body {
    background-color:#402A57 ;
}

.logo{
    text-align: center;
}

.form{
    display: flex;
    justify-content: center; /* 左右の中央揃え */
    align-items: center;     /* 上下の中央揃え（高さがある場合） */
    text-align: center;      /* 内部のテキストも中央に */
    flex-direction: column;
    align-items: center;
}

.form-text{
    padding: 12px;
    border-radius: 50px;
    width: 30%;
    height: 7vw;
    border: 1px solid var(--color-border);
    background-color: #7f8ec9;
    outline: none;
    color: #000000;

    font-size: 3vw;              /* 文字の大きさ */
    font-family: "Arial", sans-serif; /* フォント */
    color: #150E5C;               /* 文字の色 */
    text-align: center;
    
}

.form-text::placeholder {
    color: #451C93;
    font-family: "Arial", sans-serif;
    font-size: 3vw;
    text-align: center;
}

.form-text::-webkit-inner-spin-button,
.form-text::-webkit-outer-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Firefox */
.form-text {
    -moz-appearance: textfield;
}

#join-button {
    width: 20%;              /* 横幅 */
    height: 6vw;              /* 高さ */

    background-color: #5f447b; /* 背景色 */
    color: #FBFF00;              /* 文字色 */

    font-size: 3vw;           /* 文字の大きさ */
    font-family: "Arial", sans-serif;
    font-weight: bold;         /* 文字の太さ */

    border: none;              /* 枠線なし */
    border-radius: 30px;       /* 角の丸さ */

    cursor: pointer;           /* マウスを乗せたとき指にする */
}