/* common css start  */
*{
    margin: 0;
    padding: 0;
    outline: 0;
}
a{
    text-decoration: none;
    text-align: center;
}
.container{
    width: 600px;
    margin: 0 auto;
}
/* common css end  */


/* screen one start */
.screenonedetails{
    width: 665px;
    padding: 30px;
    height: 306px;
    margin-top: 100px;
    background: rgb(255, 254, 254);
    border: 1px solid black;  
    border-radius: 20px;
}
.screenonename h1{
    font-size: 48px;
    font-weight: 700;
    color: #000000;
    text-align: center;
}
.oneinputfield{
    width: 500px;
    border-radius: 79px;
    padding: 20px 20px;
    border: 1px solid #D9D9D9;
    
}
.screenoneinputfield{
    margin-top: 20px;
    text-align: center;
}
.oneinputfield::placeholder{
    color: #b8b3b3;
    font-size: 15px;
    font-weight: 700;
}

.onebtn{
    width: 150px;
    height: 37px;
    background: #7041D3;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
}
.screenonebutton{
    text-align: center;
    margin-top: 20px;
    
}
.oneerrortext{
    width: 421px;
    height: 53px;
    background-color: #CC3030;
    margin: 0 auto;
    margin-top: 20px;
    border-radius: 20px;
    display: none;
    
}
.oneerrortext h3{
    font-size: 30px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    padding-top: 5px;
}
/* screen one end */


/* player one start */
.playeronedetails{
    width: 665px;
    padding: 30px;
    height: 306px;
    margin-top: 100px;
    background: rgb(255, 254, 254);
    border: 1px solid black;  
    border-radius: 20px;
    display: none;
}
.playeronename h1{
    font-size: 48px;
    font-weight: 700;
    color: #000000;
    text-align: center;
}
.playeroneinputfield{
    margin-top: 20px;
    text-align: center;
}
.playeronefield{
    width: 500px;
    border-radius: 79px;
    padding: 20px 20px;
    border: 1px solid #D9D9D9;
    
}
.playeronefield::placeholder{
    color: #b8b3b3;
    font-size: 15px;
    font-weight: 700;
}
.playeronebtn{
    width: 150px;
    height: 37px;
    background: #7041D3;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
}
.playeronebutton{
    text-align: center;
    margin-top: 20px;
    
}
.playeroneerrortext{
    width: 400px;
    height: 50px;
    background-color: #CC3030;
    margin: 0 auto;
    margin-top: 20px;
    border-radius: 20px;
    display: none;
    
}
.playeroneerrortext h3{
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    padding-top: 5px;
}
/* player one end */


/* screen two start */
.screentwodetails{
    width: 665px;
    padding: 30px;
    height: 306px;
    margin-top: 100px;
    background: rgb(255, 254, 254);
    border: 1px solid black;  
    border-radius: 20px;
    display: none;
}
.screentwoname h1{
    font-size: 48px;
    font-weight: 700;
    color: #000000;
    text-align: center;
}
.screentwoinputfield{
    margin-top: 20px;
    text-align: center;
}
.screentwofield{
    width: 500px;
    border-radius: 79px;
    padding: 20px 20px;
    border: 1px solid #D9D9D9;
    
}
.screentwofield::placeholder{
    color: #b8b3b3;
    font-size: 15px;
    font-weight: 700;
}
.screentwobtn{
    width: 150px;
    height: 37px;
    background: #7041D3;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
}
.screentwobutton{
    text-align: center;
    margin-top: 20px;
    
}
.screentwoerrortext{
    width: 400px;
    height: 50px;
    background-color: #CC3030;
    margin: 0 auto;
    margin-top: 20px;
    border-radius: 20px;
    display: none;
    
}
.screentwoerrortext h3{
    font-size: 30px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    padding-top: 5px;
}
/* screen two end */



/* player one start */
.playertwodetails{
    width: 665px;
    padding: 30px;
    height: 306px;
    margin-top: 100px;
    background: rgb(255, 254, 254);
    border: 1px solid black;  
    border-radius: 20px;
    display: none;
}
.playertwoname h1{
    font-size: 48px;
    font-weight: 700;
    color: #000000;
    text-align: center;
}
.playertwoinputfield{
    margin-top: 20px;
    text-align: center;
}
.playertwofield{
    width: 500px;
    border-radius: 79px;
    padding: 20px 20px;
    border: 1px solid #D9D9D9;
    
}
.playertwofield::placeholder{
    color: #b8b3b3;
    font-size: 15px;
    font-weight: 700;
}
.playertwobtn{
    width: 150px;
    height: 37px;
    background: #7041D3;
    border: none;
    border-radius: 20px;
    cursor: pointer;
    color: #ffffff;
    font-size: 15px;
    font-weight: 700;
}
.playertwobutton{
    text-align: center;
    margin-top: 20px;
    
}
.playertwoerrortext{
    width: 421px;
    height: 53px;
    background-color: #CC3030;
    margin: 0 auto;
    margin-top: 20px;
    border-radius: 20px;
    display: none;
    
}
.playertwoerrortext h3{
    font-size: 28px;
    font-weight: 700;
    color: #ffffff;
    text-align: center;
    padding-top: 5px;
}
/* player one end */

.playerTwoWiningScreen{
    /* width: 300px;
    height: 300px; */
    /* background-color: #CC3030; */
    display: none;
    margin: 0 auto;
}


.playerOneWiningScreen{
    /* width: 300px;
    height: 300px;
    background-color: #CC3030; */
    display: none;
    margin: 0 auto;
    
}

.playerTwoWiningScreen h2{
    text-align: center;
  font-size: 100px;
  margin-top: 365px;
}
.playerOneWiningScreen h2{
    text-align: center;
  font-size: 100px;
  margin-top: 365px;
}