/* Made By: Rylee Harrison */

/* Edit how you want, but leave © info.*/

/* © Rylee Harrison */

html,body {
    margin: 0;
    padding: 0;
    height: 100%;
}

body {
    background: #fff;
    margin: 0;
    font: 20px "Segoe UI",Arial,sans-serif;
    font-weight: 400;
    background-image: 0;
    color: #000;
}

a,a:visited {
    color: #1e7fe8;
}

a:hover {
    color: #196ec4;
}

header,#tiles,h1,h3 {
    text-shadow: 0 -1px 1px rgba(0,0,0,0.1);
	background: none repeat scroll 0% 0% rgb(240, 241, 244);
border-bottom: 1px solid rgb(216, 221, 225);
}

.modal {
    display: block;
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    min-height: 100%;
    text-align: center;
    background-color: rgba(0,0,0,0.7);
    z-index: 4;
}

.modal .sp {
    height: 50%;
    font-size: 0;
}

.modal div {
    background: #fff;
    padding: 10px 0 30px;
    margin: 0 auto;
    padding: 20px;
    background: #fff;
    color: #000;
    font-size: 21px;
    line-height: 1.3em;
    box-shadow: 0 1px 20px #fff;
}

.modal h3 {
    margin: 20px 0;
}

.modal button {
    display: block;
    margin: 20px auto;
}

.s-w #start {
    visibility: visible;
    -webkit-animation-name: fadein;
    -webkit-animation-duration: .3s;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: fadein;
    -moz-animation-duration: .3s;
    -moz-animation-timing-function: ease-in-out;
}

.s-p #start {
    -webkit-animation-name: fadeout;
    -webkit-animation-duration: .3s;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: fadeout;
    -moz-animation-duration: .3s;
    -moz-animation-timing-function: ease-in-out;
}

@-webkit-keyframes fadeout {
}

100% {
    opacity: 0;
    visibility: hidden;
}

 {
}

@-moz-keyframes fadeout {
}

100% {
    opacity: 0;
    visibility: hidden;
}

 {
}

.s-go #gameover {
    visibility: visible;
    -webkit-animation-name: fadein;
    -webkit-animation-duration: .3s;
    -webkit-animation-timing-function: ease-in-out;
    -moz-animation-name: fadein;
    -moz-animation-duration: .3s;
    -moz-animation-timing-function: ease-in-out;
}

#gameover a {
    text-decoration: none;
    color: rgba(0,0,0,0.5);
}

@-webkit-keyframes fadein {
}

100% {
    opacity: 1;
}

 {
}

@-moz-keyframes fadein {
}

100% {
    opacity: 1;
}

 {
}

#goHigh {
    display: none;
    color: rgba(0,0,0,0.5);
}

.localstorage #goHigh {
    display: inline !important;
}

#notification {
    padding: 10px 0;
    text-align: center;
    background: #ffc000;
    z-index: 999;
}

#notification span {
    font-weight: 700;
}

header {
    text-align: center;
    font-size: 70px;
}

header span {
    position: relative;
    top: -30px;
    margin-right: 10px;
    font-size: 20px;
}

#answer,#answer span,#stopwatch,#points {
    top: 0;
    font-size: 70px !important;
}

#answer {
    display: inline-block;
    position: relative;
    top: -.1em;
    width: 1em;
    height: 1em;
    margin-right: 30px;
    margin-left: -5px;
}

#answer span {
    position: absolute;
    text-align: center;
    width: inherit;
}

#stopwatch {
    margin-right: 30px;
    letter-spacing: -.06em;
    -webkit-transition: color .5s ease-in-out;
    -moz-transition: color .5s ease-in-out;
    -o-transition: color .5s ease-in-out;
    -ms-transition: color .5s ease-in-out;
    transition: color .5s ease-in-out;
}

#stopwatch.moar {
    color: #36bc09 !important;
}

#stopwatch.low,#stopwatch.gameover {
    color: #aa0d0d;
}

.s-p #stopwatch.low {
    -webkit-animation-name: pulsate;
    -webkit-animation-duration: 1s;
    -webkit-animation-timing-function: ease-in-out;
    -webkit-animation-iteration-count: infinite;
    -moz-animation-name: pulsate;
    -moz-animation-duration: 1s;
    -moz-animation-timing-function: ease-in-out;
    -moz-animation-iteration-count: infinite;
}

@-webkit-keyframes pulsate {
}

50% {
    opacity: .3;
}

100% {
    opacity: 1;
}

 {
}

@-moz-keyframes pulsate {
}

50% {
    opacity: .3;
}

100% {
    opacity: 1;
}

 {
}

#points {
    letter-spacing: -.06em;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.1);
}

#tiles {
    margin: 20px auto;
    font-size: 70px;
    text-align: center;
    -webkit-text-size-adjust: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
}

#tiles:after {
    clear: both;
}

#tiles.correct .selected {
    background: #53cc43;
}

