@charset "UTF-8";

@font-face {
    font-family: "ltim";
    src: url("../Itim/Itim-Regular.ttf") format(truetype);
}

html, body {
    padding:0; margin:0;
    font-family: "ltim", 'Courier New', Courier, monospace;
}

#wrap {
    margin: 4% auto ;
}

h1{
    display: block;
    margin: auto;
    text-align: center;
}

h1 span:nth-child(1){
    /* Let'S Play の部分 */
    color: red;
}
h1 span:nth-child(2){
    /* Tic-Tac-Toe の部分 */
    color: blue;
}

h2{
    margin: auto;
    text-align:center;
    font-size: smaller;
    color: rgb(180, 48, 0);
}

#square_box{

    margin: 50px auto;
    padding: 10%;
    /* 四角形の大きさがpxで決まっているので、とっても小さい画面のやつらはどうにもならない。 */

    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap;
    align-content: stretch;
    width: 400px;

    background-image: url("./nishimura.png"), url("./kazama.png");
    background-size: 30%;
    background-position: top left, bottom right;
    background-repeat: no-repeat;
}
.field{
    width: 100px;
    height: 100px;
    padding: 0;
    margin: 0;
    color: #60d36a;
    border: solid 3px #d4d642;
    border-radius: 10px;

    font-size: 100px;
    line-height: 90px;
    text-align: center;

}


#resetButton {
    font-family: 'ltim','Courier New', Courier, monospace;
    display: block;
    padding: 1% 6%;
    font-size: larger;
    margin: auto;
    background-color: #ffe65a;
    border-color: #d6ae42;
    border-radius: 10px;
}
#resetButton:hover {
    background-color: #f3f57f;
    border-color:#d4d642;
}


#getResult{
    display: none;
    font-size: 150%;
    text-align: center;
}



footer {
    background-color: rgb(255, 203, 107);
    margin: 10% 0 0 0;
    padding: 1% 3%;
    width: 100vw;
}
footer p {
    margin: 1%;
    color:rgb(41, 13, 0);
}
footer #first {
    font-size: smaller;
    color: rgb(155, 139, 131);
}