*,
*::before,
*::after {

    box-sizing: border-box;

}

body {

    display: flex;
    flex-direction: column;
    font: 1.1rem calibri, arial, verdana;
    overflow: hidden;
    padding: 0.5rem;

}

.container {

    display: flex;
    flex: 1;
    flex-direction: column;
    min-height: 0;

}

.filters {

    align-items: center;
    display: flex;
    justify-content: space-around;
    margin: 1rem 0;
    width: 18rem;

    i {

        cursor: pointer;
        font-size: 0.8rem;
        opacity: 0.5;
        transition: 0.2s ease;

        &.active {

            opacity: 1;
            transform: scale(1.2);

        }

    }

}

html,
body {

    height: 100%;
    margin: 0;

}

/* playlist */
.list {

    background: #ddd;
    border-radius: 0.5rem;
    flex-shrink: 0;
    padding: 0.2rem;
    width: 24.5rem;

    li {

        cursor: pointer;

    }

    .playing {

        background-color: lightgrey;
        border-radius: 0.5rem;
        font-weight: bold;
        padding: 0.4rem;

    }

}

/* lyrics */
.lyrics {

    flex: 1;
    margin-top: 1rem;
    min-height: 0;
    overflow-y: auto;
    overflow-wrap: break-word;
    padding: 0.2rem;
    position: relative;
    scrollbar-gutter: stable;
    white-space: pre-wrap;
    width: 25.5rem;

    div {

        display: none;
        left: 0;
        position: absolute;
        top: 0;

        &.display {

            display: block;

        }

    }

}

/* grade colors */
#playlist {

    li {

        &.a::marker,
        &.a-minus::marker,
        &.a-plus::marker {

            color: #66BB6A;

        }

        &.b::marker,
        &.b-minus::marker,
        &.b-plus::marker {

            color: #1E88E5;

        }

    }

}

/* player + controls */
#shuffle {

    color: black;

}

/* page header */
.subtitle {

    font-size: 0.7rem;
    font-weight: bold;
    margin-bottom: 2rem;

    span {

        font-style: italic;

    }

}

.title {

    font-size: 1.4rem;
    font-weight: bold;

}