body {
    font-family: Verdana, Helvetica, sans-serif;
    text-align: center;
    align-items: center;
    display: flex;
    justify-content: center;
    background-color: #222222;
    color: white;
}
a {
    color: white;
    text-decoration: none;
}
img {
    max-height: 200px;
    -webkit-filter: drop-shadow(0px 16px 10px rgba(0,0,0,0.6));
    -moz-filter: drop-shadow(0px 16px 10px rgba(0,0,0,0.6));
    -ms-filter: drop-shadow(0px 16px 10px rgba(0,0,0,0.6));
    -o-filter: drop-shadow(0px 16px 10px rgba(0,0,0,0.6));
     filter: drop-shadow(0px 16px 10px rgba(0,0,0,0.6));
}
button {
    margin: 20px;
}

@media (max-width: 600px) {
    .idCard {
        width: 100%;
        padding: 10px;
    }
    .left {
        width: 100%;
        height: auto;
        text-align: center;
    }
    .right {
        width: 100%;
    }
}
.idCardInside {
    display: flex;
    justify-content: center;
}
.insideColumn {
    padding: 20px;
    background-color: lightgray;
}

.category {
    color: gold;
}
.blink {
  animation: blinker 1s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

.legend { list-style: none; }
.legend li { float: left; margin-right: 10px; }
.legend span { border: 1px solid #ccc; float: left; width: 12px; height: 12px; margin: 2px; }
.legend .active, .activityTrue { background-color: green; }
.legend .inactive, .activityFalse { background-color: darkred; }
.legend .retired, .activityOver { background-color: black; }
.legend .unknown, .activityUnknown { background-color: gray; }

#currentState {
    border: 2px solid #555;
    padding: 15px;
    background-color: #333;
    margin-bottom: 20px;
}
#history {
    border: 2px solid #444;
    padding: 15px;
    background-color: #2a2a2a;
}