@import url('https://fonts.googleapis.com/css?family=Share+Tech+Mono');
.background {
  height: 100%;
  width: 100%;
  position: absolute;
}

button:focus {
  outline-style: none
}

.title {
  width: 400px;
  height: 130px;
  font-family: 'Raleway', sans-serif;
  font-size: 100px;
  font-weight: 100;
  margin-left: 25px;
}

.boardG {
  display: flex;
  flex-direction: row;
  justify-content: center;
  height: 100%;
  width: 100%;
}

.backgroundSquare {
  height: 850px;
  width: 850px;
  background: #424242;
  position: absolute;
  left: 110px;
  top: 260px;
  border-radius: 100% 100% 0 100%;
}

.centerCircle {
  height: 350px;
  width: 350px;
  background: #424242;
  position: absolute;
  left: 350px;
  top: 500px;
  border-radius: 100%;
  color: white;
  font-family: 'Share Tech Mono';
  font-weight: 100;
  font-size: 75px;
  text-align: center;
}

#tl {
  background: #3cba54;
  height: 370px;
  width: 370px;
  border-radius: 100% 0 0 0;
  color: white;
  font-size: 100px;
  font-weight: 200;
  text-align: center;
  position: absolute;
  left: 150px;
  top: 300px;
}

#tr {
  background: #F44336;
  height: 370px;
  width: 370px;
  border-radius: 0 100% 0 0;
  color: white;
  font-size: 100px;
  font-weight: 200;
  position: absolute;
  left: 550px;
  top: 300px;
}

#bl {
  background: #f4c20d;
  height: 370px;
  width: 370px;
  border-radius: 0 0 0 100%;
  color: white;
  font-size: 100px;
  font-weight: 200;
  text-align: center;
  position: absolute;
  left: 150px;
  top: 700px;
}

#br {
  background: #00aaff;
  height: 370px;
  width: 370px;
  border-radius: 0 0 100% 0;
  color: white;
  font-size: 100px;
  font-weight: 200;
  text-align: center;
  position: absolute;
  left: 550px;
  top: 700px;
}

.startButton {
  background: #00aaff;
  color: white;
  outline: none;
  ! font-family: 'Share Tech Mono';
  font-weight: 100;
  font-size: 75px;
  text-align: center;
  margin-top: 25px;
  border-radius: 300px;
  height: 300px;
  width: 300px;
}

.metaText {
  color: white;
  font-family: 'Share Tech Mono';
  font-weight: 100;
  font-size: 35px;
  margin-top: 10px;
  text-align: center;
}

.cardSwitch {
  position: absolute;
  left: 820px;
  top: 950px;
}


/* The switch - the box around the slider */

.switch {
  top: 17px;
  position: relative;
  display: inline-block;
  width: 120px;
  height: 59px;
}


/* Hide default HTML checkbox */

.switch input {
  display: none;
}


/* The slider */

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  -webkit-transition: .4s;
  transition: .4s;
}

.slider:before {
  position: absolute;
  content: " ";
  font-size: 35px;
  font-weight: 400;
  text-align: center;
  height: 45px;
  width: 45px;
  left: 15px;
  bottom: 8px;
  background-color: white;
  -webkit-transition: .4s;
  transition: .4s;
}

input:checked+.slider {
  background-color: #f44336;
}

input:focus+.slider {
  box-shadow: 0 0 1px #2196F3;
}

input:checked+.slider:before {
  -webkit-transform: translateX(10px);
  -ms-transform: translateX(10px);
  transform: translateX(50px);
}


/* Rounded sliders */

.slider.round {
  border-radius: 45px;
}

.slider.round:before {
  border-radius: 50%;
}