*{
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;

transition:
background .35s ease,
color .35s ease;

}

.container{

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

}

header{

position:relative;
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;

}

/*==============================
APPLE THEME SWITCH
==============================*/

.themeSwitcher{

position:absolute;

top:0;
right:0;

}

#themeToggle{

display:none;

}

.themeLabel{

width:72px;
height:38px;

border-radius:999px;

background:#111111;

display:flex;

align-items:center;
justify-content:space-between;

padding:0 10px;

cursor:pointer;

position:relative;

transition:.30s ease;

}

.themeLabel .sun,
.themeLabel .moon{

font-size:14px;
z-index:2;

user-select:none;

}

.themeLabel .ball{

position:absolute;

left:4px;
top:4px;

width:30px;
height:30px;

background:white;

border-radius:50%;

box-shadow:
0 3px 10px rgba(0,0,0,.20);

transition:
transform .30s cubic-bezier(.4,0,.2,1);

}

#themeToggle:checked + .themeLabel{

background:#E8E8E8;

}

#themeToggle:checked + .themeLabel .ball{

transform:translateX(34px);

}

.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:white;

border:none;

padding:14px 34px;

border-radius:999px;

font-size:15px;

cursor:pointer;

transition:.25s;

}

.playButton:hover{

background:#333;

}

.downloadButton{

display:flex;

justify-content:center;
align-items:center;

padding:14px 34px;

background:#ECECEC;

color:#111;

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;

}

/*=========================================
DARK MODE
=========================================*/

body.dark{

background:#111111;
color:#F5F5F5;

}

body.dark .smallTitle,
body.dark .trackNumber,
body.dark .time,
body.dark header p{

color:#9E9E9E;

}

body.dark .playButton{

background:white;
color:#111111;

}

body.dark .playButton:hover{

background:#DDDDDD;

}

body.dark .downloadButton{

background:#2A2A2A;
color:white;

}

body.dark .downloadButton:hover{

background:#3A3A3A;

}

body.dark hr{

border-top:1px solid #303030;

}

body.dark .progress{

background:linear-gradient(to right,#FFFFFF 0%,#FFFFFF 0%,#555555 0%,#555555 100%);

}

body.dark .volume{

background:#555555;

}

body.dark .volume::-webkit-slider-thumb{

background:white;

}

body.dark .volume::-moz-range-thumb{

background:white;

}

/*=========================
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;

}

.themeSwitcher{

position:relative;

display:flex;
justify-content:flex-end;

margin-bottom:25px;

}

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;

}

.themeLabel{

transform:scale(.92);

}

.footer{

    width:100%;

    display:flex;

    justify-content:center;

    align-items:center;

    margin-top:60px;
    padding-bottom:30px;

    font-size:11px;

    color:#999;

    letter-spacing:2px;

    text-transform:uppercase;

    opacity:.85;

}

}

.licenseFooter{

    margin-top:60px;
    margin-bottom:20px;

    text-align:center;

    font-size:12px;

    letter-spacing:1.8px;

    color:#8a8a8a;

    user-select:none;

}

/*=========================================
INACTIVE PAGE
=========================================*/

.inactivePage{

    width:100%;
    min-height:100vh;

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

}

.inactiveContent{

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

}

.topBar{

    display:flex;
    justify-content:space-between;
    align-items:center;

    margin-bottom:80px;

}

.messageContent{

    text-align:left;

}

.messageContent h1{

    font-size:56px;
    font-weight:700;

    margin-bottom:28px;

    line-height:1.15;

}

.statusMessage{

    font-size:20px;
    line-height:1.8;

    color:#666;

    max-width:620px;

}

.thanksMessage{

    margin-top:42px;

    font-size:16px;

    color:#888;

}

body.dark .statusMessage{

    color:#A5A5A5;

}

body.dark .thanksMessage{

    color:#7A7A7A;

}