*{
    text-align:center;
    font-family: 'Mochiy Pop P One', sans-serif;
}

html{
    background-image: url('https://cdn.pixabay.com/photo/2015/12/01/20/28/forest-1072828_960_720.jpg');
    background-repeat: no-repeat;
    background-size: cover;
    display: flex;
    align-items: center;
    justify-content: center;
}
body{
    width:1200px;
    background-color: rgb(243, 225, 225,0.7);
    box-sizing: border-box;
    height: 1000px;
    
}

header{
    height:100px;
    background-color: rgb(39, 32, 32);
    display:flex;
    padding:0px 20px;
    align-items:center;
    justify-content:space-around;
    box-shadow:20px 20px 50px rgb(34, 32, 32); 
}
header h1{
    color:white;
    flex:1;
    text-align:center;
}

.gameBoard{
    margin-top:50px;
    display:inline-table;
    width:600px;
    box-shadow:20px 20px 50px rgb(34, 32, 32); 
   
}
.playAgain{
    flex:1;
    height:70px;
    width:200px;
    background-color: rgb(255, 134, 53);
    color:rgb(250, 244, 237);
    font-size: 18px;
    border-radius: 5px;
    margin-top: 15px;
    font-size: 25px;
    display:block;
    
}

main{
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content:space-around;
}
.outcome{
    height:100px;
    margin-left:5px;
    margin-right:5px;
    width:900px;
    box-shadow:20px 20px 50px rgb(2, 42, 30); 
    position:fixed;
    top:800px;
    padding: 5px;
    display: flex;
    background-color: rgb(5, 63, 43);
    align-items: justify;
    justify-content: space-around;
    border: 2px solid rgb(2, 34, 24);
    border-radius: 5px;
    
}


.report{
    color:rgb(248, 244, 241);
    margin-top: 30px;
}
.manu{
    background-color: rgba(23, 25, 29, 0.8);
    margin-top:100px;
    padding: 30px;
     box-shadow: 20px 20px 20px rgb(5, 39, 25);
}

.forms{
    display: flex;
    align-items: justify;
    justify-content: space-around;
     width: 900px;
}

.rad{
    text-align: left;
    align-items: left;
    margin-left: 0;
    font-size: 22px;
    border: 2px solid rgb(5, 39, 25);
    padding: 10px;
    background-color: rgb(5, 63, 43,0.5);
   box-shadow: 20px 20px 20px rgb(5, 39, 25);
    width: 300px;
    color:white;
   font-size: 25px;
}

.playerLabel{
    text-align: justify;
    align-items: center;
    font-size: 25px;
    
}
.start{
    margin-top: 20px;
    padding:10px 30px;
    color:rgb(255, 255, 255);
    background-color:rgb(5, 78, 161);
    border: 2px outset rgb(181, 181, 187);
    border-radius: 5px;
    font-size: 25px;
}
.start:hover{
    background-color:rgb(117, 174, 200);
}
#player1Name,#player2Name{
    text-align: left;
    font-size: 25px;
    width: 200px;
    color:rgb(0, 85, 243);
   background-color:rgb(235, 223, 223,0);
}
.markerBox{
    
   text-align: left;
   
}
#marker1,#marker2{
    width: 50px;
    font-size: 25px;
    padding-bottom: 10px;
    color:rgb(0, 85, 243);
   background-color:rgb(235, 223, 223,0);
    
}
.playerBox{

    font-size: 30px;
    color:white;
    text-align: left;
}
input[type=radio] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;

  border-radius: 50%;
  width: 20px;
  height: 20px;

  border: 2px solid #999;
  transition: 0.2s all linear;
  margin-right: 5px;

 

}

input[type=radio]:checked {
  border: 6px solid rgb(202, 128, 8);
  outline: unset;
  background-color: rgb(255, 251, 35);
}