* {
    margin: 0px;
    padding: 0px;
    font-family: "Brygada 1918", serif;
}

.card {
    padding: -5px;
    height: calc(160px * 4);
    width: calc(110px * 4);
    border: 5px solid black;
    border-radius: 25px;
    display: flex;
    background-image: url("bg.jpg");
}

.side-panel {
    height: calc(160px * 4);
    width: calc(160px * 4 * 0.1);
    background-color: balck;
    border-top-left-radius: 20px;
    border-bottom-left-radius: 20px;
}

.level {
    width: calc(160px * 4 * 0.1);
    height: calc(160px * 4 * 0.1);
    background-image: url("bg.jpg");
    border-top-left-radius: 20px;
    border-right: 5px solid;
    border-bottom: 5px solid;
    border-color: black;
    border-bottom-right-radius: calc((160px * 4 * 0.1) / 2);
    padding: 0px;
    margin: 0px;
    text-align: center;
    line-height: calc(160px * 4 * 0.1);
}

.side-panel-content {
    height: calc(160px * 4 - (160px * 4 * 0.1) - 5px);
    display: flex;
}

.spell-type {
    align-self: flex-end;
    writing-mode: sideways-lr;
    margin: 10px;
}

.contents {
    padding: 10px;
    width: calc(160px * 4 * 0.9 - 20px - 10px);
    width: calc(110px * 4);
}

.description > p {
    font-size: 14px;
}

.card.bard {
    border-color: #c1121f;
}

.card.bard > .side-panel {
    background-color: #e63946CC;
}

.card.bard > .side-panel > .level {
    border-color: #c1121f;
}