@import url('https://fonts.googleapis.com/css2?family=Roboto+Mono&display=swap');


html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td, article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
    margin: 0;
    padding: 0;
    border: 0;
    font-size: 100%;
    /* vertical-align: baseline; */
}
  


body{
    background: #ecf0f1;
}

.container{
color: #2d3436;
display: flex;
flex-flow: row wrap;
justify-content: space-between;

flex-direction: row;
width: 90%;
margin: 0 auto;
text-align: center;
}

.container img{
    margin-bottom: -10%;
}

.container a{
    text-decoration: none;
    color: blue;
}

.container a:hover{
    text-decoration: underline;
}

.container h2{
    font-size: 1.5rem;
    font-family: 'Roboto Mono', monospace;
    padding-bottom: 0.5rem;
}

.container h3{
    font-size: 1.2rem;
    font-family: 'Roboto Mono', monospace;
    padding-bottom: 1.5rem;
}

.container h3 span{
	font-size: 2rem;
    border: 1px solid #2d3436;
    border-radius: 3px;
    padding: 5px;
}

.container .check{
font-family: arial;
font-size: 80vw;
width: 100%;  
animation: bounce 1s ease;  
}

.container .statusmsg{
    width: 100%;
}

.container form{
padding-top: 20px;
font-family: 'Roboto Mono', monospace;
font-size: 1.5rem;
width: 100%;
display: flex;
flex-flow: row wrap;
justify-content: space-between;
align-items: center;
}

.container form input{
    font-size: 1.5rem;
    text-align: center;  
}


.container form input[type="submit"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    width: 100%;
    background: #3498db;
    color: #fff;
    border: none;
    border-radius: 3px;
    margin-top: 20px;
    padding: 5px;
}

.active{
 -webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 10px 20px 10px 20px;
background: #2ecc71;
color: #fff;
border: none;
border-radius: 3px;
}

.inactive{
 -webkit-appearance: none;
-moz-appearance: none;
appearance: none;
padding: 10px 20px 10px 20px;
background: #bdc3c7;
color: #fff;
border: none;
border-radius: 3px;
}

@keyframes bounce {
    0% { transform:translateY(0%); }
    20% { transform:translateY(-15%); }
    60% { transform:translateY(2%); }
    90% { transform:translateY(-4%); }
    100% { transform:translateY(0); }
}