#levels-container{
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    align-items: center;
    gap: 20px;
    margin: 20px auto;
    width: 100%;
    max-width: 580px;
    max-height: 70vh;
    overflow-y: scroll;
    transition: .2s;
    -webkit-mask: linear-gradient(180deg,#000,#000 10% 90%,#0000);
}

.level {
    box-shadow: inset 0 0 0 2px aliceblue;
    border-radius: 16px;
    line-height: 96px;
    height: 96px;
    width: 96px;
    font-size: 32px;
    text-align: center;
    margin: 0;
    transition: .2s;
}

.level:hover {
    background: rgba(240, 248, 255, 0.2);
}

.disabled {
    opacity: 0.5;
}

a {
    text-decoration: none;
    color: aliceblue;
}

.completed, .completed:hover {
    background: linear-gradient(150deg,#b5f25b 0%, #4caf50 40%, #459748 100%);
    box-shadow: none;
    text-shadow: 0px 0px 2px #00000036;
}

.started, .started:hover {
    background: linear-gradient(150deg,#f2a65b 0%, #af824c 40%, #976d45 100%);
    box-shadow: none;
    text-shadow: 0px 0px 2px #00000036;
}

#level-type-container {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 10px;
}

#level-type-container > button {
    width: 120px;
}