@font-face {
    font-family: 'Omnes';
    font-style: normal;
    font-weight: normal;
    src: url('fonts/Omnes Regular.woff') format('woff');
}
    

@font-face {
    font-family: 'Omnes';
    font-style: italic;
    font-weight: normal;
    src: url('fonts/Omnes Italic.woff') format('woff');
}

@font-face {
    font-family: 'Omnes';
    font-style: normal;
    font-weight: bold;
    src: url('fonts/Omnes Bold.woff') format('woff');
}
    

@font-face {
    font-family: 'Omnes';
    font-style: italic;
    font-weight: bold;
    src: url('fonts/Omnes Bold Italic.woff') format('woff');
}

body {
    width:100%;
    height:100%;
    overflow:hidden;
    background:#00c2e8;
    font-family:"Omnes", sans-serif;
    text-align:center;
}

h1, h2, h3 {
    font-weight:bold;
}

a-scene {
    width:100vw;
    height:100%;
}

div.topbar {
    position: absolute;
    left: 0;
    top: 0;
    width: 100vw;
    height: 18vmin;
    background: white;
    z-index: 1;
    box-shadow: 0 0 5vmin rgba(0,0,0,0.5);
    border-radius: 0 0 2vmin 2vmin;
    padding:8.5vmin;
    text-align:left;
    background-image:url("/graphics/coin.png");
    background-size:12vmin auto;
    background-repeat:no-repeat;
    background-position:6vmin 3vmin;
}

div.topbar > span {
    font-size:8vmin;
    font-weight:bold;
}

div.topbar > span.score {
    margin-left:12vmin;
}

div.topbar > span.timer {
    float:right;
}

div.welcome,
div.countdown {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:rgba(0,0,0,0.5);
    backdrop-filter: blur(1vmin);
    z-index:2;
    /* display:none; */
}

div.welcome > div {
    background:white;
    color:black;
    border-radius:50%;
    position:absolute;
    left:50%;
    top:calc(50% - 13vmin);
    transform: translate(-50%, -50%);
    width:60vmin;
    height:60vmin;
    box-shadow:0 0 2vmin rgba(0,0,0,0.2);
}

div.welcome > div > h1 {
    font-size:7vmin;
    margin-top:14vmin;
    line-height:1;
}

div.welcome > div > p {
    font-size:4.5vmin;
    line-height:1.2;
    margin-top:2vmin;
}

div.welcome > button {
    position:absolute;
    left:50%;
    top:calc(50% + 27vmin);
    border-radius:50%;
    width:30vmin;
    height:30vmin;
    font-size: 6vmin;
    font-weight: bold;
    background:#00c2e8;
    color:white;
    box-shadow:0 0 2vmin rgba(0,0,0,0.2);
    animation: center-bouncing 0.75s linear infinite;
    display:none;
}

@keyframes center-bouncing {
    0%       { transform: translate(-50%, -50%) scale(1.0); }
    25%, 75% { transform: translate(-50%, -50%) scale(1.04); }
    50%      { transform: translate(-50%, -50%) scale(1.05); }
    100%     { transform: translate(-50%, -50%) scale(1.0); }
}

div.welcome > p.terms {
    font-size: 4vmin;
    width: 100%;
    position: absolute;
    left: 0;
    top: 80%;
    color: white;
    text-decoration: underline;
}

div.welcome > img {
    position:absolute;
    left:50%;
    top:90%;
    transform:translate(-50%, -50%);
    height:8vmin;
    z-index:-1;
}

div.countdown {
    display:none;
}

div.countdown > h1 {
    color:white;
    position:absolute;
    left:50%;
    top:50%;
    transform: translate(-50%, -50%);
    font-size:50vmin;
}

div.countdown > img {
    position:absolute;
    left:50%;
    top:85%;
    height:20vmin;
    transform: translate(-50%, -50%);
    animation: swipe 1.5s ease infinite;
}

@keyframes swipe {
    0%, 100% { left: 40%; }
    50%      { left: 60%; }
}

div.gameover {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:#021738;
    color:white;
    z-index:2;
    overflow-y:scroll;
    display:none;
}

div.gameover > div {
    background:white;
    color:black;
    padding:12vmin 0;
    box-shadow:0 0 5vmin rgba(0,0,0,0.3);
    border-radius: 0 0 2vmin 2vmin;
    margin-bottom:5vmin;
}

div.gameover > div > h1 {
    font-size:8vmin;
    color:#00c2e8;
}

div.gameover > div > p {
    font-size:5vmin;
    margin-bottom:7vmin;
    margin-top:10vmin;
}

div.gameover > div > h2 {
    font-size:8vmin;
}

div.gameover > h1 {
    font-size:8vmin;
    font-weight:bold;
    color:#00c2e8;
    line-height:1.5;
}

div.gameover > p {
    font-size:5vmin;
    line-height:1.4;
    margin: 2vmin 10vmin 5vmin 10vmin;
}

div.gameover input {
    width:85vmin;
    height:15vmin;
    background:white;
    margin:2vmin;
    border-radius:2vmin;
    font-size:5vmin;
}


div.gameover input[type=checkbox] {
    width:5vmin;
    height:5vmin;
    margin-bottom:0;
}

div.gameover a {
    text-decoration:underline;
}

div.gameover p.terms,
div.gameover p.subscribe {
    font-size:4vmin;
    margin:4vmin;
    margin-top:1vmin;
    line-height:1;
}

div.gameover input[type=submit] {
    width:40vmin;
    height:15vmin;
    font-size:5vmin;
    background:#00c2e8;
    color:white;
    font-weight:bold;
    border-radius:7.5vmin;
    /* margin: 7vmin; */
}

div.gameover > img {
    height:8vmin;
    margin:10vmin;
}

/* terms */

div.terms {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:white;
    color:black;
    z-index:2;
    overflow-y:scroll;
    padding:10vmin;
    display:none;
}

div.terms > h1 {
    font-size:6vmin;
    line-height:1;
}

div.terms > h2 {
    font-size:5vmin;
    line-height:1;
    margin:5vmin 0;
}

div.terms > p {
    font-size:4vmin;
    line-height:1.5;
    margin:5vmin 0;
}

div.terms > ul {
    font-size:4vmin;
    line-height:1.5;
    text-align:left;
}

div.terms button {
    width:40vmin;
    height:15vmin;
    font-size:5vmin;
    background:#00c2e8;
    color:white;
    font-weight:bold;
    border-radius:7.5vmin;
    margin-top:10vmin;
}

div.terms a {
    text-decoration: underline;
}