/* Global */

* {
    box-sizing: border-box;
    -webkit-tap-highlight-color: transparent;
}

html {
    color: #a9895a;
    font-size: 3.8vw;
    line-height: 5.33vw;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", sans-serif;
    background-color: #fff;
}

p {
    color: #a9895a;
    font-size: 3.8vw;
    line-height: 5.33vw;
}

body {
    max-width: 420px;
    margin: 0 auto;
    min-height: 100vh;
    background-color: #fff;
}

::-moz-selection {
    background: #b3d4fc;
    text-shadow: none;
}

::selection {
    background: #b3d4fc;
    text-shadow: none;
}

.unselectable {
    -webkit-touch-callout: none; /* iOS Safari */
    -webkit-user-select: none; /* Safari */
    -khtml-user-select: none; /* Konqueror HTML */
    -moz-user-select: none; /* Firefox */
    -ms-user-select: none; /* Internet Explorer/Edge */
    user-select: none; /* Non-prefixed version, currently supported by Chrome and Opera */
}

@media screen and (min-width: 420px) {

    html {
        font-size: 16px;
        line-height: 22.4px;
    }

    p {
        font-size: 16px;
        line-height: 22.4px;
    }
}

/* Hyperlinks */

a:link {
    color: #010508;
}

a:visited {
    color: #010508;
}

a:hover {
    color: #000;
}

a:active {
    color: #010508;
}


/* Sections */

.main {
    padding: 0;
}

.background-container {
    position: relative;
}

.background {
    position: absolute;
    left: 0px;
    top: 0px;
    width: 100%;
    pointer-events: none;
}

.questions-container {
    position: absolute;
    left: 0px;
    top: 35vw;
    width: 100%;
}

.questions-header {
    text-align: center;
}

.question-title {
    margin: 0 5.95vw 4.76vw 5.95vw;
}

.question-copy {
    margin: 4.76vw 5.95vw 5.95vw 5.95vw;
}

.cards-container {
    display: flex;
    flex-direction: column;
    justify-content: center;
    width: 100%;
    height: 100%;
    overflow: hidden;
    position: relative;
}

@media screen and (min-width: 420px) {

    .question-title {
        margin: 0 25px 20px 25px;
    }
    .question-copy {
        margin: 20px 25px 25px 25px;
    }
    .questions-container {
        top: 147px;
    }
}


/* Cards */

.cards {
    order: 1;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    padding-top: 24px;
    text-align: center;
    z-index: 1;
}

.card {
    display: flex;
    justify-content: center;
    align-content: center;
    flex-direction: column;
    width: 85vw;
    max-width: 370px;
    background: #fff;
    border-radius: 2vw;
    overflow: hidden;
    position: absolute;
    will-change: transform;
    transition: all 0.3s ease-in-out;
    cursor: -webkit-grab;
    cursor: -moz-grab;
    cursor: grab;
    background-color: #260f0b
}

.card-content {
    display: none;
    pointer-events: none;
}

.moving.card {
    transition: none;
    cursor: -webkit-grabbing;
    cursor: -moz-grabbing;
    cursor: grabbing;
}

.card img {
    max-width: 100%;
    pointer-events: none;
    margin-top: 1.5vw;
    /* transform: scale(1.05); */
}

.swipe-instructions {
    position: absolute;
    left: 50%;
    bottom: 8vw;
    transform: translate(-50%);
    width: 11.9vw;
    height: 11.9vw;
    z-index: 1;
}

.swipe-instructions-copy {
    position: absolute;
    left: 50%;
    bottom: 2vw;
    transform: translate(-50%);
    width: 80vw;
    z-index: 1;
}

@media screen and (min-width: 420px) {

    .cards {
        padding-top: 23px;
    }
    .card {
        border-radius: 8.4px;
    }
    .card img {
        margin-top: 6.3px;
    }
    .swipe-instructions {
        width: 50px;
        height: 50px;
        bottom: 33.6px;
    }
    .swipe-instructions-copy {
        bottom: 8.4px;
        width: 100%;
    }
}


/* Buttons */

.card-buttons {
    order: 2;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-content: center;
    text-align: center;
    margin-bottom: 2.5vw;
}

.card-buttons button {
    display: inline-block;
    position: relative;
    border-radius: 20vw;
    width: 38.09vw;
    height: 14.76vw;
    border: 0;
    background: #000407;
    margin: 0 3vw;
    vertical-align: middle;
    transition: transform .2s;
}

.card-buttons button p {
    position: absolute;
    font-size: 4vw;
    left: 50%; 
    top: 50%;
    text-align: center;
    transform: translate(-50%, -50%);
    line-height: 1.1;
    margin-top: 0px;
}

.card-button-zoom {
    transform: scale(1.1);
}

@media screen and (min-width: 420px) {

    .card-buttons {
        margin-bottom: 10.5px;
    }
    .card-buttons button {
        border-radius: 84px;
        width: 160px;
        height: 62px;
        margin: 0 12.6px;
    }
    .card-buttons button p {
        font-size: 16.8px;
    }
}


/* Result Header */

.result-img {
    text-align: center;
    max-width: 85%;
    border-radius: 2vw;
    padding: 0px;
}

.result-buttons {
    margin-top: 4.76vw;
}

.result-btn {
    display: block;
    border-radius: 20vw;
    height: 10vw;
    margin: 2vw 8vw;
    padding: 2vw 2vw;
    color: #a9895a;
    background: #000407;
    text-align: center;
    text-decoration: none;
    font-weight: bold;
    transition-duration: 0.2s;
    transition-property: background-color;
    font-size: 0.95em;
    user-select: none;
}

.result-btn:hover {
    background-color: #000407;
}

@media screen and (min-width: 420px) {
    .result-img {
        border-radius: 8.4px;
    }
    .result-buttons {
        margin-top: 20px;
    }
    .result-btn {
        border-radius: 84px;
        height: 42px;
        margin: 8.4px 33.6px;
        padding: 8.4px 8.4px;
    }
}


/* Footer */

.footer {
    margin-top:20vw;
    text-align: center;
    font-size: 3.8vw;
    color: #010508;
}

.footer a:link {
    color: #010508;
    text-decoration: underline;
}

.footer a:hover {
    color: #e2bf8a;
}

.footer a:visited {
    color: #010508;
}

@media screen and (min-width: 420px) {

    .footer {
        margin-top: 84px;
        font-size: 16px;
    }
}


/* Dark theme */

@media (prefers-color-scheme: dark) {
    html {
        background-color: #222;
    }
    body {
        background-color: #222;
    }
}