body
{
	background-size:100% 100%;
	background-repeat:no-repeat;
	background-position:center;
	background-attachment:fixed;
	user-select:none;
}
#background
{
	margin-top:3%;
}
#coverPage
{
	position:fixed;
	bottom:0;
}
#min
{
	position: relative;
    left: 54.5%;
    z-index: 1;
    margin-top:12%;
    transform:rotate(0deg);
    transform-origin:50% 90%;
}
#hour
{
	margin-top: 16%;
    position: relative;
    left: 46.5%;
    z-index: 2;
    transform:rotate(0deg);
    transform-origin:50% 90%;
}
#footer
{
	position:fixed;
	bottom:0;
}
#next
{
	position:fixed;
	bottom:0;
	right:0;
}
#questionDiv
{
	margin-top:7%;
	position:absolute;
	right:0vw;
}
#question
{
	font-size:4vw;
	color:white;
	position:absolute;
	top:-1vh;
	left:8vw;
	text-align:center;
	padding-top:5%;
}
.noPadding
{
	padding:0 !important;
}

#clkDiv
{
	margin-top:-11%;
}
#ans
{
	position:absolute;
	left:3vw;
	margin-top:3%;
}
#numSystem
{
	margin-top:2%;
}
.numDiv
{
	background-color:white;
	bottom:0;
	text-align:center;
	color:red;
	border-radius:100%;
	border:2px solid black;
	margin-right:1vw;
	padding-top:3vh;
	height:13vh;
}
.numbers
{
	background-color:white;
	bottom:0;
	color:red;
	border-radius:100%;
	border:2px solid black;
	height:12vh;
	width:6vw;
	
}
.droppedElement
{
	height:8vh;
	text-align:center;
	font-size:4vw;
	
}
span
{
	font-size:3vw;
	position:relative;
	top:-1vh;
}

#colonSpan
{
	margin-right:1vw;
	margin-top:-6%;
	font-size:6vw;
	font-weight:bold;
	
}
#submit
{
	margin-top:1%;
}
@keyframes flash {
  from,
  50%,
  to {
    opacity: 1;
  }

  25%,
  75% {
    opacity: 0;
  }
}

.flash {
  animation-name: flash;
  animation-duration:3s;
}
@keyframes shake {
  from,
  to {
    transform: translate3d(0, 0, 0);
  }

  10%,
  30%,
  50%,
  70%,
  90% {
    transform: translate3d(-10px, 0, 0);
  }

  20%,
  40%,
  60%,
  80% {
    transform: translate3d(10px, 0, 0);
  }
}

.shake {
  animation-name: shake;
   animation-duration:3s;
}