body, text{
font-family:sans-serif;
font-weight:900,
}

input{
    -webkit-appearance: none;
    position:absolute;
    top: 45%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    font-size: 20px;
    box-shadow: none;
    padding:15px;
    width:200px;
    background-color:cadetblue;
    border-radius:100px;
    border:0;
    font-weight:700;
    color:#FFF;
    font-family: sans-serif;
    text-transform: uppercase;
    opacity:0.8;
    cursor:pointer;
}
#text{
    position:absolute;
    top: 35%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    font-size:1.5em;
    color:#999;
}
.legend{
    position:absolute;
    top: 93%;
    left: 50%;
    margin-right: -50%;
    transform: translate(-50%, -50%);
    font-size:1.5em;
    width:10%;
    text-align:center;
}
#legend-pm{
    left:30%;
}
#legend-no{
    left:70%;
}
.legend-color{
    opacity:0.3;
    border-radius:50%;
    width:30px;
    height:30px;
    margin:auto;
}
.legend-text{
    font-size:0.85em;
    color:#999;
    margin: 15px auto;
}
#legend-pm .legend-color{
    background:#999;
}
#legend-oz .legend-color{
    background:#16417C;
}
#legend-no .legend-color{
    background:#B8333D;
}
@media screen and (min-width: 920px){
    .legend-color{
        width:35px;
        height:35px;
    }  
}