body {
    padding: 1rem;
    font-family: Arial, Helvetica, sans-serif;
}

#log {
    width: 100%;
    font-family: courier;
    height: 15rem;
    background-color: #eee;
    overflow-y: scroll;
    resize: vertical;
    font-size: small;
}

span.error {
    color: #ff0000;
    font-weight: bold;
}

span.normal {
    color: #000000;
}

span.log {
    color: #777;
}

span.success {
    color: #080;
    font-weight: bold;
}

.mug {
    width: 300px;
    height: 300px;
    background: #000;
    position: relative;
    border-radius: 0 0 2rem 2rem;
    margin-bottom: 2rem;
    margin-top: 2rem;
}

.coffee {
    width: 90%;
    height: 90%;
    background: #bbb;
    position: relative;
    bottom: 0px;
    margin-left: 1rem;
    margin-bottom: 5%;
    border-radius: 0 0 20px 20px;
    text-align: center;
    color: #ffff;
    font-weight: bold;
}

#fill {
    width: 100%;
    height: 40%;
    background: rgb(145, 73, 0);
    position: absolute;
    bottom: 0px;
    border-radius: 0 0 20px 20px;
}

#lcolor {
    width: 30%;
    height: 5%;
    background-color: #080;
    position: absolute;
    bottom: 3px;
    margin-left: 35%;
    margin-bottom: 1%;
    border: 0px;
    padding: 0px;
    border-radius: 1rem;
}

#lightcolor {
    position: absolute;
    width: 100%;
    height: 100%;
    opacity: 0;
    cursor: pointer;
}

.mugname {
    width: 300px;
    text-align: center;
    font-size: 2rem;
}

#filltext {
    margin-top: -1.2rem;
    position: absolute;
    width: 100%;
    color: #000;
}

/* 
    ########
    # METER
    ########
  */

#meterbg {
    width: 300px;
    height: 2rem;
    background-color: #ddd;
    border-radius: 1rem;
    position: relative;
    margin-bottom: 2rem;
    background: linear-gradient(90deg, rgba(0, 106, 255, 1) 36%, rgba(12, 70, 231, 1) 37%, rgba(255, 10, 0, 1) 53%, rgba(255, 117, 0, 1) 54%);
}

#meterfg {
    width: 50%;
    height: 100%;
    position: absolute;
    top: 0;
    right: 0;
    background-color: rgba(255, 255, 255, .7);
    border-radius: 0 1rem 1rem 0;
    border-left: 1px solid #f00;

}

#meterlabel {
    position: absolute;
    left: 0;
    top: 20%;
    font-style: italic;
    color: #600;

}

#meterhandle {
    width: 3px;
    height: 130%;
    position: absolute;
    background-color: #000;
    top: -15%;
    left: 30%;
    z-index: 20;
}

#leftlabel {
    position: absolute;
    font-size: .8rem;
    top: 100%;
    left: 0;
}

#rightlabel {
    position: absolute;
    font-size: .8rem;
    top: 100%;
    right: 0;
}

#midlabel {
    position: absolute;
    font-size: 1rem;
    bottom: 90%;
    font-weight: bold;
    width: 10rem;
    translate: -1rem;
}

#muginterface {
    opacity: .8;
    margin-top: 1rem;
    position: relative;
    width: 300px;

}

#connectionlost {
    position: absolute;
    background: rgba(255, 220, 220, .7);
    height: 105%;
    width: 110%;
    left: -5%;
    z-index: 99;
    text-align: center;
    border-radius: .3rem;
    backdrop-filter: blur(3px);
    border: 1px solid black;
    box-shadow: 10px 5px 5px rgba(0, 0, 0, 0.5);
}

#connectionlosttext {
    margin-top: 40%;
    font-size: 2rem;
    font-weight: bold;
}

button {
    width: 300px;
    font-size: 1.5rem;
    padding: .5rem;
    background-color: #dfd;
    border-radius: .3rem;
}

#bat {
    position: absolute;
    top: -1.2rem;
    right: 0;
}