.year{
    border: 1px solid black;
    /*@starting-style{*/
    /*    opacity: 0;*/
    /*}*/
    /*transition: opacity 1s ease-in;*/
}

.month,
.day,
.character_container,
.character{
    margin-left: 25px;
}

.character-roll{
    margin-left: 50px;
}

.year>*:first-child,
.month>*:first-child,
.day>*:first-child{
    user-select: none;
}

.year>*:first-child::before,
.month>*:first-child::before,
.day>*:first-child::before{
    content: '▼';
    scale: .5;
    margin-left: 15px;
    margin-right: 10px;
    display: inline-block;
    transition: transform 0.3s;
}

.collapsed::before{
    transform: rotate(-90deg);
}