@font-face {
	font-family: "PressStart2P";
	src: url('../fonts/PressStart2P.ttf') format("truetype");
}
body {
	background-color: #3A372A;
	color: white;
	margin: 0 auto;
	overflow: hidden;
	-webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

.container-fluid {
  margin: 0;
  padding: 0;
}

.row {
 margin: 0;
}

.vertical-center {
  position: relative;
  z-index: 0;
}

@media (min-width: 512px) {
	.row {
		width: 100%;
	}
	.vertical-center {
		min-height: 100%;
		min-height: 90vh;
    display: -webkit-flex;
		display: flex;
    -webkit-align-items: center;
		align-items: center;
	}
}

#game {
	padding: 0px;
	position: relative;
	text-align: center;
     z-index: 1;
}

#gameWrapper {
	position: relative;
	width: 100%;
  padding: 0.3em;
  border-radius: 5px 5px 0 0;
  background: #000;
}

#gameWrapper:after {
    content: '';
    background: url("https://campus.mst.edu/emctest/snakeinvasion/images/wordmark_reverse_black2.png") no-repeat;
    background-size: cover;
    background-position: 0 -1.4vw;
    position: absolute;
    height: 4.5vw;
    bottom: -4.5vw;
    left: 0;
    right: 0;
    border-radius: 0 0 5px 5px;
}

#campus {
	display: block;
	border-radius: 1em;
	width: 100%;
}
/*@media (min-width: 512px) {
	#campus {
		margin-top: 50vh;
		transform: translate(0, -50%);
	}
}*/

#buttonContainer {
  background: #000;
  border-radius: 0 50% 50% 0;
  text-align: right;
  margin: 0 0 0 0;
  padding: 1em;
    z-index: 0;
}
#dPadContainer {
  background: #000;
  border-radius: 50% 0 0 50%;
	text-align: left;
  margin: 0 -5px 0 0;
  padding: 1em;
  z-index: 0;
}

.button {
	display: inline-block;
}

.button img {
	width: 100%;
}

#attackButton {
	width: 100%;
	max-width: 250px;
	border-radius: 50%;
}
/*@media (min-width: 512px) {
	#attackButton {
		margin-top: 50vh;
		transform: translate(0, -50%);
	}
}*/

#muteButton {
	position: absolute;
	bottom: 5%;
	right: 5%;
	width: 10%;
}

#tweet {
	position: absolute;
	bottom: 15%;
	left: 5%;
	cursor: pointer;
  width: 25%;
  display: none;
}

#facebook {
	position: absolute;
	bottom: 5%;
	left: 5%;
	cursor: pointer;
  width: 25%;
  display: none;
}

#facebook_logout {
  position: absolute;
  bottom: 5%;
  left: 32%;
  width: 22%;
  cursor: pointer;
  display: none;
}

#dPad {
	display: block;
	position: relative;
	width: 100%;
	max-width: 250px;
}
/*@media (min-width: 512px) {
	#dPad {
		margin-top: 50vh;
		transform: translate(0, -50%);
	}
}*/

#dPad img {
	width: 100%;
}

#dPad .dPadButton {
	display: inline-block;
	position: absolute;
	width: 33%;
	height: 33%;
}

#dPad .up {
	top: 0px;
	left: 33%;
}

#dPad .down {
	bottom: 0px;
	left: 33%;
}

#dPad .left {
	left: 0px;
	top: 33%;
}

#dPad .right {
	right: 0px;
	top: 33%;
}

.snakeinvasion_footer_links {
    text-align: center;
    color: #fff;
}
.snakeinvasion_footer_links a {
    color: #fff !important;
}
/* ensure that we have round circles around buttons/dpad */

@media (min-width: 1140px) {
  #buttonContainer, #dPadContainer {
   max-width: calc( 250px + 1em ) !important;

  }
  #dPadContainer {
    right: calc( 25% + 250px + 1em );
  }
  #buttonContainer {
    right: calc( -25%  + 250px + 1em );
  }
}

