* {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    .item {
        margin: 0.4em;
    }
        * {
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    
    .item {
        margin: 0.4em;
    }
    
    body {
        display: flex;
        align-items: center;
        justify-content: center;
        background-color: #fff;
    }
    
    .board {
        background-color: #12232E;
        background-color: #12232E;
        display: grid;
        grid-template-columns: 5em 5em 5em;
        grid-template-rows: 5em 5em 5em;
        width: 100%;
        padding: 1em 0 1em 0;
        margin-bottom: 0;
        justify-content: center;
    }
    
    .card {
        display: flex;
        place-items: center;
        flex-direction: column;
        width: 60%;
        margin: auto;
        border: 1px solid lightgrey;
        border-radius: 10px;
    }
    
    .field {
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
        font-size: 54px;
        background-color: orangered;
        color: #12232E;
        border: none;
        border-radius: 10px;
        border-bottom: 3px solid #203647;
        border-right: 3px solid #203647;
        outline: none;
    }
    
    .field.no-r {
        border-right: none;
    }
    
    .field.no-b {
        border-bottom: none;
    }
    
    .field p {
        margin: 0px;
    }
    
    .field:hover {
        cursor: pointer;
    }
    
    .btn {
        background-color: white;
        border: 1px solid lightgrey;
        border-radius: 10px;
        -webkit-box-shadow: -1px 7px 22px -6px lightgrey;
        box-shadow: -1px 7px 22px -6px lightgrey;
    }
    
    .btn:focus {
        outline: none;
    }
    
    .btn:hover {
        cursor: pointer;
    }
    
    .select {
        align-self: flex-start;
        margin-top: 0;
        margin-bottom: 0;
    }
    
    .btn-p {
        width: 15em;
        height: 2.5em;
        margin: 1em 1em 1em 1em;
    }
    
    .selected {
        color: orangered;
        font-weight: 600;
        border: 1px solid orange;
        -webkit-box-shadow: -1px 7px 22px -6px orangered;
        box-shadow: -1px 7px 22px -6px orangered;
    }
    
    .not-selected {
        box-shadow: none;
        font-weight: 600;
        color: grey;
        border-width: 1.5px;
    }
    
    .player {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: space-around;
        margin: 0;
    }
    
    .rst {
        width: 100%;
        margin: auto;
    }
    
    .restart {
        width: 100%;
        height: 3em;
        border: none;
        border-radius: 0% 0% 10px 10px / 10px 10px 10px 10px;
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
        font-size: 24px;
    }
    
    select {
        outline: none;
        border: none;
        border-radius: 0px;
        border-bottom: 2px solid #203647;
        font-family: 'Montserrat', sans-serif;
        font-weight: 500;
        font-size: 14px;
        color: #203647;
    }
    
    select:hover {
        cursor: pointer;
    }
    
    .win p {
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
        color: white;
        z-index: 1;
        -webkit-animation: focus-in-expand 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: focus-in-expand 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }
    
    .winner {
        position: fixed;
        left: 50%;
        top: 25%;
        transform: translate(-50%, 0);
        font-size: 35px;
    }
    
    .sign {
        position: fixed;
        left: 50%;
        top: 40%;
        transform: translate(-50%, 0);
        font-size: 150px;
        margin: 0;
    }
    
    .o-text {}
    
    .x-text {}
    
    .hide {
        display: none;
    }
    .board {
        background-color: #12232E;
        background-color: #333;
        display: grid;
        grid-template-columns: 5em 5em 5em;
        grid-template-rows: 5em 5em 5em;
        width: 100%;
        padding: 1em 0 1em 0;
        margin-bottom: 0;
        justify-content: center;
    }
    
    .card {
        display: flex;
        place-items: center;
        flex-direction: column;
        width: 60%;
        margin: auto;
        border: 1px solid lightgrey;
        border-radius: 10px;
    }
    
    .field {
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
        font-size: 54px;
        background-color: #5e3aee;
        color: #12232E;
        border: none;
        border-radius: 10px;
        border-bottom: 3px solid #203647;
        border-right: 3px solid #203647;
        outline: none;
    }
    
    .field.no-r {
        border-right: none;
    }
    
    .field.no-b {
        border-bottom: none;
    }
    
    .field p {
        margin: 0px;
    }
    
    .field:hover {
        cursor: pointer;
    }
    
    .btn {
        background-color: white;
        border: 1px solid lightgrey;
        border-radius: 10px;
        -webkit-box-shadow: -1px 7px 22px -6px lightgrey;
        box-shadow: -1px 7px 22px -6px lightgrey;
    }
    
    .btn:focus {
        outline: none;
    }
    
    .btn:hover {
        cursor: pointer;
    }
    
    .select {
        align-self: flex-start;
        margin-top: 0;
        margin-bottom: 0;
    }
    
    .btn-p {
        width: 15em;
        height: 2.5em;
        margin: 1em 1em 1em 1em;
    }
    
    .selected {
        color: #203647;
        font-weight: 600;
        border: 2px solid #203647;
        -webkit-box-shadow: -1px 7px 22px -6px grey;
        box-shadow: -1px 7px 22px -6px grey;
    }
    
    .not-selected {
        box-shadow: none;
        font-weight: 600;
        color: grey;
        border-width: 1.5px;
    }
    
    .player {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        align-items: space-around;
        margin: 0;
    }
    
    .rst {
        width: 100%;
        margin: auto;
    }
    
    .restart {
        width: 100%;
        height: 3em;
        border: none;
        border-radius: 0% 0% 10px 10px / 10px 10px 10px 10px;
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
        font-size: 24px;
    }
    
    select {
        outline: none;
        border: none;
        border-radius: 0px;
        border-bottom: 2px solid #203647;
        font-family: 'Montserrat', sans-serif;
        font-weight: 500;
        font-size: 14px;
        color: #203647;
    }
    
    select:hover {
        cursor: pointer;
    }
    
    .win p {
        font-family: 'Montserrat', sans-serif;
        font-weight: 600;
        color: white;
        z-index: 1;
        -webkit-animation: focus-in-expand 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
        animation: focus-in-expand 0.8s cubic-bezier(0.250, 0.460, 0.450, 0.940) both;
    }
    
    .winner {
        position: fixed;
        left: 50%;
        top: 25%;
        transform: translate(-50%, 0);
        font-size: 35px;
    }
    
    .sign {
        position: fixed;
        left: 50%;
        top: 40%;
        transform: translate(-50%, 0);
        font-size: 150px;
        margin: 0;
    }
    
    .o-text {}
    
    .x-text {}
    
    .hide {
        display: none;
    }