html, body { 
  margin: 0;
  width: 100%;
  height: 100%;
  overflow: hidden;
  cursor: crosshair;
}  
 
#c { 
  width: 100%;
  height: 100%;

}

.b {
  position: fixed;
  top: 43vh;
  left: 3vw;
  width: 20vw;
  height: 18vh;
}
.r {
  position: fixed;
  top: 43vh;
  right: 3vw;
  width: 20vw;
  height: 18vh;
}
.B {
  margin: auto;
  width: 50%;
  height: 60%;
  position: fixed;
  top: 20vh;
  left: 25%;

} 
.R {
  margin: auto;
  width: 60%;
  height: 70%;
  position: fixed;
  top: 20vh;
  left: 19%;

}

.display {
  width: 100%;
  height: 100%;
  margin: 0;
  position: fixed;
  top: 0;
  left: 0;
  background: url(https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS0gyG1FNj9TAdjtlwdMEvvGNfrI2x2rG6uag&s);
  background-size: cover;
  /*background-color: rgba(150,0,150, .2);
  //backdrop-filter: blur(8px);*/
}
 
.screen {
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  margin: auto;
  background-color: rgba(150,0,150, .2);
  backdrop-filter: blur(8px);
  display: flex;
  justify-content: center;
  align-items: center;
}
.start {
  width: 50%;
  height: 50%;
  font-size: 7vw;
  color: yellow;
  border: .3vh solid grey;
  border-radius: 10px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.start:hover {
  border: .5vh solid yellow;
  background-color: rgba(255, 255, 0, 0.2);
  font-size: 7.2vw;
  color: white;
}
.playerMode {
  width: 100%;
  text-align: center;
}
.vsButton, .oneButton {
  background-color: transparent;
  color: gold;
  border: .4vh solid grey;
  border-radius: 1.7vh;  
  width: 40%;
  font-size: 3.9vw;
  font-weight: bold;
  margin: 6vh auto;
  text-align: center;
  position: relative;
  cursor: pointer;
}
.vsButton:hover, .oneButton:hover {
  background-color: rgba(255, 255, 0, 0.2);
  color: white;
  border: .4vh solid yellow;
  font-size: 4vw;
}
.nOne {
  background-color: rgba(200, 200, 200, .3);
  color: lightgrey;
  border: .4vh solid grey;
  border-radius: 1.7vh;  
  width: 40%;
  font-size: 3.9vw;
  font-weight: bold;
  margin: 6vh auto;
  text-align: center;
  position: relative;
  cursor: not-allowed;
}
.blueColor {
  background-color: rgba(0, 4, 248, 0.5);
  color: white;
  font-size: 2.5rem;
  text-align: center;
  position: relative;
  top: 50%;
}
.redColor {
  background-color: rgba(248, 0, 0, 0.5);
  color: white;
  font-size: 2.5rem;
  text-align: center;
  position: relative;
  top: 50%;
}
.coinToss {
  width: 50%;
  height: 80vh;
  margin: auto;
  text-align: center;
}
.textLine {
  color: yellow;
  width: 100%;
  height: 9vw;
  font-size: 6.3vw;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center;  
}
.clicker {
  /*border: .5vh solid rgba(255, 255, 0, 0.5);;
  background-color: rgba(220, 220, 220, 0.17);
  color: rgba(255, 255, 0, 0.5);*/
  width: 10vw;
  height: 7vh;
  border-radius: 1.5vh;
  margin: 3vh auto 7vh auto;
  display: flex;
  justify-content: center;
  align-items: center; 
  font-size: 7vh;
  cursor: none;

}
.click {
  /*border: .5vh solid rgba(255, 255, 0, 0.5);;
  border-radius: 1.5vh;
  background-color: rgba(220, 220, 220, 0.17);*/
  border: .6vh solid rgb(225, 225, 0);
  color: rgba(225,225,0, .9);  
  background-color: rgba(220,220,220, 0.37);
  cursor: pointer;

}
.click:hover {
  color: rgba(255,255,0, 1);  
  background-color: rgba(255,255,255, 0.5);

}
.clik {
  border: .6vh solid rgba(225,225,0, 0.9);
  color: rgba(225,225,0, 0.9);  
  background-color: rgba(220, 220, 220, 0.37);
}
.who {
  width: 25vh;
  height: 25vh;
  margin: auto;
}
.who1st {
  border: 2px solid purple;
  border-radius: 50%;
  color: white;
  cursor: none;

  animation-name: spin;
  animation-duration: .3s;
  animation-iteration-count: infinite;
  animation-timing-function: linear;

}
@keyframes spin {
  0% {
    width: 3vh;
    background-color: red;
  }
  25% { 
    width: 25vh;
   }
  49% {
    width: 10vh;
  }
  50% {
    width: 3vh;
    background-color: blue;
  }
  75% {
    width: 25vh;
  }
  99% {
    width: 10vh;
  }
  100% {
    width: 3vh;
    background-color: red;
  }
}
.red1st {
  border: .2vh solid yellow;
  background-color: rgba(248,0,0, .7);
  border-radius: 50%;

}
.blue1st {
  border: .2vh solid yellow;
  background-color: rgba(0,4,248, .7);
  border-radius: 50%;

}

.win {
  background-color: rgba(150,0,150, .2);
  backdrop-filter: blur(8px);
  border-radius: 3vh;
  width: 100%;
  height: 100%;
  position: fixed;
  top: 0;
  left: 0;
  text-align: center;
  cursor: crosshair;
}
.winner {
  margin: auto;
  width: 50%;
  height: 50%;
  position: relative;
  top: 5vh;
  font-size: 10vw;
  display: flex;
  justify-content: space-around;
  align-items: center;

}
.reload {
  margin: auto;
  width: 90%;
  height: 35%;
  position: relative;
  display: flex;
  justify-content: center;

}
.restart {
  border: .5vh solid lightgrey;
  border-radius: 7vh;
  height: 80%;
  width: 60vw;
  font-size: 5.7vw;  
  color: yellow;
  display: flex;
  justify-content: center;
  align-items: center;

}
.restart:hover {
  border: .6vh solid yellow;
  background-color: rgba(236,232,1, 0.2);
  color: white;
  font-size: 5.8vw;
  cursor: pointer;
}
.move {
  margin: auto;
  width: 50%;
  height: 45%;
  position: relative;
  top: 5vh;
  color: yellow;
  font-size: 8vw;
  display: flex;
  justify-content: space-around;
  align-items: center;
} 
.rounds {
  margin: auto;
  width: 90%;
  height: 35%;
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;

} 
.coin {
  width: 35vh;
  height: 35vh;
  border-radius: 50%;
  border: .7vh solid yellow;
  font-size: 35vh;
  text-align: bottom;
  display: flex;
  justify-content: center;
  align-items: center; 
  cursor: pointer;
  
}
.coin:hover {
  color: rgba(225,225,0, .9);
}

#center {
  background-color: transparent;
  width: 50%;
  position: fixed;
  top: 0;
  left: 25%;
  color: white;
  text-align: center;
  padding: auto auto 0 auto;
  cursor: crosshair;
}
#name { 
  border-top: 1px solid darkgrey;
  font-size: 5.6vw;
}
#d {
  opacity: .3;
}
#d:hover {
  color: yellow;
  opacity: .6;
  cursor: not-allowed;
}
#centerButtons {
  border-top: 1px solid darkgrey;
  width: 100%;
  margin: auto;
  display: flex;
  justify-content: center;
  align-items: center;
}
#demo, #howTo {
  background-color: rgba(255, 255, 255, 0.2);
  width: 5vw;
  height: 4vh;
  color: black;
  font-size: .1vh;
  border-radius: 5px;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: not-allowed;
}
#demo:hover, #howTo:hover {
  background-color: rgba(255, 255, 0, 0.2);
  border-bottom: .1vh solid white;
  color: white;
  font-size: 1.7vw;
}
#space {
  background-color: transparet;
  width: 5vw;

}
.endReset {
  border-left: .4vh solid lightgrey;
  border-bottom: .4vh solid lightgrey;
  border-right: .4vh solid lightgrey;
  border-bottom-left-radius: 2.5vh;
  border-bottom-right-radius: 2.5vh;
  width: 35%;
  height: 7vh;
  margin: auto;
  position: relative;
  top: 0;
  font-size: 3vh;  
  color: yellow;
  display: flex;
  justify-content: space-around;
  align-items: center;
  cursor: pointer;

}
.endReset:hover {
  border-left: .6vh solid yellow;
  border-bottom: .6vh solid yellow;
  border-right: .6vh solid yellow;
  background-color: rgba(236,232,1, 0.2);
  color: white;
  font-size: 3.2vh;

}
.reset {
  border-left: .3vh solid lightgrey;
  border-bottom: .3vh solid lightgrey;
  border-right: .3vh solid lightgrey;
  border-bottom-left-radius: 1vh;
  border-bottom-right-radius: 1vh;
  background-color: transparent;
  width: 6vw;
  height: 2.9vh;
  color: darkgrey;
  font-size: .8vh;
  margin: auto;
  position: relative;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.reset:hover {
  background-color: rgba(255, 255, 0, 0.2);
  height: 5.6vh;
  color: white;
  font-size: 3.5vh;
}
.endGame {
  border-left: .4vh solid rgb(255, 255, 255);
  border-bottom: .4vh solid rgb(255, 255, 255);
  border-right: .4vh solid rgb(255, 255, 255);
  border-bottom-left-radius: 7vh;
  border-bottom-right-radius: 7vh;
  background-color: rgba(16, 233, 9, 0.986);
  width: 35%;
  height: 7vh;
  margin: auto;
  position: relative;
  top: 0;
  font-size: 4.7vh;  
  font-weight: 800;
  color: white;
  display: flex;
  justify-content: space-around;
  align-items: center;
  cursor: pointer;

}
.endGame:hover {
  border-left: .5vh solid rgb(255, 255, 255);
  border-bottom: .5vh solid rgb(255, 255, 255);
  border-right: .5vh solid rgb(255, 255, 255);
  background-color: rgba(16, 233, 9, 0.75);
  color: white;
  font-size: 5vh;

}
.resetting {
  border-bottom-left-radius: 1vh;
  border-bottom-right-radius: 1vh;   
  background-color: orangered;
  width: 6.6vw;
  color: white;
  font-family: "courier new", monospace;
  font-size: 1.7vh;
  font-weight: 500;
  margin: auto;
  position: relative;
  top: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  cursor: pointer;  
}
.resetting:hover {
  border-left: .2vh solid rgb(255, 255, 255);
  border-bottom: .2vh solid rgb(255, 255, 255);
  border-right: .2vh solid rgb(255, 255, 255);
 
}

.chooseBlue {
  border: .5vh solid purple;
  border-radius: 1vw;
  background-color: rgba(0, 0, 255, .7);
  width: 20vw;
  height: 40vh;
  position: fixed;
  top: 1vw;
  left: 3vw;
  cursor: pointer;
}
.chooseBlue:hover {
  border: .6vh solid lightgrey;
  background-color: rgba(0, 0, 255, .8);
  color: white;
  font-size: 13vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.blueScoreBoard {
  border: .5vh solid rgba(0, 0, 255, .7);
  border-radius: 1vw;
  background-color: transparent;
  width: 20vw;
  height: 40vh;
  position: fixed;
  top: 1vw;
  left: 3vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.bluePlayer {
  border: 1.3vh solid rgba(0, 0, 255, .7);
  border-radius: 1vw;
  width: 88%;
  height: 88%;
}
.blueInfo {
  position: relative;
  border-top-left-radius: .9vh;
  border-top-right-radius: .9vh;
  color: silver;
  font-size: 3.5vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.chooseRed {
  border: .5vh solid purple;
  border-radius: 1vw;
  background-color: rgba(255, 0, 0, .7);
  width: 20vw;
  height: 40vh;
  position: fixed;
  top: 1vw;
  right: 3vw;
  cursor: pointer;
}
.chooseRed:hover {
  border: .6vh solid lightgrey;
  background-color: rgba(255, 0, 0, .8);
  color: white;
  font-size: 13vh;
  display: flex;
  justify-content: center;
  align-items: center;
}
.redScoreBoard {
  border: .5vh solid rgba(255, 0, 0, .7);
  border-radius: 1vw;
  background-color: transparent;
  width: 20vw;
  height: 40vh;  
  position: fixed;
  top: 1vw;
  right: 3vw;
  display: flex;
  justify-content: center;
  align-items: center;
}
.redPlayer {
  border: 1.3vh solid rgba(255, 0, 0, .7);
  border-radius: 1vw;
  width: 88%;
  height: 88%;
}
.redInfo {
  position: relative;
  border-top-left-radius: .9vh;
  border-top-right-radius: .9vh;
  color: silver;
  font-size: 3.5vw;
  display: flex;
  justify-content: center;
  align-items: center;
}

.blueSide, .redSide  {
  position: relative;
  display: flex;
  justify-content: center;
  align-items: center;
}
.blueScore, .redScore {
  width: 75%;
  margin: 1vw auto 1vw auto;
  display: flex;
  justify-content: center;
  align-items: center;
  font-size: 17vh;
  border-radius: 50%;
  color: lightgrey;
}
.blueScore {
  background-color: rgba(0, 4, 248, 0.3);
}
.redScore {
  background-color: rgba(255,0,0, .4);
}
.redTurn {
  color: yellow;
  background-color: rgba(255,0,0, .7);
}
.blueTurn {
  color: yellow;
  background-color: rgba(0,0,255, .7);
}
.redR {
  color: rgba(255,0,0, .7);
}
.blueR {
  color: rgba(0,0,255, .7);
}

.red {
  color: red;
}
.blue {
  color: blue;
}
.purple {
  color: purple;
}
.yellow {
  color: yellow;
}




#data {
  border: 1px solid green;
  position: fixed;
  top: 54%;
  left: 2%;
  background-color: black;
  color: white;
}
#on, .on {
  border: 1px solid green;
  width: 270px;
  height: 20px;
  position: relative;
  text-align: center;
}
.on:hover {
  border: 1px solid blue;
  background: grey;
  color: black;
  cursor: pointer;
}
.music {
  border: .3vh solid lightgrey;
  width: 6vw;
  height: 3vh;
  position: fixed;
  left: 50%;
  bottom: 5%;
  background-color: transparent;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  text-align: center;
}
#button {
  width: 50%;
  height: 100%;
  border: .2vh solid greenyellow;
  background-color: transparent;

}