body, html {
  background-color: lightgrey; }

#button {
  background-color: #16a085;
  width: 100px;
  height: 40px;
  display: block;
  margin: 0 auto;
  font-family: 'Play';
  text-align: center;
  color: white;
  padding-top: 10px;
  box-shadow: 0px 2px 10px #424242; }

#game {
  width: 320px;
  height: 320px;
  border-radius: 160px;
  box-shadow: 0 0 10px 5px #333333;
  background-color: black;
  margin: 20vh auto 0 auto;
  position: relative; }
  #game div {
    position: relative;
    width: 158px;
    height: 158px; }
  #game #color1 {
    background-color: #f44336;
    display: inline-block;
    position: relative;
    border-radius: 50vw 0 0 0;
    z-index: 1; }
  #game #color1:active {
    background-color: #c62828; }
  #game #color2 {
    background-color: #2196F3;
    display: inline-block;
    position: relative;
    border-radius: 0 50vw 0 0;
    z-index: 1; }
  #game #color2:active {
    background-color: #1565C0; }
  #game #color3 {
    background-color: #FFEB3B;
    display: inline-block;
    position: relative;
    border-radius: 0 0 50vw 0;
    margin-top: -80px;
    z-index: 1; }
  #game #color3:active {
    background-color: #F9A825; }
  #game #color4 {
    background-color: #4CAF50;
    display: inline-block;
    position: relative;
    border-radius: 0 0 0 50vw;
    margin-top: -80px;
    z-index: 1; }
  #game #color4:active {
    background-color: #2E7D32; }

#centerDisk {
  z-index: 4;
  background-color: black;
  position: absolute;
  display: block;
  text-align: center;
  color: red;
  border-radius: 50vw;
  box-shadow: 0 0 5px 3px black;
  text-shadow: 0px 0px 5px red;
  font-family: 'Play'; }

#footer {
  text-align: center;
  font-size: 20px;
  width: 100vw;
  height: 10vh;
  position: fixed;
  bottom: 0;
  background-color: grey;
  color: white;
  box-shadow: 0px -3px 10px #424242; }
  #footer a {
    color: white; }
  #footer a:hover {
    text-decoration: none; }
  #footer a:visited {
    text-decoration: none; }

span {
  color: #e74c3c;
  text-shadow: 0px 0px 20px white; }

@media only screen and (min-width: 320px) {
  #button {
    font-size: 20px; }

  #game {
    margin: 10vh auto 0 auto;
    width: 320px;
    height: 320px;
    border-radius: 100vw; }
    #game div {
      width: 158px;
      height: 160px -2px; }
    #game #color1 {
      border-radius: 50vw 0 0 0; }
    #game #color2 {
      border-radius: 0 50vw 0 0; }
    #game #color3 {
      border-radius: 0 0 50vw 0;
      margin-top: -80px; }
    #game #color4 {
      border-radius: 0 0 0 50vw;
      margin-top: -80px; }

  #centerDisk {
    width: 160px;
    height: 160px;
    font-size: 50px;
    padding-top: 40px;
    border-radius: 50vw;
    margin: -80px auto 0 auto; }

  #footer {
    padding-top: 10px; } }
@media only screen and (min-width: 375px) {
  #button {
    font-size: 15px; }

  #game {
    margin-top: 10vh;
    width: 375px;
    height: 375px;
    border-radius: 100vh; }
    #game div {
      width: 185.5px;
      height: 185.5px; }
    #game #color1 {
      border-radius: 50vw 0 0 0; }
    #game #color2 {
      border-radius: 0 50vw 0 0; }
    #game #color3 {
      border-radius: 0 0 50vw 0;
      margin-top: -93.75px; }
    #game #color4 {
      border-radius: 0 0 0 50vw;
      margin-top: -93.75px; }

  #centerDisk {
    width: 187.5px;
    height: 187.5px;
    font-size: 60px;
    padding-top: 46.875px;
    border-radius: 50vw;
    margin: -93.75px auto 0 auto; }

  #footer {
    padding-top: 20px; } }
@media only screen and (min-width: 425px) {
  #button {
    font-size: 20px; }

  #game {
    margin-top: 10vh;
    width: 425px;
    height: 425px;
    border-radius: 100vh; }
    #game div {
      width: 210.5px;
      height: 210.5px; }
    #game #color1 {
      border-radius: 50vw 0 0 0; }
    #game #color2 {
      border-radius: 0 50vw 0 0; }
    #game #color3 {
      border-radius: 0 0 50vw 0;
      margin-top: -106.25px; }
    #game #color4 {
      border-radius: 0 0 0 50vw;
      margin-top: -106.25px; }

  #centerDisk {
    width: 212.5px;
    height: 212.5px;
    font-size: 70px;
    padding-top: 53.125px;
    border-radius: 50vw;
    margin: -106.25px auto 0 auto; } }
@media only screen and (min-width: 768px) {
  #button {
    font-size: 15px; }

  #game {
    margin-top: 15vh;
    width: 384px;
    height: 384px;
    border-radius: 100vh; }
    #game div {
      width: 190px;
      height: 190px; }
    #game #color1 {
      border-radius: 50vw 0 0 0; }
    #game #color2 {
      border-radius: 0 50vw 0 0; }
    #game #color3 {
      border-radius: 0 0 50vw 0;
      margin-top: -96px; }
    #game #color4 {
      border-radius: 0 0 0 50vw;
      margin-top: -96px; }

  #centerDisk {
    width: 192px;
    height: 192px;
    font-size: 60px;
    padding-top: 48px;
    border-radius: 50vw;
    margin: -96px auto 0 auto; } }
@media only screen and (min-width: 1024px) {
  #button {
    font-size: 20px;
    width: 150px;
    height: 50px; }

  #game {
    margin-top: 3vh;
    width: 512px;
    height: 512px;
    border-radius: 100vh; }
    #game div {
      width: 254px;
      height: 254px; }
    #game #color1 {
      border-radius: 50vw 0 0 0; }
    #game #color2 {
      border-radius: 0 50vw 0 0; }
    #game #color3 {
      border-radius: 0 0 50vw 0;
      margin-top: -128px; }
    #game #color4 {
      border-radius: 0 0 0 50vw;
      margin-top: -128px; }

  #centerDisk {
    width: 256px;
    height: 256px;
    border-radius: 50vw;
    font-size: 60pt;
    padding-top: 64px;
    margin: -128px auto 0 auto; }

  #footer {
    padding-top: 10pt;
    font-size: 30px; } }
@media only screen and (min-width: 1420px) {
  #button {
    font-size: 20px; }

  #game {
    margin-top: 3vh;
    width: 512px;
    height: 512px;
    border-radius: 100vh; }
    #game div {
      width: 254px;
      height: 254px; }
    #game #color1 {
      border-radius: 50vw 0 0 0; }
    #game #color2 {
      border-radius: 0 50vw 0 0; }
    #game #color3 {
      border-radius: 0 0 50vw 0;
      margin-top: -128px; }
    #game #color4 {
      border-radius: 0 0 0 50vw;
      margin-top: -128px; }

  #centerDisk {
    width: 256px;
    height: 256px;
    border-radius: 50vw;
    font-size: 60pt;
    padding-top: 64px;
    margin: -128px auto 0 auto; } }

/*# sourceMappingURL=style.css.map */