* {
    margin: 0;
    padding: 0;
    font-family: "Zen Maru Gothic", serif;
}

:root {
    font-size: min(1vw, 0.8dvh);

    --bg: linear-gradient(45deg, #57a 20%, #9ab 80%);
    --bar: #def;
}

@media(prefers-color-scheme: dark) {
    :root {
        --bg: linear-gradient(45deg, #001 20%, #113 80%);
        --bar: #eef;
    }
}

body {
    background: var(--bg);
    touch-action: none;
    user-select: none;
    -moz-user-select: none;
    -webkit-user-select: none;
    -ms-user-select: none;
    overflow: hidden;

    min-height: 100svh;
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

#choose {
    display: none;

    #catch {
        width: 30rem;
        height: 30rem;
        display: block;
        margin: 0 auto 5rem;
        color: #fff;
        text-align: center;
    }

    label {
        margin: 2rem auto 1rem;
        padding: 3rem 6rem;
        color: #fff;
        border-radius: 1.5rem;
        font-size: 5rem;
        cursor: pointer;

        display: block;

        input {
            display: none;
        }
    }

    #warn {
        box-sizing: border-box;

        color: #f33;
        text-align: center;
        font-size: 4rem;
        white-space: nowrap;
        height: 5rem;
    }
}

#content {
    display: none;
    color: #fff;
    line-height: 1;
    width: 100%;
    text-align: center;

    #title {
        font-size: 7rem;
        margin: auto;
        padding: 6rem 0 7rem;
        width: 80%;
        white-space: nowrap;
        overflow-x: hidden;
    }

    #time {
        font-size: 4rem;
    }

    #prog {
        margin: auto;
        padding: 2rem 0 4rem;
        max-width: 100rem;

        #frame {
            width: 80rem;
            height: 0.5rem;
            margin: auto;
            border-radius: 0.5rem;

            #bar {
                width: 0%;
                height: 0.5rem;
                background-color: var(--bar);
                border-radius: 0.5rem;
            }
        }
    }

    #ctrl {
        margin: auto;
        display: grid;
        grid-auto-flow: column;
        gap: 3rem;
        width: fit-content;
        font-size: 8rem;

        .icon {
            cursor: pointer;
            display: flex;
            align-items: center;
        }

        #play {
            font-size: 12rem;
        }
    }

    #songs {
        height: 70rem;
        width: 100%;
        margin: 4rem auto 0;
        display: flex;
        position: relative;

        .song {
            padding: 0 4rem;
            border-radius: 5rem;

            width: fit-content;
            max-width: 60%;
            height: 15rem;

            position: absolute;
            top: 0;
            left: 0;
            bottom: 0;
            right: 0;
            margin: auto;

            white-space: nowrap;

            display: flex;
            align-items: center;

            .icon {
                font-size: 5rem;
                display: none;
            }

            &.on>.icon {
                display: block;
            }

            .name {
                width: fit-content;
                max-width: 100%;
                font-size: 5rem;
                overflow: hidden;
            }

            &:nth-of-type(2),
            &:nth-of-type(4) {
                z-index: 1;
            }

            &:nth-of-type(3) {
                z-index: 2;
            }
        }
    }
}

.icon {
    font-family: 'Material Icons Outlined';
}

.glass {
    background-color: #fff1;
    border: #fff3 0.5rem solid;
    backdrop-filter: blur(5rem);
    box-shadow: 0.3rem 0.3rem 0.3rem #0002;
}