@font-face {
    font-family: Helsinki;
    src: url('helsinki.eot');
    src: url('helsinki.eot?#iefix') format('embedded-opentype'),
    url('helsinki.woff2') format('woff2'),
    url('helsinki.woff') format('woff'),
    url('helsinki.ttf') format('truetype'),
    url('helsinki.svg#helsinkiregular') format('svg');
    font-weight: normal;
    font-style: normal;
}

* {
    box-sizing: border-box;
    font-family: "Helsinki", sans-serif;
}

html {
    background-color: #272822;
    margin: 0;
    height: 100vh;
    width: 100vw;
    overflow: hidden;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    user-select: none;
}

body {
    height: 100vh;
    margin: 0 auto;
    width: 100vmin;
}

@keyframes scrollLeft {
    from {left: 0;}
    to   {left: -7200vmin;}
}

@keyframes bounce {
    0%   {top: 0;      left: 0;}
    50%  {top: 12vmin; left: 2vmin;}
    100% {top: 0;      left: 0;}
}

@keyframes rainbow {
    0% {color: #c6fe7a;}
    33% {color: #7ac5fe;}
    67% {color: #fe7ac6;}
    100% {color: #c6fe7a;} /* back to start */
}

#cracktro {
    color: #c6fe7a;
    font-size: 6vmin;
    height: 20vmin;
    margin: 4vmin 0;
    overflow: hidden;
    white-space: nowrap;
    width: 7200vmin;

    position: relative;
    animation: scrollLeft 420s linear infinite;
}

#cracktro span {
    margin-right: 1vmin;
    position: relative;
    animation: bounce 4s infinite ease-in-out,rainbow 5s infinite;
    text-shadow: 0.5vmin 0.5vmin black;
}

#cracktro span:nth-child(10n+1) {
    animation-delay: 0.4s;
}
#cracktro span:nth-child(10n+2) {
    animation-delay: 0.8s;
}
#cracktro span:nth-child(10n+3) {
    animation-delay: 1.2s;
}
#cracktro span:nth-child(10n+4) {
    animation-delay: 1.6s;
}
#cracktro span:nth-child(10n+5) {
    animation-delay: 2s;
}
#cracktro span:nth-child(10n+6) {
    animation-delay: 2.4s;
}
#cracktro span:nth-child(10n+7) {
    animation-delay: 2.8s;
}
#cracktro span:nth-child(10n+8) {
    animation-delay: 3.2s;
}
#cracktro span:nth-child(10n+9) {
    animation-delay: 3.6s;
}

#game {
    background-color: #1b1c17;
    float: left;
    margin: 0 auto;
    height: 100%;
    overflow: hidden;
}

#stats {
    height: 10vmin;
    width: 100vmin;
    float: left;

    background: #768087;
    background: linear-gradient(to bottom,  #768087 0%,#53595e 100%);
}

#stats button {
    margin: 1vmin;
    float: right;
    font-size: 3vmin;
    border-radius: 2vmin;
    padding: 1.75vmin;
    box-shadow: 0.5vmin 0.5vmin 0 #000;
    border: 0.4vmin solid #454e52;
    position: relative;
    top: auto;
    left: auto;
}

#stats div {
    float: left;
    font-size: 5.4vmin;
    margin: 2vmin;
    width: auto;
}

#gameOver, #setup, #tutorial {
    background-color: rgba(0, 0, 0, 0.6);
    width: 100vmin;
    height: 100vh;
    overflow: hidden;
    position: absolute;
}

#gameOver .score {
    margin-right: 12vmin;
}

#setup h2 {
    margin-top: 0;
}

#setup h2,
#setup label {
    margin: 4vmin 3.5vmin;
    font-size: 6vmin;
    color: #fe7ac6;
    text-shadow: 0.5vmin 0.5vmin 0 #a4f4b4; /* x y blur-radius colour */
}

#tutorial .gameBoard {
    float: left;
    padding: 5vmin;
    padding-top: 0;
}

#tutorial p {
    padding: 0 5vmin;
}

.centre {
    clear: both;
    margin-top: 2vmin;
    text-align: center;
}

.subtitle {
    text-align: center;
}

button {
    font-size: 6vmin;
    border-radius: 2vmin;
    padding: 2vmin;
    margin: 0 auto;
    box-shadow: 1vmin 1vmin 0 #000;
    border: none;

    background: #768087;
    background: linear-gradient(to bottom,  #768087 0%,#53595e 100%);
}

button.cancel {
    right: 20vmin;
    left: auto;
}

button.donate {
    background: #ffefa7;
    background: linear-gradient(to bottom, #ffefa7 0%, #feae27 100%);
}

button.twitter {
    background: #51aaea;
    background: linear-gradient(to bottom,  #51aaea 0%,#3375a6 100%);
}

form {
    display: inline;
}

h1, h2 {
    text-align: center;
}

h1 {
    color: #a4f4b4;
    font-size: 12vmin;
    margin-top: 6vmin;
    margin-bottom: 6vmin;
    text-shadow: 1vmin 1vmin 0 #fe7ac6; /* x y blur-radius colour */
}

h2 {
    color: #7ac5fe;
    font-size: 6vmin;
}

ul {
    float: left;
    clear: both;
    height: 10vmin;
    list-style-type: none;
    padding: 0;
    margin: 0;
    overflow: hidden;
}

li {
    color: white;
    font-size: 8vmin;
    padding: 1vmin;
    padding-top: 0.5vmin;
    padding-bottom: 1.5vmin;
    text-align: center;
    vertical-align: middle;
    float: left;
    height: 10vmin;
    width: 10vmin;
    background-color: #454e52;
    border-radius: 2vmin;
    cursor: default;
}

li.revealed {
    background-color: #1b1c17;
}

li:not(.revealed):hover {
    background-color: #a0a9af;
}

li.flagged {
    background-color: #b5fe52;
    background-image: url("includes/images/flag.png");
    background-size: 100% 100%;
}

li.flagged:hover {
    background-color: #c6fe7a;
}

li.highlighted {
    border: 1vmin solid #fe7ac6;
    padding: 0;
}

li.mine.revealed {
    background-color: #d23000;
    background-image: url("includes/images/skull.png");
    background-size: 100% 100%;
}

li.mines1 {
    color: #c6fe7a;
}

li.mines2 {
    color: #7ac5fe;
}

li.mines3 {
    color: #fe7ac6;
}

li.mines4 {
    color: #b17afe;
}

li.mines5 {
    color: #feb27a;
}

li.mines6 {
    color: #7afeb2;
}

li.mines7 {
    color: #d74600;
}

li.mines8 {
    color: #8c4600;
}

p {
    color: #fff;
    font-size: 4.3vmin;
    padding: 0 10vmin;
}

strong {
    color: #fe7ac6;
}

table {
    color: #fe7ac6;
    font-size: 4vmin;
    margin: 0 auto;
    text-align: center;
}

th, td {
    width: 50%;
}

td {
    color: #fff;
    font-size: 8vmin;
}