body {
	color: white;
}
body.pvpage {
	background: black url(https://mathsstarters.net/images/bkg_webb-dark.png);
}
#site {
	background-color: #b60a01;
	background-image: url(//dedhk00m7fqyl.cloudfront.net/cmn/images/hdr_starters.png);
	color:#111111;
	box-shadow: -3px 3px 6px #222, 0px 3px 6px #222;
}

#contentbox {
	background-color: rgba(0,0,0,0.5);
	padding: 1rem 3rem;
	-moz-border-radius: 30px;
	-webkit-border-radius: 30px;
	border-radius: 30px;
	box-shadow: 3px 3px 6px #222;
	font-size: 1.8rem;
	min-height: 400px;
}
.pvpage #contentbox {
	border: 6px solid #DDDDDD;
}
h1 span {
	font-weight: 100;
}
h1.activity {
	text-align: center;
	font-weight: 600 !important;
	letter-spacing: 0.3rem;
	-webkit-transition: all 600ms cubic-bezier(0.39, 0.575, 0.565, 1);
	transition:         all 600ms cubic-bezier(0.39, 0.575, 0.565, 1);
}
h1.activity {
	text-shadow: 2px 2px 2px #DDDDDD,2px -2px 2px #DDDDDD,-2px 2px 2px #DDDDDD,-2px -2px 2px #DDDDDD;
	/*text-transform: uppercase;*/
	font-family: 'Comic Neue', sans-serif;
}
h1.bigger {
	font-size: 4em;
}

#dicebox {
	margin: 10px auto;
	display: block;
}
.dicebox {
margin-top: 30px;
}
#roll {
	font-size: 2rem;
	font-weight: 600;
	letter-spacing: 0.4rem;
	font-family: 'Black Ops One', cursive;
	text-transform: uppercase;
	text-shadow: 2px 2px 2px #333, -2px 2px 2px #333, 2px -2px 2px #333, -2px -2px 2px #333;
}
.dice {
	font-family: 'Comic Neue', sans-serif;
	display: block;
	margin: 0 0.1em;
	border: 2px solid white;
		-moz-border-radius: 10px;
		-webkit-border-radius: 10px;
		border-radius: 10px;
	text-align: center;
	font-size: 3rem;
	line-height: 6rem;
	float: left;
	min-width: 2em;
}
.dice.white {
	text-shadow: 2px 2px 0 black, -2px 2px 0 black, 2px -2px 0 black, -2px -2px 0 black ;
}
.dice.black {
	text-shadow: 2px 2px 0 white, -2px 2px 0 white, 2px -2px 0 white, -2px -2px 0 white ;
}

#controlbox {
margin-top: 100px;
}

  /* WebKit and Opera browsers */
  @-webkit-keyframes spinner {
    from { -webkit-transform: rotateY(0deg);    }
    to   { -webkit-transform: rotateY(-360deg); }
  }

  /* all other browsers */
  @keyframes spinner {
    from {
      -moz-transform: rotateY(0deg);
      -ms-transform: rotateY(0deg);
      transform: rotateY(0deg);
    }
    to {
      -moz-transform: rotateY(-360deg);
      -ms-transform: rotateY(-360deg);
      transform: rotateY(-360deg);
    }
  }


.spinner {
    -webkit-animation-name: spinner;
    -webkit-animation-timing-function: linear;
    -webkit-animation-iteration-count: 1;
    -webkit-animation-duration: 0.5s;

    animation-name: spinner;
    animation-timing-function: linear;
    animation-iteration-count: 1;
    animation-duration: 0.5s;

    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    transform-style: preserve-3d;
}


/* -- end dice -- */

footer.activityfooter {
	padding-top: 20px;
	text-align: center;
	color: #ccc;
font-size: 0.9rem;
}
footer.activityfooter a {
	color: #eee;
}
footer.activityfooter a:hover {
	color: white;
text-decoration: underline
}

/* clrs.cc */
/* Backgrounds */
.bg-navy { background-color: #001F3F; }
.bg-blue { background-color: #0074D9; }
.bg-aqua { background-color: #7FDBFF; }
.bg-teal { background-color: #39CCCC; }
.bg-olive { background-color: #3D9970; }
.bg-green { background-color: #2ECC40; }
.bg-lime { background-color: #01FF70; }
.bg-yellow { background-color: #FFDC00; }
.bg-orange { background-color: #FF851B; }
.bg-red { background-color: #FF4136; }
.bg-fuchsia { background-color: #F012BE; }
.bg-purple { background-color: #B10DC9; }
.bg-maroon { background-color: #85144B; }
.bg-white { background-color: #FFFFFF; }
.bg-gray { background-color: #AAAAAA; }
.bg-silver { background-color: #DDDDDD; }
.bg-black { background-color: #111111; }
/* Colors */
.navy { color: #001F3F; }
.blue { color: #0074D9; }
.aqua { color: #7FDBFF; }
.teal { color: #39CCCC; }
.olive { color: #3D9970; }
.green { color: #2ECC40; }
.lime { color: #01FF70; }
.yellow { color: #FFDC00; }
.orange { color: #FF851B; }
.red { color: #FF4136; }
.fuchsia { color: #F012BE; }
.purple { color: #B10DC9; }
.maroon { color: #85144B; }
.white { color: #FFFFFF; }
.silver { color: #DDDDDD; }
.gray { color: #AAAAAA; }
.black { color: #111111; }
/* Border colors 

   Use with another border utility that sets border-width and style 
   i.e .border { border-width: 1px); border-style: solid); }     
*/
.border--navy { border-color: #001F3F; }
.border--blue { border-color: #0074D9; }
.border--aqua { border-color: #7FDBFF; }
.border--teal { border-color: #39CCCC; }
.border--olive { border-color: #3D9970; }
.border--green { border-color: #2ECC40; }
.border--lime { border-color: #01FF70; }
.border--yellow { border-color: #FFDC00; }
.border--orange { border-color: #FF851B; }
.border--red { border-color: #FF4136; }
.border--fuchsia { border-color: #F012BE; }
.border--purple { border-color: #B10DC9; }
.border--maroon { border-color: #85144B; }
.border--white { border-color: #FFFFFF; }
.border--gray { border-color: #AAAAAA; }
.border--silver { border-color: #DDDDDD; }
.border--black { border-color: #111111; }