body {
    background-color: #0f0f0f;
}

@font-face {
    font-family: 'TAWOGTheSpoon-Regular.otf'; 
    src: url(TAWOGTheSpoon-Regular.otf); 
}

@font-face {
    font-family: 'SFProText-Regular'; 
    src: url(SFProText-Regular.ttf); 
}

.title {
    position: absolute;
    font-family: 'TAWOGTheSpoon-Regular.otf';
    font-size:12px;
    color: #fff;
    left: 50%;
    transform: translateX(-50%);
    margin-top: -8px;
    margin-left: -1px;
    background-color: #1f1f1f;
    padding-top: 20px;
    padding-bottom: 12px;
    width:100%;
    z-index: 10;
    letter-spacing: 8px;
}

.logo {
    margin-left: 25px;
    margin-top: -4px;
    width: 25px;
    height: 25px;
    position: absolute;
    background: linear-gradient(to right, #7b03fc, #a857ff);
    border-radius:10px;
}

.search_form {
    position: absolute;
    font-size:12px;
    color: #fff;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 49px;
    display: flex;
    background-color: #1f1f1f;
    width: 100%;
    margin-left: -1px;
    height: 40px;
    border: 1px solid #555;
}

.search_input {
    flex: 3; /* занимает 4 части */
    height: 0px;
    font-family: 'SFProText-Regular'; 
    font-size: 14px;
    padding: 20px;
    background-color: #0f0f0f;
    color: white;
    border: 0;
    outline: 0;
    margin-top: 0px;
    margin-left: 0px;
}

.search_input:focus {
    box-shadow: inset 0px 0px 0px 2px #7b03fc;
}

.search_button {
    flex: 1; /* занимает 4 части */
    font-family: 'SFProText-Regular'; 
    font-size: 14px;
    height: 40px;
    margin-top:0px;
    color: white;
    border: 0;
    background: #7b03fc;
    transition: all 0.3s;
    cursor: pointer;
}

.search_button:hover {
    background: #9b44fc;
}

.popular_block {
    position: absolute;
    
    left: 50%;
    transform: translateX(-50%);
    margin-top: 90px;
    background-color: #1f1f1f;
    width: 100%;
}

.tracks-list {
            font-family: 'SFProText-Regular';
        }
        .track-item {
            padding: 10px;
            border-bottom: 1px solid #555;
            cursor: pointer;
            font-family: 'SFProText-Regular';
        }
        .track-desc {
    font-size: 0.9em;
    color: #888;
    margin-top: 5px;
    font-style: italic;
    font-family: 'SFProText-Regular';
            margin-left: 10px;
}

.track-title {
    font-weight: bold;
    font-family: 'SFProText-Regular';
    color: #fff;
            margin-left: 10px;
}

        .track-item:hover {
            background-color: #2e2e2e;
        }
        
.player-container {
            position: absolute;
            margin-top: 100px;
            font-family: 'SFProText-Regular';
            background-color: #1f1f1f;color: white;
            
    width: 100%;
            left: 50%;
    transform: translateX(-50%);
    height: 100%;
        }
        audio {
            width: 100%;
        }
        .current-track {
            margin-top: 10px;
            font-weight: bold;
            font-family: 'SFProText-Regular';
            color: #007bff;
        }
        
        .player-controls {
    margin-top: 15px;
    padding: 15px;
    background: #f8f9fa;
    border-radius: 8px;
    font-family: 'SFProText-Regular';
}

.control-group {
    gap: 10px;
    margin-bottom: 10px;
    font-family: 'SFProText-Regular';
}


#applyTimeRange {
    background: linear-gradient(to right, #7b03fc, #a857ff);
    color: white;
    border: none;
    border-radius: 10px;
    cursor: pointer;
    font-family: 'SFProText-Regular'; 
    font-size: 14px;
margin-left: 20px;
    padding: 8px 12px;}

#applyTimeRange:hover {
    background: #218837;
}

#audio {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    width: 73%;
    margin-top: 60px;
}

.loopCheckbox {
    position: absolute;
    margin-top: 40px;
    margin-left: 30px;
}

.speedSelect {
    position: absolute;
    margin-top: 20px;
    margin-left: 5px;
}

.TimeRange {
    position: absolute;
    margin-top: 90px;
    float: right;
}

.audio-player {
  background: #222;
  padding: 10px;
  width: 95%;
  height: 40px;
  margin-top: 400px;
}

.audio_image {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 89px;
    width: 100%;
    height: 411px;
    z-index: 9;
}

#play-pause {
    position: absolute;
  font-size: 32px;
  font-family: 'SFProText-Regular'; 
  font-weight: bold;
  background: none;
  border: none;
  color: #fff;
  cursor: pointer;
  outline: none;
  left: 50%;
    transform: translateX(-50%);
    width: 50px;
    height: 50px;
    margin-top: 80px;
    border-radius: 50%;
    background: linear-gradient(to right, #7b03fc, #a857ff);
}

#progress {
  cursor: pointer;
  position: absolute;
  width: 90%;
    left: 50%;
    transform: translateX(-50%);
    margin-top: 10px;
}


#volume {
  width: 100px;
}

#audio {
    
}