/*
* Prefixed by https://autoprefixer.github.io
* PostCSS: v8.3.6,
* Autoprefixer: v10.3.1
* Browsers: last 4 version
*/

:root {
    font-size: 16px;
    --vh: 1vh;
    --after-opacity: 1;
}

/*! minireset.css v0.0.6 | MIT License | github.com/jgthms/minireset.css */
html,body,p,ol,ul,li,dl,dt,dd,blockquote,figure,fieldset,legend,textarea,pre,iframe,hr,h1,h2,h3,h4,h5,h6{margin:0;padding:0}h1,h2,h3,h4,h5,h6{font-size:100%;font-weight:normal}ul{list-style:none}button,input,select{margin:0}html{-webkit-box-sizing:border-box;box-sizing:border-box}*,*::before,*::after{-webkit-box-sizing:inherit;box-sizing:inherit}img,video{height:auto;max-width:100%}iframe{border:0}table{border-collapse:collapse;border-spacing:0}td,th{padding:0}

html {
    /* Users can't select text (won't interrupt the app-y feel) */
    -webkit-tap-highlight-color: transparent;
    -ms-user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -webkit-touch-callout: none;
    user-select: none;

    /* Users can't zoom on mobile */
    -ms-touch-action: pan-y;
    touch-action: pan-y;

    text-decoration: none;
}

:focus {
    outline: none !important;
}

html, body {
    overflow: hidden;
    height: 100%;
    width: 100%;
    height: calc(var(--vh, 1vh) * 100);
    width: 100vw;
}
main {
    height: calc(var(--vh, 1vh) * 100);
    position: fixed;
    top:0;
    left:0;
    right:0;
    bottom:0;
}

body {
    background: -o-radial-gradient(white 75%, #cccccc);
    background: radial-gradient(white 75%, #cccccc);
    font-family: BlinkMacSystemFont,-apple-system,"Segoe UI",Roboto,Oxygen,Ubuntu,Cantarell,"Fira Sans","Droid Sans","Helvetica Neue",Helvetica,Arial,sans-serif;
}

.q-container, .cardstack {
    /* Center container */
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
        -ms-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);

    /* Poker card aspect ratio: 2.5 / 3.5 */
    width: 70vw;
    height: 98vw; 
    
    /* Size for text */ 
    /* font-size: 1.9em; */
    /* Leave room for text */
    padding: 1em;

    /* Give cards round corners */
    border-radius: 2.5%;
}

.q-container {
    background-color: #FFF;

    /* Put the question container in front of everything, apart from menu */
    z-index: 98;

    /* Center textbox inside card */
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;

    text-align: left;
    /* Container size won't change if text overflows */
    /* overflow: hidden; */
}


.q-container:not(draggable)::after {
    content: "";
    border-radius: 2.5%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-transition: opacity 1.7s ease-in-out;
    -o-transition: opacity 1.7s ease-in-out;
    transition: opacity 1.7s ease-in-out;
    opacity: var(--after-opacity, 1);
    
    -webkit-box-shadow:
    0.7px 0.4px 1.7px rgba(0, 0, 0, 0.029),
    1.9px 1.2px 4.2px rgba(0, 0, 0, 0.04),
    3.8px 2.5px 7.9px rgba(0, 0, 0, 0.048),
    7.2px 4.7px 14.1px rgba(0, 0, 0, 0.056),
    13.7px 8.8px 26.3px rgba(0, 0, 0, 0.066),
    31px 20px 63px rgba(0, 0, 0, 0.09);
    
            box-shadow:
    0.7px 0.4px 1.7px rgba(0, 0, 0, 0.029),
    1.9px 1.2px 4.2px rgba(0, 0, 0, 0.04),
    3.8px 2.5px 7.9px rgba(0, 0, 0, 0.048),
    7.2px 4.7px 14.1px rgba(0, 0, 0, 0.056),
    13.7px 8.8px 26.3px rgba(0, 0, 0, 0.066),
    31px 20px 63px rgba(0, 0, 0, 0.09);

    /* box-shadow: 10px 10px 0px red; */
}

/* swipe.js */
.q-container.flyaway {
    -webkit-transition: -webkit-transform 0.35s;
    transition: -webkit-transform 0.35s;
    -o-transition: transform 0.35s;
    transition: transform 0.35s;
    transition: transform 0.35s, -webkit-transform 0.35s;
    -webkit-transform: translate(-50%, -200%);
        -ms-transform: translate(-50%, -200%);
            transform: translate(-50%, -200%);
}

.q-container.draggable {
    z-index: 99;
}


.cardstack {
    opacity: 0.89;

    /* duration | easing-function | delay | iteration-count | direction | fill-mode | play-state | name */
    -webkit-animation: var(--transition-time) ease 0s 1 normal forwards running move;
            animation: var(--transition-time) ease 0s 1 normal forwards running move;
}

/* Pre-render shadow, but hide it */
.cardstack::after {
    content: "";
    border-radius: 2.5%;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    -webkit-box-shadow:
    6.2px 4.7px 4.9px -4px rgba(0, 0, 0, 0.07),
    17.3px 12.9px 13.5px -4px rgba(0, 0, 0, 0.056),
    41.6px 31.1px 32.6px -4px rgba(0, 0, 0, 0.045),
    138px 103px 108px -4px rgba(0, 0, 0, 0.03);
            box-shadow:
    6.2px 4.7px 4.9px -4px rgba(0, 0, 0, 0.07),
    17.3px 12.9px 13.5px -4px rgba(0, 0, 0, 0.056),
    41.6px 31.1px 32.6px -4px rgba(0, 0, 0, 0.045),
    138px 103px 108px -4px rgba(0, 0, 0, 0.03);
    opacity: 0;
    -webkit-animation: 2s ease 1.5s 1 normal forwards running shadow;
            animation: 2s ease 1.5s 1 normal forwards running shadow;
}

@-webkit-keyframes move {
    from { 
        -webkit-transform: translate(-50%, -50%) rotate(0); 
                transform: translate(-50%, -50%) rotate(0) 
    }
    to { 
        -webkit-transform: translate(var(--random-x), var(--random-y)) rotate(var(--random-rotation)); 
                transform: translate(var(--random-x), var(--random-y)) rotate(var(--random-rotation))
    }
}

@keyframes move {
    from { 
        -webkit-transform: translate(-50%, -50%) rotate(0); 
                transform: translate(-50%, -50%) rotate(0) 
    }
    to { 
        -webkit-transform: translate(var(--random-x), var(--random-y)) rotate(var(--random-rotation)); 
                transform: translate(var(--random-x), var(--random-y)) rotate(var(--random-rotation))
    }
}

@-webkit-keyframes shadow {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}

@keyframes shadow {
    from {
        opacity: 0
    }
    to {
        opacity: 1
    }
}


#current-q, #next-q {
    font-size: calc(3vw + 2.9vh);
    margin: 0.2em;
    word-break: break-word;
}


/* Landscape, both mobile & desktop: rotate question container and cards */
@media (orientation: landscape) {
    .q-container, .cardstack {
        height: 75vh;
        height: calc(var(--vh, 1vh) * 75); /* Fix Safari */ 
        width: 105vh;
        width: calc(var(--vh, 1vh) * 105); /* Fix Safari */ 
    }
}

/* Mobile: move cards downwards to have room for nav */
@media only screen and (max-width: 485px) {
    .q-container, .cardstack {
        margin-top: 0.5em;
    }
}