@media (max-width: 1200px) {
    .volume-control {
        display: none;
    }

    .nav {
        & a:not(.hidden-twitter) {
            display: none;
        }

        & a.hidden-twitter {
            display: flex;
            height: 100%;
            aspect-ratio: 1;
        }
    }

    #search-box {
        width: 100%;
    }
}

@media (max-width: 768px) {
    header {
        padding: 8px 12px;
        gap: 12px;

        & #search #search-box {
            font-size: 12px;
        }
    }

    .content .track .img-box {
        width: 96px;
    }

    .content .track .img-box i {
        font-size: 48px;
    }

    .music-thumbnail {
        min-width: 200px;
    }

    .tag-button {
        padding: 5px 10px;

        font-size: 12px;
    }

    p,
    h3 {
        font-size: 16px;
    }

    footer {
        justify-content: left;
    }

    #time-count {
        display: none;
    }

    .play-count {
        font-size: 16px;
    }
}

@media (max-width: 600px) {
    .music-thumbnail {
        display: none;
    }

    #title h1 {
        font-size: 32px;
    }

    .volume-control {
        display: none;
    }

    #search input[type="submit"] {
        display: none;
    }

    .content .track .play-count {
        display: none;
    }
}