::-webkit-scrollbar {
    width: 5px;
}
::-webkit-scrollbar-track {
    background-color: transparent;
}
::-webkit-scrollbar-thumb {
    border-radius: 25px;
    background-color: black;
}

/* ~ = ~ Styles For All ~ = ~ */

* {
    color: white;
    box-sizing: border-box;
    transition: all 0.1s ease-in-out;
}

/* ~ = ~ Styles For Body ~ = ~ */

body {
    max-width: 100vw;
    overflow-x: hidden;
    background-color: var(--primary-dark);
}

/* ~ = ~ Styles For Header Section ~ = ~ */

header {
    background-color: rgba(var(--primary-main-red), var(--primary-main-green), var(--primary-main-blue), 0.8);
    background-image: linear-gradient(to top, rgba(18, 18, 18, 0.25), rgba(255, 255, 255, 0.25));
}
header h2 {
    font-family: Kanit;
    font-weight: 800;
}
#homeBtn {
    height: 3.25rem;
    cursor: pointer;
}
#homeBtn img, #searchBtn img {
    height: 100%;
}
#mainArea {
    width: 100%;
    font-family: Ubuntu;
}
#userInputText:focus {
    box-shadow: none;
    border: 1.5px solid rgba(245, 245, 245, 0.5);
}
#searchBtn {
    height: 3.125rem;
    background-color: var(--primary-dark);
}

/* ~ = ~ Styles For Searched Resuts ~ = ~ */

.musicTrackHeader, .musicTrackHeader:hover {
    border-radius: 0;
    cursor: default !important;
    background-color: rgba(var(--primary-main-red), var(--primary-main-green), var(--primary-main-blue), 0.8);
}
.musicTrack {
    border-radius: 22px;
    /* padding-inline: 6%  !important; */
    background-color: rgba(var(--primary-main-red), var(--primary-main-green), var(--primary-main-blue), 0.8);
}
.musicTrack, .musicMainInfo, .musicOtherInfo {
    cursor: pointer;
    height: fit-content;
}
.musicMainInfo, .musicOtherInfo {
    width: 50%;
    border: none;
    outline: none;
    background-color: transparent;
}
.musicTrackImage {
    height: 65%;
    height: 3.5em;
    border-radius: 8px;
}


body, header, main, #mainArea, #searchedList, #musicPlayerArea {
    width: 100%;
}

/* ~ = ~ Styles For End Music Player ~ = ~ */

#musicPlayerArea {
    backdrop-filter: blur(18px);
    background-color: rgba(var(--primary-main-red), var(--primary-main-green), var(--primary-main-blue), 0.8);
    background-image: linear-gradient(to top, rgba(18, 18, 18, 0.25), rgba(255, 255, 255, 0.25));
}

#musicPlayerArea {
    min-height: 5.75em;
    border-top: solid 1.75px var(--primary-dark);
}

/* ~ = ~ Styles For End Music Player : Current Music Details ~ = ~ */

.currentMusic {
    max-width: 24vw;
    width: auto;
    overflow: scroll;
    white-space: nowrap;
}
#musicCover {
    height: 3.75em;
    border-radius: 2.5px !important;
    box-shadow: 0 0 12px rgba(225, 225, 225, 0.25);
}
#musicTitle { 
    font-weight: 600; 
}
#musicPlayerArea ::-webkit-scrollbar {
    height: 1px;
} 
#musicPlayerArea ::-webkit-scrollbar-thumb {
    background-color: var(--primary-main);
    border-radius: 25px;
} 
#musicPlayerArea ::-webkit-scrollbar-corner {
    background-color: transparent;
}

/* ~ = ~ Styles For End Music Player : Main Music Controls [play/pause, etc.] ~ = ~ */

.mainControls {
    left: 50%;
    position: absolute;
    transform: translate( -50% );
}
.musicControls {
    width: fit-content;
}
.musicControl {
    width: 2.5rem;
    height: 2.5rem;
}
.musicControl img {
    width: 100%;
    object-fit: contain;
}
.musicProgress {
    color: white;
}
input[type="range"] {
    height: 0.4em;
    border-radius: 25px;
    -webkit-appearance: none;
    appearance: none;
    background-color: transparent;
    border: 1.25px solid white;
} 
input[type='range']::-webkit-slider-thumb {
    width: 0.75em;
    -webkit-appearance: none;
    height: 0.4em;
    background: var(--scroll-thumb-color);
    border-radius: 25px;
}
input[type="range"]:hover {
    --scroll-thumb-color: var(--primary-main);
    border: 1px solid rgba(255, 255, 255, 0.4);
}
input[type='range']::-webkit-slider-thumb:hover {
    height: 1em;
    width: 1em;
    border-radius: 25px;
    cursor: pointer;
}

/* ~ = ~ Styles For End Music Player : Other Music Controls [audio] ~ = ~ */

.otherControls {
    width: fit-content;
    transform: scaleX(75%);
} 
.otherControl {
    width: 1.5rem;
    height: 1.75rem;
    margin-inline: 0.125rem;
    transform: scaleX(150%);
} 
.otherControl img {
    width: 100%;
    object-fit: contain;
} 
.otherControls input[type='range']::-webkit-slider-thumb:hover {
    height: 0.8em;
    width: 1em;
} 

/* ~ = ~ Styles For Toast ~ = ~ */

.toast-header, .toast-container, .toast {
    width: fit-content;
    font-family: Ubuntu;
    background-color: transparent;
}
.toast {
    background-color: rgb(225, 225, 225, 0.5);
}

/* ~ = ~ Styles For Home ~ = ~ */

#home h2 {
    font-family: Protest Guerrilla;
    font-weight: 500;
    font-size: 2em;
}

/* ~ = ~ Styles For Home : Playlist ~ = ~ */

.playlistImg {
    width: 100%;
    cursor: pointer;
    border-radius: 50%;
    box-shadow: 0 0 8px rgba(49, 49, 49, 0.75);
}

/* ~ = ~ Styles For Home : Music ~ = ~ */

.homeMusicCard {
    /* height: 8em; */
    cursor: pointer;
    transform: scaleX(0.95) translate(0, -1.5em);
    background-color: rgba(var(--primary-main-red), var(--primary-main-green), var(--primary-main-blue), 0.8);
    border-radius: 8px;
} 
.homeMusicCard:hover, .musicTrack:hover {
    background-color: rgba(var(--primary-main-red), var(--primary-main-green), var(--primary-main-blue), 0.95);
}
.homeMusicImg {
    /* height: 80%; */
    border-radius: 8px;
    box-shadow: 0 0 8px rgba(49, 49, 49, 0.75);
}
.title {
    font-size: 118%;
}
.artist, .album, .duration {
    font-size: 88%;
}
@media screen and (max-width: 768px) {
    .title { font-size: 100%; }
    .artist, .duration { font-size: 82%; }
}