body{
  margin:0;
  font-family: Arial, sans-serif;
  background:#fff;
  color:#111;
}

/* NAV */
.nav{
  display:flex;
  justify-content:space-between;
  padding:25px 60px;
  align-items:center;
}

.logo{
  letter-spacing:4px;
  font-size:14px;
}

.logo span{
  color:#2f6fff;
}

nav a{
  margin-left:25px;
  text-decoration:none;
  color:#111;
  font-size:12px;
  letter-spacing:2px;
}

nav a:hover{
  color:#2f6fff;
}

/* HERO */
.hero{
  display:flex;
  justify-content:space-between;
  padding:80px 60px;
  align-items:center;
}

.left h1{
  font-size:64px;
  letter-spacing:6px;
  margin:0;
}

.left span{
  color:#2f6fff;
}

/* PLAYER */
.player{
  display:flex;
  align-items:center;
  margin-top:40px;
  gap:15px;
}

.play{
  width:50px;
  height:50px;
  border-radius:50%;
  border:1px solid #ddd;
  background:#fff;
  cursor:pointer;
}

.live{
  display:flex;
  align-items:center;
  gap:6px;
  font-size:12px;
  letter-spacing:2px;
}

.dot{
  width:6px;
  height:6px;
  background:#2f6fff;
  border-radius:50%;
}

.line{
  width:120px;
  height:1px;
  background:#ddd;
}

.volume{
  font-size:14px;
}

/* IMAGE */
.right img{
  width:420px;
  height:auto;
}

/* BOTTOM */
.bottom{
  display:flex;
  justify-content:space-between;
  padding:60px;
  border-top:1px solid #eee;
}

.bottom h3{
  font-size:12px;
  letter-spacing:3px;
  margin-bottom:15px;
}

.bottom p{
  margin:5px 0;
  font-size:13px;
  color:#444;
}