body {
    margin: 0;
    background-color:blanchedalmond;
    text-align: center;    
    font-family: 'Changa One', cursive;
}

#title {
    font-size: 5rem;
    color: #093426;
    margin: 30px 0;
    text-shadow: 4px 4px 1px #79BEA8;
}

#howTo {
    font-size: 1.5rem;
    color: #448D76;
}

#playerSelection {
    display: flex;
    flex-direction: row;
    justify-content: center;
    margin-top: 20vh;
}

.playerButton {
    font-size: 2.5rem;
    font-family: 'Changa One', cursive;
    padding: 1.5rem;
    margin: 0 60px;
    background-color: #E7F3EF;
    border: solid;
    border-color: black;
    border-radius: 30px;
    box-shadow: 3px 6px 2px 0 #448D76;
}

.playerButton:hover {
    background-color: #79BEA8;
}

#nameEntry {
    display: none;
    font-size: 2.5rem;
    color: #23483C;
    margin-top: 70px;
}

.nameInput {
    font-size: 2rem;
    font-family: 'Changa One', cursive;
    font-weight: 100;
    text-align: center;
    margin: 80px;
    width: 20rem;
    border: solid;
    border-color: #093426;
    border-radius: 10px;
    background-color: whitesmoke;
    color: #23483C;
    box-shadow: 2px 4px 5px 0 #79BEA8;
}

.nameButtons {
    font-size: 2.5rem;
    font-family: 'Changa One', cursive;
    padding: 0.8rem;
    margin: 0 40px;
    background-color: #E7F3EF;
    border: solid;
    border-color: black;
    border-radius: 10px;
    box-shadow: 3px 6px 2px 0 #448D76;
}

.nameButtons:hover {
    background-color: #79BEA8;
}



#scoreboard {
    display: none;
    flex-direction: row;
    justify-content: space-evenly;
    font-size: 2.8rem;
    color: #448D76;
    margin: 20px 0;
    text-shadow: 2px 2px 1px #093426;
}


#messageBar {
    font-size: 2.6rem;
    color: #093426;
    margin: 30px 0;
}


#mancalaBoard {
    margin: 20px auto 50px;
    display: none;
    flex-direction: row;
    width: 70vw;
    height: 350px;
    background-color: burlywood;
    border: solid;
    border-width: 3px;
    border-color:black;
    border-radius: 10px;
    box-shadow: 20px 20px 10px 3px rgb(161, 134, 99);
}

.goal {
    font-size: 1.5rem;
    width: 10%;
    height: 85%;
    margin: auto;
    border: solid;
    border-color: rgb(112, 80, 80);
    border-radius: 50px;
    border-width: 2.5px;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: rgb(211, 167, 109);
}

#playerHoles {
    width: 50vw;
    display: flex;
    flex-direction: column;
}

#player1Holes, #player2Holes {
    display: flex;
    flex-direction: row;
    flex: auto;
    justify-content: space-evenly;
    height: 50%;
}

.plyr1Hole, .plyr2Hole {
    align-items: center;
}


.hole {
    border: solid;
    border-color: rgb(112, 80, 80);
    border-radius: 50px;
    border-width: 3px;
    background-color: rgb(211, 167, 109);
    width: 10%;
    height: 70%;
    margin: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.holeHeader {
    font-size: 1.5rem;
    text-align: center;
    margin: 5% 0;

}

.marble {
    display: flex;
    flex-direction: column;
    flex-grow: 5;
    height: 70%;
    width: 85%;
    justify-content: center;
    align-items: center;
}

.playr1Marble {
    padding-top: 10%;
}

#pip {
    height: 7%;
    width: 80%;
    background-color: #448D76;
    border: solid;
    border-width: 2px;
    border-color: gray;
    border-radius: 10px;
    box-shadow: 1px 1px 6px 1px#093426;
}


#startOver {
    display: none;
    margin: 30px 40px 10px;
}

.gameButtons {
    font-size: 2rem;
    font-family: 'Changa One', cursive;
    padding: 0.8rem;
    margin: 80px 120px;
    background-color: #E7F3EF;
    border: solid;
    border-color: black;
    border-radius: 10px;
    box-shadow: 3px 6px 2px 0 #448D76;
}

.gameButtons:hover {
    background-color: #79BEA8;
}