@font-face {
    font-family: "ApexNew";
    src: url("fonts/ApexNew-Book.otf") format("opentype");
    font-weight: normal;
}

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

@font-face {
    font-family: "ApexNew";
    src: url("fonts/ApexNew-Heavy.otf") format("opentype");
    font-weight: 900;
}

html {
    color:white;
    text-align:center;
    height:100%;
    font-family:"ApexNew", sans-serif;

    background-color:black;
    background-image:url("../graphics/background.png");
    background-size:100% auto;
    background-position:top center;
    background-repeat:no-repeat;
}

body, html {
    overflow-y:auto !important; /* allow drag refresh */
    touch-action:pan-y; /* disable zoom, only allow scroll */
}

div.welcome, div.status, div.qr, div.map, div.reward, div.info
{
    /* padding:20vmin 0 15vmin 0; */
    display:none;
    position:absolute;
    z-index:2;
    width:100%;
    min-height:100%;
    left:0;
    top:0;
    box-sizing:border-box;
    overflow:visible;

    background-color:black;
    background-image:url("../graphics/background.png");
    background-size:100% auto;
    background-position:top center;
    background-repeat:no-repeat;
}

/* FULL SCREEN */
:-webkit-full-screen { background-color: black !important; } /* Safari */
:-ms-fullscreen { background-color: black !important; } /* IE11 */
:fullscreen { background-color: black !important; } /* Standard syntax */

/* WELCOME */

div.welcome > h1,
div.welcome > h2 {
    font-style:italic;
    line-height:1.1;
    font-weight:900;
    text-transform:uppercase;
}

div.welcome > h1 {
    font-size:10vmin;
    color:#DC6F1E;
    margin-top:30vmin;
}

div.welcome > h2 {
    font-size:8vmin;
    color:#004694;
}

div.welcome > p {
    font-size:4vmin;
    color:white;
    margin-top:5vmin;
    margin-bottom:10vmin;
    text-transform: uppercase;
    font-weight:900;
}

div.welcome > button {
    width:30vmin;
    height:30vmin;
    border-radius:50%;
    background:#DC6F1E;
    margin-top:50vmin;
    font-size:6vmin;
    line-height:1.1;
    font-weight:900;
    text-transform: uppercase;
    color:white;
    font-style:italic;
}

div.welcome > div.intro {
    color:white;
    height:100vh;
    display:none;
    overflow:hidden;
    background:black;
}

div.welcome > div.intro > div {
    margin-top:100vh;
    margin-bottom:100vh;
}

div.welcome > div.intro h1 {
    font-size:10vmin;
    text-transform: uppercase;
    font-weight:bold;
    font-style:italic;
    line-height:1.2;
    margin-top:10vmin;
    color:#DC6F1E;
}

div.welcome > div.intro p {
    font-size:4vmin;
    margin:5vmin 10vmin;
    line-height:1.5;
    font-weight:bold;
    font-style:italic;
}

/* STATUS */

div.status > h1 {
    font-size:5vmin;
    color:#004694;
    line-height:1.1;
    margin-top:26vmin;
    font-weight:900;
    font-style:italic;
    text-transform: uppercase;
}

div.status > h2 {
    font-size:3vmin;
    margin-top:72vmin;
    margin-bottom:50vmin;
    font-style:italic;
    text-transform: uppercase;
}

div.status > button {
    width:30vmin;
    height:30vmin;
    border-radius:50%;
    background:#DC6F1E;
    position:absolute;
    left:50vw;
    top:135vw;
    margin:-15vmin 0 0 -15vmin;
}

div.status > button.map,
div.status > button.info {
    width:10vmin;
    height:10vmin;
    background:white;

    left:75vw;
    margin:-5vmin 0 0 -5vmin;
}

div.status > button.info {
    left:25vw;
}

div.status > button > img {
    width:100%;
    height:100%;
}

div.status > img.silhouette {
    position:absolute;
    width:calc(81 / 320 * 100vw);
    height:calc(81 / 320 * 100vw);
}

div.status > img.silhouette[data-index="1"] {
    left:calc(7 / 320 * 100vw);
    top:calc(240 / 320 * 100vw);
}

div.status > img.silhouette[data-index="2"] {
    left:calc(21 / 320 * 100vw);
    top:calc(161 / 320 * 100vw);
}

div.status > img.silhouette[data-index="3"] {
    left:calc(85 / 320 * 100vw);
    top:calc(137 / 320 * 100vw);
}

div.status > img.silhouette[data-index="4"] {
    left:calc(151 / 320 * 100vw);
    top:calc(136 / 320 * 100vw);
}

div.status > img.silhouette[data-index="5"] {
    left:calc(203 / 320 * 100vw);
    top:calc(191 / 320 * 100vw);
}

div.status > img.silhouette[data-index="6"] {
    left:calc(243 / 320 * 100vw);
    top:calc(247 / 320 * 100vw);
}

/* REWARD */

div.reward > h1 {
    font-size:6vmin;
    color:#004694;
    line-height:1.1;
    margin-top:23vmin;
    font-weight:900;
    font-style:italic;
    text-transform: uppercase;
}

div.reward > h2 {
    font-size:4vmin;
    margin-top:2vmin;
    text-transform: uppercase;
    color:#DC6F1E;
    line-height:1.1;
    font-weight:900;
    font-style:italic;
}

div.reward > p {
    font-size:3.5vmin;
    margin-top:45vmin;
    text-transform: uppercase;
    font-style:italic;
}

