/* ========================= */
/* styles.css */
/* ========================= */

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

body{
  font-family:Arial, Helvetica, sans-serif;
  background:#f5f5f5;
  color:#111;
  text-align:center;
  text-transform:uppercase;
}

/* NAVBAR */

.navbar{
  width:100%;
  display:flex;
  justify-content:space-between;
  align-items:center;

  padding:18px 60px;

  background:#ffffff;

  box-shadow:
  0 8px 24px rgba(0,0,0,.10);

  position:sticky;
  top:0;
  z-index:1000;
}

.logo img{
  width:110px;
}

nav{
  display:flex;
  gap:42px;
}

nav a{
  text-decoration:none;
  color:#111;

  font-weight:900;
  font-size:15px;

  letter-spacing:1px;

  padding-bottom:8px;
}

nav a.active{
  color:#d40000;
  border-bottom:3px solid #d40000;
}

/* HERO */

.hero{

  padding:4px 20px 40px;

}

.artist-logo{

  width:1550px;
  max-width:98%;

  margin-top:-8px;
  margin-bottom:-6px;

  filter:
  drop-shadow(0 10px 14px rgba(0,0,0,.22));

}

.hero h2{

  font-size:34px;
  letter-spacing:15px;

  margin-bottom:20px;

}

.small-text{

  font-size:18px;
  letter-spacing:10px;

  margin-bottom:12px;

  font-weight:900;

}

.hero h1{

  color:#d40000;

  font-size:88px;
  letter-spacing:12px;

  margin-bottom:22px;

  text-shadow:
  4px 5px 8px rgba(0,0,0,.18);

}

.cover-art{

  width:1550px;
  max-width:98%;

  border-radius:8px;

  box-shadow:
  0 18px 40px rgba(0,0,0,.22);

  margin-top:-4px;
  margin-bottom:26px;

}

.hero h3{

  color:#d40000;

  font-size:58px;
  letter-spacing:12px;

  margin-bottom:18px;

  text-shadow:
  3px 4px 6px rgba(0,0,0,.15);

}

/* DOWNLOAD */

.download-box{
  margin-top:18px;
}

.download-box h4{

  color:#d40000;

  font-size:64px;

  margin-bottom:12px;

}

.download-box p{

  letter-spacing:4px;

  margin-bottom:18px;

  font-weight:900;

}

form{

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

  margin:auto;

  display:flex;

}

form input{

  width:65%;
  height:72px;

  border:1px solid #ddd;
  border-right:none;

  padding-left:25px;

  font-size:16px;
  font-weight:900;

  letter-spacing:2px;

  border-radius:8px 0 0 8px;

}

form button{

  width:35%;
  height:72px;

  border:none;

  background:#d40000;
  color:#fff;

  font-size:18px;
  font-weight:900;

  letter-spacing:2px;

  border-radius:0 8px 8px 0;

  cursor:pointer;

  transition:.2s ease;

}

form button:hover{

  background:#af0000;

}

/* FOOTER */

footer{
  padding:40px 20px 70px;
}

.socials{

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

  gap:28px;
  flex-wrap:wrap;

  margin-top:40px;
  margin-bottom:30px;

}

.socials a{
  text-decoration:none;
}

.socials img{

  width:42px;
  height:42px;

  object-fit:contain;

  transition:.25s ease;

}

.socials img:hover{

  transform:
  translateY(-4px)
  scale(1.08);

}

footer p{

  font-size:13px;
  letter-spacing:3px;

  font-weight:900;

}

/* MOBILE */

@media(max-width:768px){

  .navbar{

    padding:14px 16px;

    flex-direction:column;
    gap:12px;

  }

  .logo img{
    width:82px;
  }

  nav{

    gap:16px;

    flex-wrap:wrap;
    justify-content:center;

  }

  nav a{

    font-size:13px;

    padding-bottom:5px;

  }

  .hero{

    padding:0px 12px 28px;

  }

  .artist-logo{

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

    margin-top:-14px;
    margin-bottom:-8px;

  }

  .hero h2{

    font-size:20px;
    letter-spacing:4px;

    margin-bottom:14px;

  }

  .small-text{

    font-size:13px;
    letter-spacing:4px;

    margin-bottom:10px;

  }

  .hero h1{

    font-size:42px;
    letter-spacing:4px;

    margin-bottom:18px;

  }

  .cover-art{

    width:100%;
    max-width:100%;

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

  }

  .hero h3{

    font-size:34px;
    letter-spacing:4px;

    margin-bottom:14px;

  }

  .download-box h4{
    font-size:40px;
  }

  form{

    flex-direction:column;
    gap:12px;

  }

  form input,
  form button{

    width:100%;

    border-radius:8px;

  }

  .socials{
    gap:20px;
  }

  .socials img{

    width:36px;
    height:36px;

  }

}