@media (max-width: 512px) {
  #game {
    margin: 0em 0 12vw 0 !important;
  }
  #gameWrapper {
    border-radius: 0;
  }

  #gameWrapper:after {
      content: '';
      background: url("http://campus.mst.edu/emctest/snakeinvasion/images/wordmark_reverse_black2.png") no-repeat;
      background-size: cover;
      background-position: 0 -3.66vw;
      position: absolute;
      height: 7.5vw;
      bottom: -7.5vw;
      left: 0;
      right: 0;
      border-radius: 0 0 5px 5px;
  }
  #dPadContainer, #buttonContainer {
    margin: 0;
  }
}
@media (min-width: 512px) and (max-width: 992px) {
  .container {
    width: 550px;
  }
}
@media (min-width: 512px) and (max-width: 992px) {
  .col-sm-1, .col-sm-2, .col-sm-3, .col-sm-4, .col-sm-5, .col-sm-6, .col-sm-7, .col-sm-8, .col-sm-9, .col-sm-10, .col-sm-11, .col-sm-12 {
    float: left;
  }
  .col-sm-12 {
    width: 100%;
  }
  .col-sm-11 {
    width: 91.66666667%;
  }
  .col-sm-10 {
    width: 83.33333333%;
  }
  .col-sm-9 {
    width: 75%;
  }
  .col-sm-8 {
    width: 66.66666667%;
  }
  .col-sm-7 {
    width: 58.33333333%;
  }
  .col-sm-6 {
    width: 50%;
  }
  .col-sm-5 {
    width: 41.66666667%;
  }
  .col-sm-4 {
    width: 33.33333333%;
  }
  .col-sm-3 {
    width: 25%;
  }
  .col-sm-2 {
    width: 16.66666667%;
  }
  .col-sm-1 {
    width: 8.33333333%;
  }
  .col-sm-pull-12 {
    right: 100%;
  }
  .col-sm-pull-11 {
    right: 91.66666667%;
  }
  .col-sm-pull-10 {
    right: 83.33333333%;
  }
  .col-sm-pull-9 {
    right: 75%;
  }
  .col-sm-pull-8 {
    right: 66.66666667%;
  }
  .col-sm-pull-7 {
    right: 58.33333333%;
  }
  .col-sm-pull-6 {
    right: 50%;
  }
  .col-sm-pull-5 {
    right: 41.66666667%;
  }
  .col-sm-pull-4 {
    right: 33.33333333%;
  }
  .col-sm-pull-3 {
    right: 25%;
  }
  .col-sm-pull-2 {
    right: 16.66666667%;
  }
  .col-sm-pull-1 {
    right: 8.33333333%;
  }
  .col-sm-pull-0 {
    right: auto;
  }
  .col-sm-push-12 {
    left: 100%;
  }
  .col-sm-push-11 {
    left: 91.66666667%;
  }
  .col-sm-push-10 {
    left: 83.33333333%;
  }
  .col-sm-push-9 {
    left: 75%;
  }
  .col-sm-push-8 {
    left: 66.66666667%;
  }
  .col-sm-push-7 {
    left: 58.33333333%;
  }
  .col-sm-push-6 {
    left: 50%;
  }
  .col-sm-push-5 {
    left: 41.66666667%;
  }
  .col-sm-push-4 {
    left: 33.33333333%;
  }
  .col-sm-push-3 {
    left: 25%;
  }
  .col-sm-push-2 {
    left: 16.66666667%;
  }
  .col-sm-push-1 {
    left: 8.33333333%;
  }
  .col-sm-push-0 {
    left: auto;
  }
  .col-sm-offset-12 {
    margin-left: 100%;
  }
  .col-sm-offset-11 {
    margin-left: 91.66666667%;
  }
  .col-sm-offset-10 {
    margin-left: 83.33333333%;
  }
  .col-sm-offset-9 {
    margin-left: 75%;
  }
  .col-sm-offset-8 {
    margin-left: 66.66666667%;
  }
  .col-sm-offset-7 {
    margin-left: 58.33333333%;
  }
  .col-sm-offset-6 {
    margin-left: 50%;
  }
  .col-sm-offset-5 {
    margin-left: 41.66666667%;
  }
  .col-sm-offset-4 {
    margin-left: 33.33333333%;
  }
  .col-sm-offset-3 {
    margin-left: 25%;
  }
  .col-sm-offset-2 {
    margin-left: 16.66666667%;
  }
  .col-sm-offset-1 {
    margin-left: 8.33333333%;
  }
  .col-sm-offset-0 {
    margin-left: 0;
  }
}