@font-face {
    font-family: 'BaseNeueExtBdExp';
    src: url('assets/fonts/BaseNeue-ExpandedExtraBold.woff2') format('woff2'), /* Modern Browsers */
         url('assets/fonts/BaseNeue-ExpandedExtraBold.otf') format('opentype'); /* Safari, Android, iOS */
    font-style: normal;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'BaseNeueExtBdExp';
    src: url('assets/fonts/BaseNeue-ExpExtBdObliq.woff2') format('woff2'), /* Modern Browsers */
         url('assets/fonts/BaseNeue-ExpExtBdObliq.otf') format('opentype'); /* Safari, Android, iOS */
    font-style: italic;
    font-weight: normal;
    text-rendering: optimizeLegibility;
}

@font-face {
    font-family: 'Formular';
    src: url('assets/fonts/formular-mono.ttf') format('truetype'),
         url('assets/fonts/formular-mono.otf') format('opentype'); /* Safari, Android, iOS */
    font-weight: normal;
}

@font-face {
    font-family: 'Ratch';
    src: url('assets/fonts/Ratch-Bold.otf') format('opentype'); /* Safari, Android, iOS */
    font-weight: bold;
}

body {
    font-family: "Formular", sans-serif;
    background: #8B00FF;
    background: linear-gradient(135deg,#8B00FF 33%, #0000FF 100%);
    color:white;
}

h1, h2, h3, h4 {
    font-family: "BaseNeueExtBdExp", serif;
}

span.playground {
    position: absolute;
    bottom: 5vmin;
    font-size: 2.5vmin;
}

span.playground:first-of-type {
    left: 5vmin;
}

span.playground:last-of-type {
    right: 5vmin;
}

div.flash {
    position:absolute;
    left:0;
    top:0;
    width:100%;
    height:100%;
    background:white;
    display:none;
    z-index:2;
}

div.page {
    height: calc(100% - 5vmin);
}

div.page > div {
    border-radius:15vmin;
    overflow:hidden;
    margin:5vmin;
    width: calc(100% - 10vmin);
    height: calc(100% - 10vmin);
    position: relative;
}

div.page[data-name=camera] > div > video {
    width: 100%;
    height: 100%;
    object-fit: cover;
    transform: scaleX(-1);
    -webkit-transform: scaleX(-1); /* iOS Safari fallback */
    background:rgba(255,255,255,0.2);
}

div.page[data-name=camera] > div > div {
    position: absolute;
    left: 5vmin;
    bottom: 5vmin;
    background: white;
    width: calc(100% - 10vmin);
    border-radius: 10vmin;
    padding: 5vmin;
}

div.page[data-name=camera] > div > div > div {
    font-size: 2.5vmin;
    color: black;
    line-height: 1.5;
    height: 20vmin;
    text-align: left;
}

div.page[data-name=camera] button {
    width: 100%;
    height: 10vmin;
    border-radius: 5vmin;
    font-size: 3vmin;
    background: #8B00FF;
    background: linear-gradient(135deg,#8B00FF 33%, #0000FF 100%);
    color:white;
}

div.page[data-name=camera] button.shuffle {
    position:absolute;
    left:50%;
    top:-7vmin;
    margin-left:-5vmin;
    /* float: right; */
    width: 10vmin;
    /* margin: 0 0 2vmin 2vmin; */
    background: #8B00FF;
    background: linear-gradient(135deg,#8B00FF 33%, #0000FF 100%);
    text-align: center;
    font-size: 6vmin;
}

div.page[data-name=working] img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background:rgba(255,255,255,0.2);
}

div.page[data-name=working] img.blurry {
    filter: blur(1.5vmin);
}

div.page[data-name=working] > div > div:not(.sprite) {
    position: absolute;
    left: 0;
    bottom: 0;
    width: calc(100% - 20vmin);
    font-size: 3vmin;
    background: white;
    line-height: 1.5;
    color: black;
    padding: 5vmin;
    margin: 10vmin;
    border-radius: 10vmin;
}

div.page[data-name=working] div.sprite {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    width: 30vmin;
    height: 30vmin;
    background-image: url("/assets/graphics/character-spritesheet.png");
    background-repeat: no-repeat;
    background-size: calc(30vmin * 13) calc(30vmin * 14);
}

div.page[data-name=result] img.photo {
    width: 100%;
    height: 100%;
    object-fit: cover;
    background:rgba(255,255,255,0.2);
}

div.page[data-name=result] button {
    position: absolute;
    width: 10vmin;
    height: 10vmin;
    background: red;
    left: 10vmin;
    top: 10vmin;
    border-radius: 50%;
    font-size:6vmin;
    background: #8B00FF;
    background: linear-gradient(135deg,#8B00FF 33%, #0000FF 100%);
    color:white;
}

div.page[data-name=result] div.qr {
    position: absolute;
    left: 50%;
    bottom: 5vmin;
    background: rgba(255, 255, 255, 0.75);
    padding: 2vmin;
    border-radius: 5vmin;
    transform: translateX(-50%);
}

div.page[data-name=result] div.qr > img {
    width: 20vmin;
    height: 20vmin;
}