/* タイトル */
h1 {
    text-align: center;
}

/* エラーの表示 */

div#error {
    display: "none";
    margin: 10px;
    color: crimson;
    font-weight: bold;
    text-align: center;
}

/* 見出し、箇条書きのインデント */
h3 {
    text-indent: 2em;
}

p {
    text-indent:3em;
}

/* 入力部分 */
form {
    text-align: center;
}

input#choose {
    margin:5px
}

/* 出力部分 */
div#output {
    width:300px;
    height: 39px;
    margin: 0 auto;
    margin-top: 10px;
    font-size: 18px;
    font-weight: bold;
    border: 1px solid #000000;
    background-color: #FFFFFF;
    text-align: center;
}

div#output > div {
    border: 1px solid #000000;
    display:inline-block;
    text-align: center;
    margin:5px;
}

/* 枠色の割り当て */
div#output > div.bracketColor_white {
    background-color: #FFFFFF;
}

div#output > div.bracketColor_black {
    background-color: #000000;
    color: #FFFFFF;
}

div#output > div.bracketColor_red {
    background-color: #fe0000;
}

div#output > div.bracketColor_blue {
    background-color: #4286f5;
}

div#output > div.bracketColor_yellow {
    background-color: #ffff00;
}

div#output > div.bracketColor_green {
    background-color: #00af50;
}

div#output > div.bracketColor_orange {
    background-color: #ffc000;
}

div#output > div.bracketColor_pink {
    background-color: #ff66ff;
}

div#output > div.arrow {
    border: #FFFFFF;
}


@media(max-width:800px){
    form {
        width: fit-content;
        margin:0px auto;
        text-align: center;
    }

    p {
        text-indent: 0em;
    }

    div#output {
        width:300px;
        height: 39px;
        margin-top: 10px;
        font-size: 18px;
        font-weight: bold;
        border: 1px solid #000000;
        background-color: #FFFFFF;
    }
}