*{
    box-sizing: border-box;
}

header {
    text-align: center;
    font-family: 'Poiret One', cursive;
    font-size: 60px;
    font-weight: 500;
}

h1 {
    text-align: center;
    font-family: 'Poiret One', cursive;
    font-size: 25px;
    color: #6B705C;
    padding: 10px;
}

h1 > span {
    padding: 10px;
    border-radius: 12px;
}

h2 {
    text-align: center;
    font-family: 'Poiret One', cursive;
    font-size: 25px;
    color: black;
}

body {
    height: 100vh;
    background:  #B7B7A4;
}

#board {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr 1fr 1fr 1fr 1fr 1fr;
    grid-template-rows: 160px 160px;
    gap: 5px;
    background-color: #DDBEA9;
    padding: 10px;
    border-radius: 12px; 
    box-shadow: 5px 10px 0px 0px #CB997E;
    grid-template-areas: 
    "s13 p12 p11 p10 p9 p8 p7 s6"
    "s13 p5 p4 p3 p2 p1 p0 s6"
}

#board > div {
    border: 0.25vmin solid #CB997E;
    width: auto;
    border-radius: 12px;
    box-shadow: 5px 10px 0px 0px inset #CB997E;
    display: flex; 
    justify-content: center;   
    align-items: center;
    font-family: 'Poiret One', cursive;
    font-weight: 600;
}

.store {
    border: 0.25vmin solid black;
    height: 325px;
    width: auto;
    border-radius: 12px;
    box-shadow: 5px 10px 0px 0px inset #CB997E;
}

button {
    background-color: #6B705C;
    color: #FFE8D6;
    border: 1vmin solid #6B705C;
    border-radius: 12px;
    margin: 10px;
    margin-top: 15px;

}

#buttons {
    text-align: center;
    align-items: center;
    justify-content: center;
    margin-top: 15px;
}

button:hover {
    transform: scale(1.1);
    transition: all 0.2s ease-in-out;
    background-color: #FFE8D6;
    color: #A5A58D;
    border: 1vmin solid #FFE8D6;
}

#replay{
    text-align: left;
}

#p6 {
    grid-area: 's6';
    grid-column: 8;
    grid-row: 1 / 3;
}

#p13 {
    grid-area: 's13';
    grid-column: 1;
    grid-row: 1 / 3;
}

#p0 {
    grid-area: 'p0';
    grid-column: 2;
    grid-row: 2 / 3;
}

#p1 {
    grid-area: 'p1';
    grid-column: 3;
    grid-row: 2 / 3;
}

#p2 {
    grid-area: 'p2';
    grid-column: 4;
    grid-row: 2 / 3;
}

#p3 {
    grid-area: 'p3';
    grid-column: 5;
    grid-row: 2 / 3;
}

#p4 {
    grid-area: 'p4';
    grid-column: 6;
    grid-row: 2 / 3;
}

#p5 {
    grid-area: 'p5';
    grid-column: 7;
    grid-row: 2 / 3;
}

#p7 {
    grid-area: 'p7';
    grid-column: 7;
    grid-row: 1 / 2;
}

#p8 {
    grid-area: 'p8';
    grid-column: 6;
    grid-row: 1 / 2;
}

#p9 {
    grid-area: 'p9';
    grid-column: 5;
    grid-row: 1 / 2;
}

#p10 {
    grid-area: 'p10';
    grid-column: 4;
    grid-row: 1 / 2;   
}

#p11 {
    grid-area: 'p11';
    grid-column: 3;
    grid-row: 1 / 2;
}

#p12 {
    grid-area: 'p12';
    grid-column: 2;
    grid-row: 1 / 2;
}

h2 {
    text-align: center;
    font-family: 'Poiret One', cursive;
}

h3{
    text-align: center;
    font-family: 'Open Sans Condensed', sans-serif;
    font-weight: 150;
    line-height: 7ch;
    border: 2px solid grey;
}