div.reward > button {
    width:30vmin;
    height:30vmin;
    background:black; /* fix to try to make button clickable on some devices - went from "none" */
    border-radius:50%;
    border:1vmin solid #DC6F1E;
    color:#DC6F1E;
    font-size:4vmin;
    line-height:1.1;
    font-weight:900;
    font-style:italic;
    text-transform: uppercase;
    margin-top:8vmin;
    z-index:100; /* fix to try to make button clickable on some devices */
}

/* INFO */

div.info {
    background:black;
}

div.info > h1 {
    margin-top:10vmin;
    font-size:5vmin;
    line-height:1;
    font-weight:900;
    font-style:italic;
    text-transform:uppercase;
}

div.info > h2 {
    margin-top:5vmin;
    font-size:4vmin;
    line-height:1;
    font-weight:900;
    font-style:italic;
    text-transform:uppercase;
}

div.info > p {
    margin:5vmin 10vmin 0 10vmin;
    font-size:4vmin;
    line-height:1.2;
}

div.info > button {
    border-radius:50%;
    position:fixed;
    left:3vmin;
    bottom:3vmin;
    width:10vmin;
    height:10vmin;
    background:white;
}

div.info > button > img {
    width:100%;
    height:100%;
}

/* QR */

div.qr {
    height:100%;
}

div.qr > video {
    width:100%;
    height:100%;
    object-fit:cover;
    background-color:black;
}

div.qr > button {
    border-radius:50%;
    position:absolute;
    left:3vmin;
    bottom:3vmin;
    width:10vmin;
    height:10vmin;
    background:white;
}

div.qr > button > img {
    width:100%;
    height:100%;
}

div.qr > div.scan {
    position:absolute;
    left:0;
    top:calc(50vh - max(400px, 66vmin) / 2 - 10vmin);
    width:100%;
    /* height:100%; */
    font-size:5vmin;
    line-height:1.2;
    color:white;
    text-transform: uppercase;
    font-weight:bold;
}

/* MAP */

div.map {
    background:black;
}

div.map > button {
    border-radius:50%;
    position:absolute;
    left:3vmin;
    bottom:3vmin;
    width:10vmin;
    height:10vmin;
    background:white;
}

div.map > button > img {
    width:100%;
    height:100%;
}

/* AR */

div.ar {
    z-index:0;
    width:100%;
    height:100%;
    /* display:none; */
    background:black;
    opacity:0;
}

div.hud {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    z-index:1;
    background-image:url('../graphics/spiderweb.png');
    background-size:100% auto;
    background-position:center top;
    background-repeat:no-repeat;
    overflow:hidden;
}

div.hud > div.gun {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    display:none;
    background-image:url('../graphics/gun.png');
    background-size:100% auto;
    background-position:center bottom;
    background-repeat:no-repeat;
}

div.hud > div.gun > div.beam {
    position:absolute;
    left:50%;
    bottom:38.5vmin;
    width:1vmin;
    margin-left:-0.5vmin;
    height:calc(50% - 38.5vmin);
    background:lightgreen;
    display:none;
    opacity: 1;
    animation: fade 0.05s linear infinite;
    border-radius:50% 50% 0 0;
}

div.hud > div.gun > img.crosshair {
    width:50vmin;
    height:50vmin;
    position:absolute;
    left:50%;
    top:50%;
    margin-left:-25vmin;
    margin-top:-25vmin;
    pointer-events: none;
    display:none;
}

div.hud > div.spawn {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    font-size:5vmin;
    color:white;
    text-transform: uppercase;
    font-weight:bold;
    padding-top:50%;
    display:none;
}

div.hud > div.dead {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    font-size:8vmin;
    color:white;
    text-transform: uppercase;
    font-weight:bold;
    padding-top:50%;
    line-height:1.5;
}

div.hud > button.close {
    border-radius:50%;
    position:absolute;
    left:3vmin;
    bottom:3vmin;
    width:10vmin;
    height:10vmin;
    background:white;
}

div.hud > div.debug {
    width:100%;
    position:absolute;
    right:3vmin;
    bottom:3vmin;
    font-size:5vmin;
    line-height:1;
    text-align:right;
    display:none;
}

div.hud > button > img {
    width:100%;
    height:100%;
}

div.hud > div.direction {
    position:absolute;
    top:calc(50% - 5vmin);
    margin:0 5vmin;

    width: 0; 
    height: 0; 
    border: 5vmin solid transparent;
    animation: fade 1s linear infinite;
}

div.hud > div.direction.left {
    left:0;
    border-right-color:white;
}

div.hud > div.direction.right {
    right:0;
    border-left-color:white;
}

div.hud > div.damage {
    width:100%;
    height:100%;
    background:rgba(255,0,0,0.65);
    pointer-events: none;
    position:absolute;
    left:0;
    top:0;
    display:none;
}

@keyframes fade {
    0%,100% { opacity: 0 }
    50% { opacity: 1 }
}

div.hud > div.life {
    position:absolute;
    left:5vmin;
    top:5vmin;
    width:calc(100vw - 10vmin);
    height:7vmin;
    background:black;
    border-radius:3.5vmin;
    overflow:hidden;
    display:none;
    border:1vmin solid black;
    box-sizing: border-box;
}

div.hud > div.life > div {
    width:100%;
    height:100%;
    background:linear-gradient(90deg, #EA6608, #EEDB48);
}

/* 8TH WALL */

div#loadingContainer {
    z-index:12;
    display:none;
    font-size:3vmin;
    line-height:1;
}

#requestingCameraPermissions {
    background: transparent !important;
}

#loadBackground {
    background:black !important;
}

.prompt-box-8w,
.prompt-button-8w,
.button-primary-8w {
    line-height:1.2;
}

/* #loadImage {
    width:20vmin !important;
    height:20vmin !important;
    margin-top:-10vmin !important;
    margin-left:-10vmin !important;
} */

/* */