/* Font */
span.fas {font-size:3em;}
table {font-size:0.8em;}

/* Margin */
body, main, form {margin:0 auto;}
h1, h2, h3, h4, p, label {margin:0.4em 0;}
input, select, button {margin:0;}
input[type=radio] {margin-right:0.4em;}
article {margin: 0 13%;}
article div {margin:9pt;}

/* Padding */
input, select, button {padding:.25em;}

/* Width */
main {width:300pt;}
article {width:74%;}

/* Height */
article {height:32%;}
article#controls {height:auto;}

/* Position */
main {position:relative;}
article {position:absolute;}

/* Display */
iframe {display:block;}
audio {display:none;}

/* Top */
article {top:8%;}
article#controls {top:55%;}

/* Index */
article#display {z-index:-2;}
article#input {z-index:-1;}

/* Color */
article {color:white;}

/* Background */
article#display {background-color:#32393F;}

/* Text */
table {text-shadow: 1px 1px 3pt #000000;}

/*
 * Controls
 */

.text {
        display: block;
        width: 90%;
        margin: 3pt auto;
        border: 3pt solid #A3A0A2;
        background-color:#32393F;
        color:white;
}
.button {
        display: block;
        border: 3pt solid #B725FF;
        background-color:#B725FF;
        color: white;
        border-radius:18pt;
        padding: 0.25em 1em;
        margin: 24pt auto;
        text-transform: uppercase;
        font-weight: bold;
        cursor: pointer;
}

/*
 * Media
 */

@media screen and (max-width:240pt){
        html {font-size:9pt;}
}