body{
     margin: 0;
     padding: 0;
     font-family: "Poppins",sans-serif;
     background-color: aqua;
}
.wrapper{
     width: 33.75em;
     background-color:darkcyan;
     position: absolute;
     padding: 2em;
     transform: translateX(-50%);
     left: 50%;
     top: 1.3em;
     border-radius: 0.5em;
}
.container{
     margin: 1.25em auto;
     width: 33.75em;
     border-radius: 0.6em;
     overflow: hidden;
     background-color: blue;
}
#information{
     display: grid;
     width: 100%;
     grid-template-columns: 1fr 1fr;
}
.player-wrappers{
     display: flex;
     align-items: center;
     flex-direction: column;
}
.player1:before{
     content: "";
     display: inline-block;
     width: 3.12em;
     height: 3.12em;
     border-radius: 50%;
     background: radial-gradient(#fff04e 1.12em,#ffc400 1.25em);
}
.player2:before{
     content: "";
     display: inline-block;
     width: 3.12em;
     height: 3.12em;
     border-radius: 50%;
     background: radial-gradient(#ff4747 1.12em,#c00303 1.25em);
}
#playerTurn{
     margin: 1em 0;
     text-align: right;
}
#playerTurn span{
     font-weight: 600;

}
.startScreen{
     position: absolute;
     top: 0;
     height: 100vh;
     width: 100vw;
     background-image: url(img/bdcd350c-b424-468a-9177-4ff82b9b6f63-cover.png);
     background-size: cover;
     background-position: center;
     display: flex;
     flex-direction: column;
     align-items: center;
     justify-content: center;
}
.startScreen button{
     background-color: #fff04e;
     font-size: 1.4em;
     padding: 0.5em ;
     border: none;
     outline: none;
     border-radius: 2em;
     cursor: pointer;
}
.grid-row{
     margin: 0 auto;
     display: flex;
}
.grid-box{
     width: 5em;
     height: 5em;
     display: grid;
     place-items: center;
     background: radial-gradient(darkcyan 1.37em, aqua 1.42em);
     cursor: pointer;
}
.hide{
     display: none;
}