*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{

font-family:'Inter',sans-serif;
background:#FAFAF8;
color:#111111;

display:flex;
justify-content:center;
align-items:flex-start;

padding:80px 20px;

}

.container{

width:900px;
max-width:100%;

}

header{

margin-bottom:70px;

}

.smallTitle{

font-size:13px;
letter-spacing:4px;
color:#888;
margin-bottom:18px;

}

h1{

font-size:56px;
font-weight:700;
margin-bottom:16px;

}

header p{

font-size:18px;
color:#666;
line-height:1.7;

}

.track{

padding:45px 0;

}

.trackInfo{

margin-bottom:28px;

}

.trackNumber{

font-size:12px;
letter-spacing:3px;
color:#888;
margin-bottom:12px;

}

.track h2{

font-size:32px;
font-weight:600;

}

.controls{

display:flex;
gap:16px;
margin-bottom:28px;

}

.playButton{

background:#111111;
color:#ffffff;

border:none;

padding:14px 34px;

border-radius:999px;

font-size:15px;

cursor:pointer;

transition:.25s;

}

.playButton:hover{

background:#333333;

}

.downloadButton{

display:flex;

align-items:center;

justify-content:center;

padding:14px 34px;

background:#ECECEC;

color:#111111;

text-decoration:none;

border-radius:999px;

font-size:15px;

transition:.25s;

}

.downloadButton:hover{

background:#DCDCDC;

}

.progress{

width:100%;

height:3px;

appearance:none;
-webkit-appearance:none;

background:linear-gradient(to right,#111111 0%,#111111 0%,#D8D8D8 0%,#D8D8D8 100%);

border-radius:999px;

margin-bottom:28px;

cursor:pointer;

outline:none;

}

.progress::-webkit-slider-runnable-track{

height:3px;

background:transparent;

}

.progress::-webkit-slider-thumb{

-webkit-appearance:none;

width:0;

height:0;

}

.progress::-moz-range-track{

height:3px;

background:transparent;

}

.progress::-moz-range-thumb{

width:0;

height:0;

border:none;

background:transparent;

}

.volume{

width:180px;

height:2px;

appearance:none;
-webkit-appearance:none;

background:#D8D8D8;

cursor:pointer;

}

.volume::-webkit-slider-thumb{

-webkit-appearance:none;

width:10px;
height:10px;

border-radius:50%;

background:#111111;

}

.volume::-moz-range-thumb{

width:10px;
height:10px;

border:none;

border-radius:50%;

background:#111111;

}

hr{

border:none;

border-top:1px solid #E8E8E8;

}

.time{

display:flex;

justify-content:space-between;

align-items:center;

margin-top:-12px;

margin-bottom:22px;

font-size:12px;

color:#8A8A8A;

font-weight:400;

letter-spacing:.3px;

font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Helvetica Neue",sans-serif;

}
/* =========================
   TABLETS
========================= */

@media (max-width: 992px){

.container{

width:100%;
max-width:760px;

}

h1{

font-size:44px;

}

.track h2{

font-size:28px;

}

}


/* =========================
   CELULARES
========================= */

@media (max-width: 768px){

body{

padding:40px 20px;

}

header{

margin-bottom:50px;

}

h1{

font-size:36px;
line-height:1.2;

}

header p{

font-size:16px;

}

.track{

padding:36px 0;

}

.track h2{

font-size:24px;

}

.controls{

flex-direction:column;

gap:12px;

}

.playButton,
.downloadButton{

width:100%;

padding:16px;

font-size:16px;

}

.volume{

width:100%;

}

}


/* =========================
   CELULARES PEQUEÑOS
========================= */

@media (max-width:480px){

body{

padding:28px 18px;

}

.smallTitle{

font-size:11px;

letter-spacing:3px;

}

h1{

font-size:30px;

}

.trackNumber{

font-size:11px;

}

.track h2{

font-size:21px;

}

}