/* all mobile */
.desktop {
    display: flex;
}

.mobile {
    display: none;
}

@media only screen and (max-width: 768px) and (pointer: coarse) {

    .desktop {
        display: none;
    }

    .mobile {
        display: flex;
    }
}

@media only screen and (max-width: 768px) and (pointer: coarse) {

    .youtube-embed {
        width: 100% !important;
    }

    html,
    body {
        margin: 0;
        padding: 0;
        height: 100svh;
        font-family: 'Noto Sans', sans-serif;
        background-color: var(--main-background);
        box-sizing: border-box;
    }

    *,
    *::before,
    *::after {
        box-sizing: inherit;
    }

    .first_button {
        background-color: #000;
    }

    .main_wrapper {
        display: flex;
        flex-direction: column;
        height: 100%;
        overflow: hidden;
    }

    .main_container {
        background-color: transparent;
        padding: 0;
        height: 100%;
        width: 100%;
        text-align: center;
        border-radius: 0;
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
        backdrop-filter: blur(var(--main-blur));
    }

    .background_wrapper {
        padding: 15px !important;
        border-radius: 0;
    }

    .dev_change {
        flex-direction: column;
    }

    .main_title,
    .links_main_title {
        display: none;
    }

    .track-card {
        width: 100%;
        height: 90px;
        padding: 10px;
        display: flex;
        flex-direction: row;
        align-items: center;
        gap: 17px;
        z-index: 10;
    }

    .track-cover {
        height: 100%;
        aspect-ratio: 1/1;
        object-fit: cover;
        border-radius: 10px;
    }

    .track-info {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        height: 100%;
        flex: 1;
        gap: 5px;
    }

    .track-title,
    .track-artist {
        display: none;
    }

    .changelog {
        justify-content: center;
        height: 100%;
        overflow-y: auto;
    }
}

/* botton links */
.mobileLinks_Wrapper {
    flex-direction: column;
}

#mobileLinks {
    display: flex;
    flex-direction: column;
    border-radius: 10px;
    align-items: center;
    width: 100%;
    gap: 10px;
}

#mobileLinks .mobile-link {
    padding: 10px;
    color: var(--font-color);
    text-decoration: none;
    font-weight: 600;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    position: relative;
}

#mobileLinks .mobile-link svg {
    width: 20px;
    height: 20px;
    /* fill: currentColor; */
    position: absolute;
    left: 10px;
}

#mobileLinks .separator {
    height: 1px;
    background-color: var(--separator-color);
    width: 100%;
}

/* #mobileLinks svg {
    background-color: #fff;
    padding: 2px;
    border-radius: 3px;
} */

#mobileLinks .mobile-link:nth-child(1) svg path {
    fill: #d51007; /* Last.fm red */
}

#mobileLinks .mobile-link:nth-child(3) svg path {
    fill: #E60023; /* Pinterest red */
}

#mobileLinks .mobile-link:nth-child(5) svg path {
    fill: #fff; /* Twitter blue */
}

#mobileLinks .mobile-link:nth-child(7) svg path {
    fill: #5865f2; /* Discord blurple */
}

#mobileLinks .mobile-link:nth-child(9) svg path {
    fill: #ff7900; /* Boosty orange */
}

#mobileLinks .mobile-link:nth-child(11) svg path {
    fill: #fff; /* GitHub black */
}

#mobileLinks .mobile-link:nth-child(13) svg path {
    fill: #1db954; /* Spotify green */
}

/* mobile block title */
.mobile_block_title {
    position: sticky;
    font-size: 12px;
    font-weight: 600;
    width: 100%;
    margin-bottom: 10px;
    /* padding: 10px 0 0 13px; */
    color: var(--font-color);
}