*{
    margin:0;
}
.hide, .hide *{display:none;}
body, html{
    height:100%;
    background-color: #000;
}
body{
    display:flex;
    align-items:center;
    justify-content:center;
    font-weight:bolder;
    font-family:sans-serif;
    text-align:center;
}

#fromto{
    display:flex;
    justify-content:center;
}
#from, #to{
    margin-left:0.5em;
    margin-right:0.5em;
    width:20%;
}
.button, .input {
    background-color:white;
    border-radius:0.25em;
    border:none;
    padding:0.25em 0.6em;
    color:#000;
}
.button:hover{
    background-color:lightgrey;
}
form *{
    font-size: 1em;
    text-align:center;
    margin-top:0.5em;
    margin-bottom:0.5em;
}
form label{
    color:white;
    font-size: 2em;
}
form hr{
    margin-top:1em;
    margin-bottom:1em;
}

/* Alert window */
.success{background-color:#3aa74eaa;}
.fail{background-color:#aa3333aa;}

.fail, .success{
    backdrop-filter: blur(10px);
    position:absolute;
    top:0;
    left:0;
    width:100%;
    height:100%;
}
.softfail{
    position:absolute;
    top:auto;
    left:auto;
    background-color:#aa6f00dd;
    border-radius:1em;
}
#alert{
    display:flex;
    align-items:center;
    justify-content:center;
}
#alert p{
    height:fit-content;
    padding:1em;
    
}
/* video window */
#scanRegion{
    width: 100vmin;
    height: 100vmin;
}
#scanRegion canvas{
    width: 100%;
    height: 100%;
}
footer{
    width:100%;
    display:flex;
    flex-direction:row;
    flex-wrap:wrap;
    justify-content:space-between;
    color:#fff;
    background-color:#000;
    font-size:small;
    position:absolute;
    bottom:0;
}
footer p{
    padding:0.5em;
}
footer a{
    color:#fff;
}

@media only screen and (max-width: 500px){
    #createCards{
        display:none;
    }
}