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

body{
  background:#f3f3f3;
  font-family:Arial, Helvetica, sans-serif;
  color:#111;
}

img{
  display:block;
}

/* HEADER */

.top-header{
  width:100%;
  height:82px;
  background:white;
  display:grid;
  grid-template-columns:1fr auto 1fr;
  align-items:center;
  padding:0 40px;
}

.header-center{
  grid-column:2;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:38px;
}

.logo{
  width:290px;
  height:auto;
}

/* SOCIALS */

.socials{
  display:flex;
  align-items:center;
  gap:13px;
}

.social{
  width:40px;
  height:40px;
  border-radius:50%;
  display:flex;
  align-items:center;
  justify-content:center;
  color:white;
  text-decoration:none;
  font-size:20px;
  font-weight:bold;
  line-height:1;
}

.social i{
  font-size:20px;
}

.youtube{
  background:#e62117;
  font-size:18px;
}

.spotify{
  background:#1db954;
}

.tiktok{
  background:#68717c;
}

.facebook{
  background:#38559a;
}

.instagram{
  background:#1f1f1f;
}

/* SHOP */

.shop-link{
  grid-column:3;
  justify-self:end;
  text-decoration:none;
  color:#000;
  font-size:34px;
  font-weight:900;
  font-family:Arial, Helvetica, sans-serif;
  letter-spacing:-1px;
  display:flex;
  align-items:center;
  gap:10px;
  transition:0.2s;
}

.shop-link:hover{
  opacity:0.65;
}

/* HERO */

.hero-row{
  width:100%;
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
}

.hero-image{
  height:260px;
  overflow:hidden;
}

.hero-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:top center;
}

/* BIOGRAPHY */

.bio-section{
  max-width:1450px;
  margin:0 auto;
  padding:35px 90px 45px;

  display:grid;
  grid-template-columns:1fr 380px;
  gap:90px;

  align-items:start;
}

.bio-text{
  width:100%;
}

.bio-text h2{
  font-family:"Courier New", monospace;
  font-size:31px;
  font-weight:400;
  letter-spacing:1px;
  color:#1d2435;
  margin-bottom:18px;
}

.small-line{
  width:30px;
  height:1px;
  background:#1d2435;
  margin-bottom:24px;
}

.bio-text p{
  font-size:15px;
  line-height:1.75;
  font-weight:400;
  color:#000;
}

.bio-image{
  width:100%;
  aspect-ratio:1 / 1;
  overflow:hidden;
}

.bio-image img{
  width:100%;
  height:100%;
  object-fit:cover;
  object-position:center;
}

.bio-image a{
  display:block;
  width:100%;
  height:100%;
}

.bio-image img{
  transition:0.25s;
}

/* HIGHLIGHTS */

.highlights-section{
  width:100%;
  padding:40px 80px 70px;
}

.highlights-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:35px;
  margin-bottom:45px;
}

.highlights-title .line{
  flex:1;
  height:1px;
  background:#111;
}

.highlights-title h2{
  font-family:"Courier New", monospace;
  font-size:31px;
  font-weight:400;
  color:#1d2435;
  letter-spacing:1px;
}

.highlights-grid{
  display:grid;
  grid-template-columns:1fr 1fr 1fr;
  gap:40px;
  text-align:center;
}

.highlight-number{
  font-size:86px;
  font-weight:700;
  color:#7dc6ea;
  line-height:1;
  margin-bottom:18px;
}

.highlight-label{
  font-size:24px;
  color:#000;
}

/* MEDIA SECTION */

.media-section{
  width:100%;
  padding:35px 70px 60px;
}

.media-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:32px;
  margin-bottom:32px;
}

.media-line{
  flex:1;
  height:1px;
  background:#1d2435;
}

.media-title h2{
  font-family:"Courier New", monospace;
  font-size:31px;
  font-weight:400;
  letter-spacing:1px;
  color:#1d2435;
}

/* VIDEOS */

.videos-grid{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:24px;
  margin-bottom:28px;
}

.video-box iframe{
  width:100%;
  aspect-ratio:16 / 9;
  display:block;
}

/* SPOTIFY */

.spotify-player{
  width:100%;
}

.spotify-player iframe{
  width:100%;
  display:block;
}

/* FOOTER */

.footer-section{
  width:100%;
  padding:35px 70px 70px;
}

.footer-title{
  display:flex;
  align-items:center;
  justify-content:center;
  gap:32px;
  margin-bottom:28px;
}

.footer-line{
  flex:1;
  height:1px;
  background:#1d2435;
}

.footer-title h2{
  font-family:"Courier New", monospace;
  font-size:31px;
  font-weight:400;
  letter-spacing:1px;
  color:#1d2435;
}

.footer-links{
  text-align:center;
}

.footer-links ul{
  list-style-position:inside;
}

.footer-links li{
  margin-bottom:14px;
  font-size:16px;
}

.footer-links a{
  color:#0000cc;
  text-decoration:none;
}

.footer-links a:hover{
  text-decoration:underline;
}

/* MOBILE */

@media(max-width:900px){

  .top-header{
    height:auto;
    padding:18px 10px;
    grid-template-columns:1fr;
    gap:18px;
  }

  .header-center{
    grid-column:auto;
    flex-direction:column;
    gap:18px;
  }

  .shop-link{
    grid-column:auto;
    justify-self:center;
    font-size:28px;
  }

  .logo{
    width:260px;
  }

  .social{
    width:40px;
    height:40px;
    font-size:20px;
  }

  .hero-row{
    grid-template-columns:1fr;
  }

  .hero-image{
    height:300px;
  }

  .bio-section{
    padding:35px 20px 55px;
    grid-template-columns:1fr;
    gap:35px;
  }

  .bio-text h2{
    font-size:34px;
  }

  .bio-text p{
    font-size:17px;
  }

  .bio-image{
    width:100%;
    aspect-ratio:1 / 1;
  }

  .bio-image img{
    width:100%;
    height:100%;
    object-fit:cover;
    object-position:center;
  }

  .highlights-section{
    padding:35px 20px 55px;
  }

  .highlights-title{
    gap:18px;
  }

  .highlights-title h2{
    font-size:22px;
    text-align:center;
  }

  .highlights-grid{
    grid-template-columns:1fr;
    gap:50px;
  }

  .highlight-number{
    font-size:65px;
  }

  .highlight-label{
    font-size:22px;
  }

  .media-section{
    padding:35px 20px 60px;
  }

  .media-title{
    gap:18px;
  }

  .media-title h2{
    font-size:22px;
    text-align:center;
  }

  .videos-grid{
    grid-template-columns:1fr;
  }

  .footer-section{
    padding:35px 20px 60px;
  }

  .footer-title{
    gap:18px;
  }

  .footer-title h2{
    font-size:22px;
    text-align:center;
  }

}