body {
  background-color: #aaa;
  user-select: none;
  word-wrap: break-word;
  margin: 0;
  overflow: hidden;
  font-family: sans-serif;
}

:focus {
  outline: none;
}

#gameContainer {
  max-width: 480px;
  height: 320px;
  cursor: none;
}

#wrapper {
  margin: 0;
}



/* DIALOGS
----------------------------------*/

/* Removing divider between message and buttons */
.ui-dialog .ui-dialog-buttonpane {
	border-width: 0px 0 0 0;
}

/* RADIOS
----------------------------------*/

.ui-checkboxradio-label .ui-icon-background {
	box-shadow: none;
}

.ui-button.ui-checkboxradio-label {
  border: 0px;
}

.ui-checkboxradio-label .ui-checkboxradio-icon {
  background-color: white;
}
.ui-checkboxradio-label.ui-checkboxradio-checked .ui-checkboxradio-icon {
  background-color: white;
}



/* BUTTONS
----------------------------------*/

/* Adjusting borders to make it more 3D old school */

button.ui-button,
html button.ui-button.ui-state-disabled:hover,
html button.ui-button.ui-state-disabled:active {
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;

	background: #ccc;
	font-weight: normal;
	color: #222;
}

a.ui-button,
a:link.ui-button,
a:visited.ui-button,
button.ui-button {
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;

	text-decoration: none;
}

button.ui-button:hover,
button.ui-button:focus {
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;

	background: #ccc;
	font-weight: normal;
	color: #222;
}

a.ui-button:hover,
a.ui-button:focus {
  border-top: 2px solid #fff;
  border-left: 2px solid #fff;
  border-right: 2px solid #000;
  border-bottom: 2px solid #000;

	color: #222;
	text-decoration: none;
}

a.ui-button:active,
button.ui-button:active,
button.ui-button.ui-state-active:hover {
  border-top: 2px solid #000;
  border-left: 2px solid #000;
  border-right: 2px solid #fff;
  border-bottom: 2px solid #fff;

	background: #eee;
	font-weight: normal;
	color: #000;
}


/* ORIGINAL STYLE */

body {
  height: 100vh;
  width: 100vw;
}

#slider {
  height: 30vh;
}

#instructions {
  font-family: "MS Sans Serif", Arial, sans-serif;
  /* font-weight: bold; */
  font-size: 1em;
  transform: translate(30vw,40vh);
  text-align: center;
  width: 40vw;
  /* background-color: green; */
}

/* Basic restyling of slider to appear more vanilla */



/*
.ui-slider {
  border-color: rgba(120,120,120,1) !important;
  background: linear-gradient(to right, rgb(150,150,150), rgb(180,180,180)) !important;
  width: 0.4em !important;
  border-width: 0.1em !important;
}

.ui-slider-handle {
  background: linear-gradient(to right, rgb(220,220,220), rgb(240,240,240)) !important;
  color: white !important;
  border-color: rgba(125,125,125,1) !important;
  border-radius: 100% !important;
  border-width: 0.1em !important;
  outline: none !important;
  width: 1.5em !important;
  height: 1.5em !important;
  margin-left: -0.333em !important;
} */

/* Knob animation */

.knob {
  animation-name: knob;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes knob {
  from { background: orange; }
  to { background: red; }
}

/* Pulsing animation */

.pulse {
  animation-name: pulse;
  animation-duration: 0.5s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes pulse {
  to { transform: scale(1.2,1.0) }
}

/* Shivering animation */

.shiver {
  animation-name: shiver;
  animation-duration: 0.01s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
}

@keyframes shiver {
  from { transform: translateX(-2px)}
  to { transform: translateX(2px) }
}

/* Twisting animation */

.twist {
  animation-name: twist;
  animation-duration: 0.01s;
  animation-iteration-count: infinite;
  animation-direction: alternate;
  transform-origin: bottom center;
}

@keyframes twist {
  from { transform: rotate(1deg)}
  to { transform: rotate(-1deg) }
}

/* Background animation */

.gradient {
  background: linear-gradient(red, yellow);
  background-size: 400% 400%;
  animation: gradient 1s ease infinite;
}

@keyframes gradient {
  0% {background-position:0% 13%}
  50% {background-position:100% 88%}
  100% {background-position:0% 13%}
}


/* Slider styling */

.ui-slider-handle {
  height: 10px !important;
  border-top: 2px solid #fff !important;
  border-left: 2px solid #fff !important;
  border-right: 2px solid #000 !important;
  border-bottom: 2px solid #000 !important;
  margin-left: -7px !important;
}

.ui-slider {
  width: 0px !important;
  background: black !important;
  border-top: 2px solid #000 !important;
  border-left: 2px solid #000 !important;
  border-right: 2px solid #fff !important;
  border-bottom: 2px solid #fff !important;
}

.ui-slider-pips .ui-slider-line {
  /* border-color: black !important; */
  background: black !important;
  width: 5px !important;
  height: 2px !important;
  margin-left: -8px !important;
  margin-top: 2px;
}

.ui-slider-pips .ui-slider-label {
  display: none !important;
}