:root {
    --accent-color: rgb(24, 142, 229);
    --main-bg-color: rgb(16, 16, 16);
    --section-bg-color: rgb(21, 21, 37);
    --text-color: rgb(219, 219, 219);
    --error-color: rgb(189, 55, 18);
    --success-color: rgb(115, 138, 5);
}

body {
    background-color: var(--main-bg-color);
    font-family: sans-serif;
    color: var(--text-color);
}

@font-face {
    font-family: "oxford";
    src: url("/public/fonts/oxford.woff") format('woff');
}

.error {
    color: var(--error-color);
}

.success {
    color: var(--success-color);
}

header {
    display: flex;
    font-family: oxford;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.flip {
    -moz-transform: scale(-1, +1);
    -o-transform: scale(-1, +1);
    -webkit-transform: scale(-1, +1);
    transform: scale(-1, +1);
}

header img {
    width: 60px;
    padding: 1em;
}

header h1 {
    font-size: 2em;
}

header marquee {
    max-width: 20em;
}

.section {
    border-radius: 0.5em;
    background-color: var(--section-bg-color);
    padding: 1em;
    margin: 1em;
    margin-left: auto;
    margin-right: auto;
    max-width: 50em;
}

input[type=text] {
    font-size: 2em;
    background-color: var(--main-bg-color);
    color: var(--accent-color);
    display: block;
    margin: auto;
    border: none;
    border-bottom: 1px solid var(--accent-color);
    text-align: center;
}

.flipBtnWrapper {
    width: 400px;
    height: 200px;
    position: relative;
    margin: 1em auto;
}

.flipBtn, .flipBtn_face {
    width: 100%;
    height: 100%;
    position: absolute;
}

.flipBtn_front {
    background-color: white;
    backface-visibility: hidden;
    background-size: cover;
}

.flipBtn_back {
    background-color: white;
    background-size: cover;
    -moz-transform: scaleX(-1);
    -o-transform: scaleX(-1);
    -webkit-transform: scaleX(-1);
    transform: scaleX(-1);
}

.flipBtn {
    transform-style: preserve-3d;
}

.flipBtn {
    transition: transform 2s;
    transform-style: preserve-3d;
    transform: rotateY(-180deg);
}

.flipBtnWrapper:hover .flipBtn {
    transform: rotateY(0deg);
}

#NFC-button {
    cursor: pointer;
    display: block;
    width: 10em;
    height: 10em;
    margin: auto;
    padding: 1em;
}

#NFC-button img {
    width: 100%;
}

.button {
    background-image: -webkit-linear-gradient(top, #3b3b3b, #000);
    background-image: linear-gradient(top, #3b3b3b, #000);
    border-radius: 50%;
    box-shadow: 0px 8px 10px 0px rgba(0, 0, 0, .3);
    height: 70px;
    margin: 0 30px 30px 0;
    position: relative;
    width: 70px;
    border: none;
}

.button:hover{
    background-image: -webkit-linear-gradient(top, #444, #666);
    background-image: linear-gradient(top, #444, #666);
}

.button:active{
    background-image: -webkit-linear-gradient(top, #888888, #888888);
    background-image: linear-gradient(top, #888888, #888888);
    box-shadow: 0 3px 5px 0 rgba(0,0,0,.4), inset 0px -3px 1px 1px rgba(204,198,197,.5);
}

.button:active:after{
    color:#dbd2d2;
    text-shadow: 0px -1px 1px #bdb5b4, 0px 1px 1px white;
}