body {
  background-image : url("https://www.amf-designs.com/wp-content/uploads/2/2-lavish-wooden-table-top-display-case-wooden-table-top-hockey-game-wooden-tabletop-basketball-game-wooden-tabletop-baseball-game-wood-coffee-table-glass-top-wood-dining-table-glass-top-wood-ba.jpg");
}
.container-fluid {
  background-color:yellow;
}
sup {
  font-size:0.3em;  
  vertical-align:middle;
  position: relative;
  top: -1.5em;
}
.game-board {
  top:50%;
  left:50%;
  margin-top:-250px;
  margin-left:-250px;
  background-color:transparent;
  position:absolute;
  width:500px;
  height:500px;
}
.row {

  margin:0 auto;
  width:100%;
  background-color:transparent;
  height:250px;
}
.quarter {
  height:100%;
  float:left;
  width:50%;
  background-color:red;
  border:10px solid #212121;
}
.bottom-left {
  border-bottom-left-radius:100%;
  border-bottom:20px solid #212121;
  border-left: 20px solid #212121;
  background-color:#FDD835;
}
.bottom-right {
  border-bottom-right-radius:100%;
  border-bottom:20px solid #212121;
  border-right: 20px solid #212121;
  background-color:#303F9F;
}
.top-left {
  border-top:20px solid #212121;
  border-left: 20px solid #212121;
  border-top-left-radius:100%;
  background-color:#2E7D32;
}
.top-right {
  border-top:20px solid #212121;
  border-right: 20px solid #212121;
  border-top-right-radius:100%;
  background-color:#d32f2f;
}
.top-left-active {
  background-color:#00C853;
}
.top-right-active {
  background-color:radial-gradient(#d50000 , ff5252);
} 
.bottom-left-active {
  background-color:#FFD600;
}
.bottom-right-active {
  background-color:#0091EA;
}
.options {
  position:absolute;
  top:50%;
  left:50%;
  margin-top:-125px;
  margin-left:-125px;
  width:250px;
  height:250px;
  background-color:#eaedf2;
  border-radius:100%;
  border:10px solid #232223;
}
h1 {
  font-size:3em;
  color:#19012d;
  font-weight:bold;
}
.score p {
  font-size:2em;
  letter-spacing:4px;
}
.score {
  line-height:35px;
  text-align:center;
  border-radius:5px;
  position:absolute;
  width:50px;
  height:35px;
  top:50%;
  left:24%;
  background-color:#840a1c;
}

.start {
  -webkit-box-shadow: 1px 2px 2px 2px rgba(0,0,0,0.75);
-moz-box-shadow: 1px 2px 2px 2px rgba(0,0,0,0.75);
box-shadow: 1px 2px 2px 2px rgba(0,0,0,0.75);
  position:absolute;
  border-radius:100%;
  border:3px solid #6d6c6d;
  width:25px;
  height:25px;
  background-color:red;
  top:52%;
  left:50%;
}
.start:active {
  -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 0px 0px white;
}
.strict:active {
  -webkit-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 0px 0px 0px rgba(0,0,0,0.75);
box-shadow: 0px 0px 0px 0px white;
}
.strict {
  -webkit-box-shadow: 1px 2px 2px 2px rgba(0,0,0,0.75);
-moz-box-shadow: 1px 2px 2px 2px rgba(0,0,0,0.75);
box-shadow: 1px 2px 2px 2px rgba(0,0,0,0.75);
  position:absolute;
  border-radius:100%;
  border:3px solid #6d6c6d;
  width:25px;
  height:25px;
  background-color:yellow;
  top:52%;
  left:65%;
}
/* to fix the line spacing problem */
.score p {
  margin-left:2px;
}

.score:after {
  font-size:1em !important;
  left:8px;
  content:"Score";
  margin:0 auto;
  text-align:center;
  position:absolute;
  bottom:-28px;
  display:block;
}
.start:after {
  left:-6px;
  content:"Start";
  margin:0 auto;
  text-align:center;
  position:absolute;
  bottom:-30px;
  display:block;
}
.strict:after {
  left:-5px;
  content:"Strict";
  margin:0 auto;
  text-align:center;
  position:absolute;
  bottom:-30px;
  display:block;
}
.power {
  position:absolute;
  width:100%;
  bottom:10%;
  height:25px;
}
.slider {
  width:25%;
  height:100%;
  background-color:black;
  margin:0 auto;
  border-radius:5px;
}
.power p {
  display:inline;
}
.pointer-left {
  border-radius:5px;
  width:50%;
  height:100%;
  background-color:#1976D2;
  float:left;
}
.pointer-right {
  float:right;
}
.slider:before {
  top:2px;
  font-weight:bold;
  content: "OFF";
  display:block;
  position:absolute;
  left:50px;
}
.slider:after {
  top:2px;
  font-weight:bold;
  content: "ON";
  display:block;
  position:absolute;
  right:60px;
}

.score-powered {
  color:#BDBDBD;
}

@media (max-width: 500px) {
  .score {
    top:40%;
  }
  .start {
    top:41.7%;
  }
  .strict {
    top:41.7%;
  }
  h1 {
    font-size:2em;
  }
  .options {
    position:fixed;
    top:0px;
    left:0px;
    margin-top:0;
    margin-left:0;
    width:100%;
    height:25%;
    border-radius:0;
    border:0;
  }
  .game-board {
/*   the margin top part was taken from https://stackoverflow.com/questions/38653353/adjust-margins-depending-on-browsers-window-size   */
    margin-left:-0px !important;
    margin-top:25vh !important;
    position:fixed;
    left:0px;
    top:0px;
    height:75%;
    width:100%;
    border-radius:0;
    border:0;
  }
  .row {
    margin:0 auto;
    width:100%;
    height:50%;
    radius:0;
    border:0;
  }
  
  .top-left {
    border-top:0px solid white;
    border-left:0px solid white;
    width:50%;
    border-radius:0;
  }
  .top-right {
    border-right:0px solid white;
    border-left:0px solid white;
    width:50%;
    border-radius:0;
  }
  .bottom-right {
    border-right:0px solid white;
    border-left:0px solid white;
    width:50%;
    border-radius:0;
  }
  .bottom-left {
    border-right:0px solid white;
    border-left:0px solid white;
    width:50%;
    border-radius:0;
  }
  .quarter {
  height:100%;
  float:left;
  width:50%;
  border:0px solid white;
  }
  
}
@media (max-height: 600px) and (max-width:500px) {
  .options {
    height:50%;
  }
  .game-board {
    margin-top:38vh !important;
  }
}