:root {
    --gameDivSize: 84vh;
    --boxWidth: 75vh;
    --peiceHolderSize: 14vh;
    --gameDivBgSize: 90vh;
    --gridGap: 2vh;
    --gridPad: 2.8vh;
    --gridRowNcolumn: 17vh;
    --smallRingSize: 8vh;
    --smallRingMargin: 3vh;
    --dotSize: 2.5vh;
    --dotMargin: 5.7vh;
    --pNameWidth: 84vh;
}
body {
    background-image: url('Images/otrioLightBg.jpg');
    font-family: Arial, Helvetica, sans-serif;
}
h1 {
    color: rgb(114, 59, 22);
    -webkit-text-stroke: 2px black;
    text-align: center;
    margin-top: 1vh;
}
.nameInput {
    width: 50vh; 
    display: grid; 
    grid-template-columns: auto auto;
    margin: 10px auto; 
    border: solid rgba(117, 50, 23, 0.712); 
    border-radius: 10px; 
    padding: 5px;
    background-color: rgba(224, 174, 92, 0.246);
}
#twoPform .nameInput{
    grid-template-columns: auto auto auto;
}
input[type='checkbox'] {
    width: 30px;
    height: 30px;
    margin: auto;
    background-color: black;
}
input[type='text']{
  border: solid silver;
  background: rgba(0, 0, 0, 0.5);
  border-radius: 5px;
  color: white;
}
input[type='text']:focus{
  border: solid silver;
  outline: none;
  background: white;
  color: black;
}
input[type='submit'] {
    padding: 5px 10px 5px 10px;
    background: rgba(199, 136, 35, 0.246);
    font-size: 15px;
    border-radius: 5px;
    font-weight: bold;
}
.howToPlay {
  padding: 5px 10px 5px 10px;
  background: rgba(199, 136, 35, 0.246);
  font-size: 15px;
  border-radius: 5px;
  font-weight: bold;
}
.gameDiv {
    width: var(--gameDivSize);
    height: var(--gameDivSize);
    margin: auto;
    background-image: url('Images/board.webp');
    background-size: var(--gameDivBgSize);
    display: grid;
    grid-template-columns: var(--gridRowNcolumn) var(--peiceHolderSize) var(--peiceHolderSize) var(--gridRowNcolumn) var(--peiceHolderSize);
    grid-template-rows: var(--gridRowNcolumn) var(--peiceHolderSize) var(--peiceHolderSize) var(--gridRowNcolumn) var(--peiceHolderSize);
    grid-gap: var(--gridGap);
    padding: var(--gridPad);
}
.hideDiv {
    display: none;
}
.pieceHolder {
    width: var(--peiceHolderSize);
    height: var(--peiceHolderSize);
}
.centerSpace:hover {
    width: var(--peiceHolderSize);
    height: var(--peiceHolderSize);
    border-radius: 100%;
    box-shadow: 0px 0px 0px 10px rgb(117, 50, 23);
}
.bigRing {
    height: var(--peiceHolderSize);
    width: var(--peiceHolderSize);
    position: absolute;
    border-radius: 100%;
    box-shadow: 1vh 1vh 1vh 0 rgba(0, 0, 0, 0.4);
}
.smallRing {
    height: var(--smallRingSize);
    width: var(--smallRingSize);
    position: absolute;
    margin-top: var(--smallRingMargin);
    margin-left: var(--smallRingMargin);
    border-radius: 100%;
    box-shadow: 0.5vh 0.5vh 1vh 0 rgba(0, 0, 0, 0.4);
}
.dot {
    height: var(--dotSize);
    width: var(--dotSize);
    position: absolute;
    margin-top: var(--dotMargin);
    margin-left: var(--dotMargin);
    border-radius: 100%;
    box-shadow: 5px 5px 10px 0 rgba(0, 0, 0, 0.9);
}
.smallRing:hover {
    border-radius: 100%;
    box-shadow: 0px 0px 0px 3px silver, 0px 0px 0px 4px black ;
}
.bigRing:hover {
    border-radius: 100%;
    box-shadow: 0px 0px 0px 3px silver, 0px 0px 0px 4px black ;
}
.dot:hover {
    border-radius: 100%;
    box-shadow: 0px 0px 0px 3px silver, 0px 0px 0px 4px black ;
}
.box {
    display: block;
    margin: auto;
    padding: 20px;
    width: var(--boxWidth);
    text-align: center;
    color: rgb(114, 59, 22);
    font-weight: bold;
    background-color: rgba(199, 136, 35, 0.246);
    box-shadow: 0 4px 8px 0 rgba(255, 255, 255, 0.301), 0 6px 20px 0 rgba(0, 0, 0, 0.287);
}
#pname {
    width: var(--pNameWidth);
}
#playAgain {
    -webkit-text-stroke: 0;
}

@media only screen and (max-width: 500px) {
    :root {
        --gameDivSize: 92vw;
        --boxWidth: 90vw;
        --nameInputWidth: 50vw;
        --peiceHolderSize: 15vw;    
        --gameDivBgSize: 98vw;
        --gridGap: 2.4vw;
        --gridPad: 3vw;
        --gridRowNcolumn: 18.5vw;
        --smallRingSize: 8.5vw;
        --smallRingMargin: 3.2vw;
        --dotSize: 3vw;
        --dotMargin: 6vw;
        --pNameWidth: 84vw;
    }
    .nameInput {
        width: 70vw;
    }
    .box {
        padding: 1vw;
    }
    #twoPform .nameInput{
        grid-template-columns: auto auto auto;
        width: 85vw;
    }    
}