* {
    margin: 0;
    font-family: sans-serif;
    user-select: none;
    cursor: default;
}
.contents {
    width: 100vw;
    height: 100vh;
    background-color: #aaa;
    background-image: linear-gradient(to right,#aaa, #ddd);
}
.wrapper {
    flex-direction: var(--flex-dir-row);
    width: var(--width-desktop);
    height: 100vh;
    background-color: #fff;
    margin: 0 auto 0 auto;
    transition: var(--transition);
}
.blades {
    cursor: pointer;
    flex-direction: var(--flex-dir-row);
    flex: var(--blade-width);
    align-items: center;
    background-color: #ccc;
    z-index: 999;
    transition: var(--transition);
}
.labels {
    cursor: pointer;
    width: var(--label-width);
    height: var(--label-height);
    background-color: var(--bg-tab);
    border-radius: 5px;
    transition: var(--transition);
}
.tags {
    cursor: pointer;
    rotate: 90deg;
    position: absolute;
    transform-origin: 0% 100%;
    font-size: 2vw;
    transition: var(--transition);
}
@media screen and (orientation: portrait) {
    .wrapper {
        width: var(--width-mobile);
    }
    .labels {
        align-items: center;
        flex-direction: column;
    }
    .tags {
        rotate: 0deg;
        font-size: 2vh;
    }
    #label0 {
        width: var(--label-scale-0);
    }
    #label1 {
        width: var(--label-scale-1);
    }
    #label2 {
        width: var(--label-scale-2);
    }
    #label3 {
        width: var(--label-scale-3);
    }
    #label4 {
        width: var(--label-scale-4);
    }
}
@media screen and (orientation: landscape) {
    #label0 {
        height: var(--label-scale-0);
    }
    #label1 {
        height: var(--label-scale-1);
    }
    #label2 {
        height: var(--label-scale-2);
    }
    #label3 {
        height: var(--label-scale-3);
    }
    #label4 {
        height: var(--label-scale-4);
    }
}