* {
    box-sizing: border-box;
}

body {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-family: 'Nunito', sans-serif;
    background-color: #2d7c41;
    background-image: radial-gradient(#14331b, #5dfc85);
    background-repeat: no-repeat;
    background-attachment: fixed;
    margin: 0;
}

h1 {
    font-size: 5vmin;
    grid-column-start: 2;
    grid-column-end: span 6;
    text-align: center;
    font-size: 9vmin;
    background-color: transparent;
    margin: 0;
    margin-top: 4vmin;
    vertical-align: text-top;
    -webkit-text-stroke-color: #343434;
    text-shadow: .5vmin .5vmin #343434;
}

#pockets {
    display: grid;
    margin-top: 4%;
    background-color: #bc7748;
    background-image: radial-gradient(#bc7748, #e29867);
    border-color: black;
    width: 90%;
    height: 50%;
    grid-template-columns: 2fr repeat(6, 1fr) 2fr;
    grid-template-rows: 1fr, .5fr, 1fr;
    border-radius: 14%;
    border: 1vmin solid #87512e;
    padding: 5vmin;
}

button {
    color: #343434 ;
    border-radius: 50%;
    font-size: 4.8vw;
    border-width: 1vmin;
    margin: auto;
    font-family: 'Nunito', sans-serif;
    width: 85%;
    height: 85%;
}

button:hover {
    border-color: #28c44f;
}

.p1 {
    background-color:#ec4141;
    background-image: linear-gradient(#ec4141, #e87272);
    border-color: #cf1919;
}

.p2 {
    background-color: #b0cbe9;
    background-image: linear-gradient(#cfe3fb, #a5c0de);
    border-color: #7d94ae;
}

#p1Mancala {
    grid-column-start: 8;
    grid-column-end: 8;
    grid-row-start: 1;
    grid-row-end: span 3;
    width: 20vmin;
    height: 60vmin;
}

#p2Mancala {
    grid-column-start: 1;
    grid-column-end: 1;
    grid-row-start: 1;
    grid-row-end: span 3; 
    width: 20vmin;
    height: 60vmin;
}

#restart {
    border-radius: 20%;
    padding: 1vmin;
    width: auto;
    height: auto;
    margin: 1vmin;
    background-color: #bc7748;
    background-image: radial-gradient(#bc7748, #e29867);
    border: 1vmin solid #87512e;
    color: #343434;
}

#restart:hover {
    border-color: #663a1d;
    background-color: #905b37;
    background-image: radial-gradient(#7e5031, #a7714c);
}