@font-face {
    font-family: CustomCondenBitmap;
    src: url("fonts/CustomCondenBitmap.ttf") format("truetype"), /* Safari, Android, iOS */
         url("fonts/CustomCondenBitmap.woff") format("woff"); /* Modern Browsers */
}

:root {
    --headFont:CustomCondenBitmap, Arial;
}

html, body {
    height: 100%;
    font-family: Arial;
}

body {
    margin: 0;
}

.stats {
    visibility: hidden;
    position: absolute;
    right: 0;
    margin: 5px;    
}

.card {
    position: absolute;
    left: 0; 
    right: 0; 
    margin-left: auto; 
    margin-right: auto;
    min-height: 100vh;
    display: -webkit-box;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
}

.card-title {
    position: absolute;
    font-family: var(--headFont);
    font-size: 3.3em;
}
.card-solution {
    position: absolute;
    font-size: 0.8em;
}
video {
    max-width: 30em;
}
.card-settings div {
    font-family: var(--headFont);
    font-size: 3.3em;
}
.card-settings fieldset input {
    margin: 10px;
}
.card-settings fieldset label {
    padding: 0px 5px 0px 10px;
    outline: 1px solid lightgray;
    outline-offset: 2px;
}
.card-settings fieldset input:checked {
    margin-left: 32px;
    outline: 2px solid yellow;
}

.card-buttons {
    position: fixed;
    bottom: 10px;
    width: 100%;
    display: flex;
    flex-flow: row wrap;
    justify-content: space-evenly;
}
.card-button {
    font-size: 80px;
    font-family: var(--headFont);
}
.card-button#button-again,#button-correct,#button-show{
    visibility: hidden;
}
.card-button:hover {
   text-shadow: 1px 1px 2px black, 0 0 25px gray, 0 0 5px darkgray;
}

fieldset {
    text-align: left;
}
select, input, label {
    font-size: large;
    margin: 10px 10px 0px 0px;
    cursor: pointer;
}