@media (max-width:768px) {
    html {
        font-size: 55%;
    }
}

table,
th,
td {
    border: 0.1em solid #000000;
    height: 2em;
}

table {
    border-collapse: collapse;
    width: 80%;
    margin: auto;
}

th,
td {
    text-align: center;
    vertical-align: middle;
}


th {
    font-weight: bolder;
}

th.charger_column {
    width: 30%;
}

td.available {
    background-color: #c5eba3;
}

td.occupied {
    background-color: #e6b8af;
    /*background-color: #ffffff;
    background-image: linear-gradient(to right, #e6b8af, #e6b8af);
    background-repeat: no-repeat;*/
}

td.soon {
    background-color: #fff2cc;
    /*background-color: #ffffff;
    background-image: linear-gradient(to right, #fff2cc, #fff2cc);
    background-repeat: no-repeat;*/
}

span.percentage {
    display: none;
}

.text {
    max-width: 80%;
    margin: auto;
}

#plug {
    font-size: 170%;
    letter-spacing: -0.8em;
}

#hand {
    font-size: 120%;
    letter-spacing: 0.3em;
}

#face {
    font-size: 200%;
}

#motor {
    font-size: 400%;
    letter-spacing: 0.4em;
    line-height: 60%;
}