*,
*::before,
*::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
.card {
    width: 100px;
    background-color: white;
    height: 100%;
    display: inline-block;

    cursor: pointer;

    /* border-right-color: blue;
    border-right-width: 1px;
    border-right-style: solid;

    border-left-color: blue;
    border-left-width: 1px;
    border-left-style: solid; */
}

.card:hover {
    background-color: rgb(228, 228, 228);
}

.card.selected {
    background-color: rgb(204, 204, 204);
}

.card h1 {
    font-family: sans-serif;
    text-align: center;
    margin-top: 39px;
    font-size: 23px;
}

.card h2 {
    font-family: sans-serif;
    text-align: center;
    font-size: 11px;
}
.info-panel {
    height: 150px;
    width: 100%;

    background-color: white;

    position: absolute;
    bottom: 0;
    overflow-x: scroll;
    overflow-y: hidden;
    white-space: nowrap;

    margin-top: 10px;
    /* -webkit-box-shadow: 10px 0 5px -2px #888; */
             /* 0 -10px 2px black  */
    box-shadow: 0 11px 20px 10px black;
}