button {
    border-top: 1px solid red;
    display: inline-block;
    width: 150px;
    height: 150px;
    padding: 0;
    margin: 5px;
    color: #fff;
    font: 1em "Open Sans",Arial,sans-serif;
    text-align: center;
    line-height: 150px;
    text-shadow: 0 -1px 1px rgba(0,0,0,0.1);
    background: #0cf;
    border: 0;
	border-bottom: 5px solid #444;
    -webkit-transition: background .2s ease-in-out;
    -moz-transition: background .2s ease-in-out;
    -o-transition: background .2s ease-in-out;
    -ms-transition: background .2s ease-in-out;
    transition: background .2s ease-in-out;
    cursor: pointer;
	border-radius: 10px;
}

button:active,button.selected {
border-bottom: 2px solid #444;
background: #7df0ff;
}



#bartop{
    z-index: 9;
    position: absolute;
    background: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSI1MDAiPgogICAgICAgICAgICA8cmVjdCB4PSIwIiB3aWR0aD0iMjIiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6IzE3MjMyNyIvPgogICAgICAgICAgICA8cmVjdCB4PSIyMiIgd2lkdGg9IjkwIiBoZWlnaHQ9IjEwMCUiIHN0eWxlPSJmaWxsOiMxOTM3MmMiLz4KICAgICAgICAgICAgPHJlY3QgeD0iMTEyIiB3aWR0aD0iNDIiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6IzMyNzM0NCIvPgogICAgICAgICAgICA8cmVjdCB4PSIxNTQiIHdpZHRoPSIyMCIgaGVpZ2h0PSIxMDAlIiBzdHlsZT0iZmlsbDojNDM3ZTRjIi8+CiAgICAgICAgICAgIDxyZWN0IHg9IjE3NCIgd2lkdGg9IjIwIiBoZWlnaHQ9IjEwMCUiIHN0eWxlPSJmaWxsOiM4Njk5NTYiLz4KICAgICAgICAgICAgPHJlY3QgeD0iMTk0IiB3aWR0aD0iOSIgaGVpZ2h0PSIxMDAlIiBzdHlsZT0iZmlsbDojYjA4ZjQyIi8+CiAgICAgICAgICAgIDxyZWN0IHg9IjIwMyIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwMCUiIHN0eWxlPSJmaWxsOiNiNDY4MzkiLz4KICAgICAgICAgICAgPHJlY3QgeD0iMjEzIiB3aWR0aD0iMzQiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2E0Mzk0MSIvPgogICAgICAgICAgICA8cmVjdCB4PSIyNDciIHdpZHRoPSIxMCIgaGVpZ2h0PSIxMDAlIiBzdHlsZT0iZmlsbDojOWMyYzUyIi8+CiAgICAgICAgICAgIDxyZWN0IHg9IjI1NyIgd2lkdGg9IjQiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6I2JiNDI2YiIvPgogICAgICAgICAgICA8cmVjdCB4PSIyNjEiIHdpZHRoPSIyOCIgaGVpZ2h0PSIxMDAlIiBzdHlsZT0iZmlsbDojOGEyZjVjIi8+CiAgICAgICAgICAgIDxyZWN0IHg9IjI4OSIgd2lkdGg9IjE0IiBoZWlnaHQ9IjEwMCUiIHN0eWxlPSJmaWxsOiM2ZDQxNmQiLz4KICAgICAgICAgICAgPHJlY3QgeD0iMzAzIiB3aWR0aD0iNTgiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6IzQxMzI2NCIvPgogICAgICAgICAgICA8cmVjdCB4PSIzNjEiIHdpZHRoPSIyMyIgaGVpZ2h0PSIxMDAlIiBzdHlsZT0iZmlsbDojMjk0MTZlIi8+CiAgICAgICAgICAgIDxyZWN0IHg9IjM4NCIgd2lkdGg9IjEwIiBoZWlnaHQ9IjEwMCUiIHN0eWxlPSJmaWxsOiM1NjkwYTUiLz4KICAgICAgICAgICAgPHJlY3QgeD0iMzk0IiB3aWR0aD0iNTQiIGhlaWdodD0iMTAwJSIgc3R5bGU9ImZpbGw6IzJlODQ5ZCIvPgogICAgICAgICAgICA8cmVjdCB4PSI0NDgiIHdpZHRoPSIxIiBoZWlnaHQ9IjEwMCUiIHN0eWxlPSJmaWxsOiMyNzY2ODYiLz4KICAgICAgICAgICAgPHJlY3QgeD0iNDQ5IiB3aWR0aD0iMyIgaGVpZ2h0PSIxMDAlIiBzdHlsZT0iZmlsbDojMjM0MzZlIi8+CiAgICAgICAgICAgIDxyZWN0IHg9IjQ1MiIgd2lkdGg9IjQ4IiBoZWlnaHQ9IjEwMCUiIHN0eWxlPSJmaWxsOiMxNDJhMDYiLz4KICAgIDwvc3ZnPgo=") repeat-x scroll left top transparent;
    height: 10px;
    width: 100%;
    overflow: auto;
}

footer {
    text-align: center;	
}