html{color:#000;background:#FFF}body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,code,form,fieldset,legend,input,textarea,p,blockquote,th,td{margin:0;padding:0}table{border-collapse:collapse;border-spacing:0}fieldset,img{border:0}address,caption,cite,code,dfn,em,strong,th,var{font-style:normal;font-weight:normal}ol,ul{list-style:none}caption,th{text-align:left}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}q:before,q:after{content:''}abbr,acronym{border:0;font-variant:normal}sup{vertical-align:text-top}sub{vertical-align:text-bottom}input,textarea,select{font-family:inherit;font-size:inherit;font-weight:inherit;*font-size:100%}legend{color:#000}#yui3-css-stamp.cssreset{display:none}

html {
  height: 100%;
}

body {
    display: flex;
    height: 100%;
    flex-direction: column;
    box-sizing: border-box;
}

body {
  -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
     -khtml-user-select: none; /* Konqueror HTML */
       -moz-user-select: none; /* Old versions of Firefox */
        -ms-user-select: none; /* Internet Explorer/Edge */
            user-select: none; /* Non-prefixed version, currently
                                  supported by Chrome, Opera and Firefox */
}

#Numble_Menu h1 {
  font-size: 20px;
  font-weight: bold;
  font-family: 'Gotu', sans-serif;
  margin:10px;
}

p {
  font-family: 'Gotu', sans-serif;
  font-size: 18px;
}

input {
  font-family: 'Gotu', sans-serif;
}

button {
  font-family: 'Gotu', sans-serif;
}

@font-face {
    font-family: CharlemagneStd-Bold;
    src: url("/fonts/CharlemagneStd-Bold.otf") format("opentype");
}

#Middle {
  display: flex;
  flex-direction: column;
  align-items: center;
}


#Snappy_Boards {
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-around;
  width: 98vw;
}

#Snappy_Div_Left {
  display: flex;
  justify-content: left;
}

#Snappy_Div_Right {
  display: flex;
  justify-content: right;
}

#Snappy_Div_Left label > input, #Snappy_Div_Right label > input { /* HIDE RADIO/CHECK */
  visibility: hidden; /* Makes input not-clickable */
  position: absolute; /* Remove input from document flow */
}

#Snappy_Div_Left label > input + p, #Snappy_Div_Right label > input + p  {
    overflow: none;
}

.row {
  padding: 0;
  margin: 0;
}

#Snappy_Boards p {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100%;
    width: 100%;
    margin: 0px;
    text-align: center;
    font-weight: bold;
    font-size: 4vw;
    vertical-align: middle;
    word-spacing: 9999999px;
    line-height: 60%;
    border: 5px solid transparent;
}
#Snappy_Boards img {
  height: 70%;
  width: 70%;
  margin: auto;
}


#Snappy_Boards div {
  display: flex;
  flex-direction: row;
}

#Snappy_Board_Left, #Snappy_Board_Right {
  flex-direction: column !important;
  border: 5px solid black;
  padding: 5px;
}

#Snappy_Boards input {
  font: 20px;
  width: 20px;
  height: 20px;
}

#Snappy_Board_Middle div {
  margin: 10px;
}

.hide {
  display:  none !important;
}

.rotate-70 {
  transform: rotate(-70deg);
}
.rotate-45 {
  transform: rotate(-45deg);
}
.rotate-30 {
  transform: rotate(-30deg);
}
.rotate30 {
  transform: rotate(30deg);
}
.rotate45 {
  transform: rotate(45deg);
}
.rotate70 {
  transform: rotate(70deg);
}
#Snappy_Boards .loser p {
  border-radius: 100%;
  border: solid red 5px;
  transition-property: border;
  transition-duration: 1s;
  transition-timing-function: linear;
}

#Snappy_Boards .winner p {
  border-radius: 100%;
  border: solid green 5px;
  transition-property: border;
  transition-duration: 1s;
  transition-timing-function: linear;
}

#Bottom {
  display: flex;
  flex-direction: row;
  justify-content: center;
  margin: 2vh;
  font-size: 3vw;
}
#Snappy_Board_Middle {
  text-align: center;
  font-size: 2vw;
  width: 20vw;
  height: 20vw;
  position: absolute;
  background: white;
  border: solid black 2px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-evenly;
}

#Button, #Timer_div {
  justify-content: center;
  position: absolute;
}

#Min_Message a, #Snappy_Board_Middle a, #Bottom a {
  border-radius: 5px;
  padding: 5px;
  border: solid black 2px;
}

#Min_Message a:hover, #Snappy_Board_Middle a:hover, #Bottom a:hover {
  background: grey;
}

.one  {
  color: green;
}
.two  {
  color: blue;
}
.three  {
  color: red;
}
.four {
  color: purple;
}
.five  {
  color: black;
}
.six {
  color: orange;
}

#Min_Message {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items:center;
}

#Min_Message h1, #Min_Message a {
  font-size: 5vw;
  font-weight: bold;
  text-align: center;
  margin-top: 1vw;
  margin-bottom: 1vw;
}

#Menu.snappy a {
  margin-bottom: 0px;
}
#Menu h1 {
  font-size: 20px;
  font-weight: bold;
  margin-bottom: 10px;
}
.snappy p {
  margin-bottom: 10px;
}
a.disabled {
  background: grey;
  pointer-events: none;
}

img {
  -webkit-user-drag: none;
  -khtml-user-drag: none;
  -moz-user-drag: none;
  -o-user-drag: none;
  user-drag: none;
}