/* Set a light pink background for the whole form */
form {
    background-color: #ffe4e1; /* Light pink color */
}

/* Style the table cells */
td {
    padding: 10px;
    color: #333; /* Dark gray text for readability */
    text-align: center; /* Center-align the text inside the table cell */
}

/* Center the table itself */
table {
    margin: 0 auto; /* Center the table horizontally */
    text-align: center; /* Center-align the content inside the table */
}

/* Style the strong tags inside the table */
td strong {
    color: #d87093; /* Pale violet-red color for text */
}

/* Style the submit button */
input[type="submit"] {
    background-color: #d87093; /* Pale violet-red background */
    color: white;
    border: none;
    padding: 10px 20px;
    border-radius: 5px;
    cursor: pointer;
}

input[type="submit"]:hover {
    background-color: #c71585; /* Medium violet-red on hover */
}

input[type="text"],
input[type="password"] {
    display: block;
    margin: 0 auto; /* 入力欄を中央に配置 */
    width: 80%; /* 入力欄をセル内で最大限広げる */
    max-width: 300px; /* オプション: 入力欄の最大幅を設定 */
    padding: 8px;
    border: 1px solid #d87093;
    border-radius: 5px;
    background-color: #fff5f7;
    color: #333;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin: 0;
}

div {
    width: 100%;
    display: flex;
    align-items: center;
    margin: 0;
}

div.submit {
    display: flex;
    justify-content: center;
}

.video-container {
    display: flex;            /* flexを使う場合 */
    justify-content: center;  /* 横方向中央寄せ */
    margin: 20px 0;           /* 上下余白 */
}

p {
    color: black; /* 文字色を黒にする */
    font-size: 16px; /* 必要に応じてサイズを調整 */
    font-family: "Quicksand", sans-serif; /* フォントを Quicksand に設定 */
}

/* スマホ用のメディアクエリ */
@media only screen and (max-width: 768px) {
    form {
        font-size: 1.2em; /* フォーム全体の文字サイズを大きくする */
    }

    input[type="text"],
    input[type="password"] {
        width: 80%; /* 入力フィールドやボタンの幅を全幅に設定 */
    }

    input[type="submit"] {
        width: 60%; /* 入力フィールドやボタンの幅を全幅に設定 */
    }

    table {
        width: 90%; /* テーブルの幅を画面幅の90%に設定 */
        margin: 0 auto; /* テーブルを中央に配置 */
    }
}