@font-face {
    font-family: GoodVibes;
    src: url(../assets/GoodVibesBold-PKrLr.otf);
}

body {
    text-align: center;
    background-color: #FAEAB1;
    font-family: Montserrat;
    font-weight: 400;
}

h1 {
    font-family: GoodVibes;
    font-size: 6rem;
    color: #C58940;
}
h3 {
    font-family: GoodVibes;
    font-size: 3rem;
    color: #C58940;
}
h4 {
    font-family: GoodVibes;
    font-size: 2rem;
    color: #C58940;
}

.container-fluid {
    padding: 5px 10px;
}

/* --- Cells --- */
.cell {
    background-repeat: no-repeat;
    border: none;
    cursor: pointer;
    overflow: hidden;
    padding: 0;
    margin: 0;

    border-radius: 10px;

    width: 5rem;
    height: 5rem;
}
.white-cell {
    background-color: #f7a84d;
}
.white-selected-cell {
    background-color: #0ed145;
}
.white-possible-cell {
    background-color: #00a8f3;
}
.white-sad-cell {
 background-color: #f5f5f5;
}
.black-cell {
    background-color: #7b5426;
}
.black-selected-cell {
    background-color: #076822;
}
.black-possible-cell {
    background-color: #005479;
}
.black-sad-cell {
    background-color: #5f5f5f;
}

.win-cell {
    background-color: #ffbf1a;
}
.lose-cell {
    background-color:#ec1c24;
}


.piece {
    width: 3rem;
    height: 3rem;
}

/* Frame */
table {
    margin: auto;
    height: 45rem;
    width: 45rem;
}
tr {
    margin: 0;
    padding: 0;
    height: 5rem;
}
td {
    margin: 0;
    padding: 0;
    height: 5rem;
    width: 5rem;
}