@import url("https://fonts.googleapis.com/css2?family=Advent+Pro:ital,wght@0,100..900;1,100..900&family=Overpass:ital,wght@0,100..900;1,100..900&family=Source+Code+Pro:ital,wght@0,200..900;1,200..900&display=swap");
* {
  box-sizing: border-box;
  /*  border: 1px solid red; */ }

/* general styles */
.test {
  border: 1px solid red; }

h1, h2, h3 {
  text-transform: uppercase;
  font-weight: 600; }

h1 {
  font-size: 2.5rem; }

h1.page_title {
  padding: 60px 0 0 25px;
  color: #FAA23C; }

body {
  margin: 0 auto;
  font-family: "Overpass", sans-serif;
  background-color: #1C0606;
  color: #f5f5f5;
  width: 100%;
  font-size: 1rem; }

.border_img {
  width: 100%;
  margin: 1.5rem 0;
  opacity: 80%; }

.border {
  width: 100%;
  text-align: left;
  margin-left: 0; }

#background_gradient {
  /*background-image: url(../images/backgroundgradient.svg);*/
  background-image: url("../images/nnnoise.svg"), linear-gradient(to bottom, rgba(56, 25, 16, 0.45), rgba(85, 44, 26, 0.45), rgba(0, 38, 255, 0.45), rgba(255, 156, 86, 0.22), rgba(0, 38, 255, 0.45), rgba(28, 6, 6, 0.45));
  width: 100%; }

.orange {
  color: #F1501B; }

aside {
  font-family: "Advent Pro", sans-serif;
  color: #FAA23C;
  font-size: 1.5rem;
  font-weight: 500; }

img.round {
  border-radius: 50%;
  width: 80%; }

.blue_border {
  border: 1.5px solid #5185FF; }

.orange_border {
  border: 1.5px solid #F1501B; }

.yellow_border {
  border: 1.5px solid #FAA23C; }

figure {
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center; }

figcaption {
  font-family: "Source Code Pro", sans-serif;
  font-size: 1rem;
  text-align: center;
  margin: 1.3rem 0; }

.main_container {
  margin: 0 auto;
  text-align: center;
  display: flex;
  justify-content: center;
  align-items: center; }

.home_container {
  display: flex;
  flex-direction: column;
  align-items: center; }

.home_container a {
  width: 40%; }

.section_heading {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 3rem; }

.mobile_hide {
  display: none; }

#disco, #videos, #images, #bio, #store, #news, #about {
  width: 90%;
  margin: 0 auto; }

.more-text {
  display: none; }

.round_corner_img {
  border-radius: 14px; }

.news_img1 img {
  width: 77%; }

.news_img1 figcaption {
  width: 78%; }

.aside_author {
  font-size: 1rem;
  font-style: italic;
  text-align: right; }

/* Buttons Styles */
button.btn_yellow {
  color: #FAA23C;
  border: solid 1px #FAA23C;
  height: 2rem;
  border-radius: 20px;
  background-color: rgba(230, 137, 31, 0.11);
  text-transform: uppercase;
  font-family: 'Overpass', sans-serif;
  padding: .5rem;
  text-align: center;
  letter-spacing: .1rem; }

.btn_yellow {
  color: #FAA23C;
  border: solid 1px #FAA23C;
  height: 2rem;
  border-radius: 20px;
  background-color: rgba(230, 137, 31, 0.11);
  text-transform: uppercase;
  font-family: 'Overpass', sans-serif;
  padding: .5rem;
  text-align: center;
  letter-spacing: .1rem; }

a.btn_yellow {
  color: #FAA23C;
  border: solid 1px #FAA23C;
  height: 2rem;
  border-radius: 20px;
  background-color: rgba(230, 137, 31, 0.11);
  text-transform: uppercase;
  font-family: 'Overpass', sans-serif;
  padding: .5rem;
  text-align: center;
  letter-spacing: .1rem; }

.btn_yellow:hover {
  background-color: rgba(250, 162, 60, 0.3); }

a.view_more_orange {
  color: #F1501B;
  text-transform: uppercase;
  padding-bottom: 1px;
  border-bottom: solid 1px;
  height: 1.5rem; }

a.view_more_yellow {
  color: #FAA23C;
  text-transform: uppercase;
  padding-bottom: 1px;
  border-bottom: solid 1px;
  height: 2rem; }

.btn_orange {
  color: #F1501B;
  border: solid 1px #F1501B;
  height: 2rem;
  border-radius: 20px;
  background-color: rgba(250, 162, 60, 0.11);
  text-transform: uppercase;
  font-family: 'Overpass', sans-serif;
  padding: .5rem;
  text-align: center;
  letter-spacing: .1rem; }

.btn_orange:hover {
  background-color: rgba(250, 162, 60, 0.11); }

#myBtn {
  display: none;
  position: fixed;
  bottom: 1.2rem;
  right: 2rem;
  z-index: 999;
  border: none;
  outline: none;
  cursor: pointer;
  padding: 1rem;
  background-color: transparent; }

#bio_btn, #news_btn {
  margin-left: 50%; }

/* nav styles */
a {
  text-decoration: none; }

header {
  position: fixed;
  width: 100%;
  z-index: 999;
  top: 0; }

.primary-nav {
  display: flex;
  align-content: center;
  width: 100%; }

nav {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  background-color: rgba(34, 0, 0, 0.8);
  height: 40px; }

.menu {
  display: flex;
  list-style: none;
  align-content: center;
  justify-content: center; }

.nav-link {
  color: #f5f5f5;
  text-transform: uppercase;
  padding: 1rem 2rem;
  font-size: 1rem;
  width: 100%;
  white-space: nowrap; }

nav > .nav-btn {
  display: none; }

nav > #nav-check {
  display: none; }

.logo {
  height: 1.8rem;
  padding: 5%;
  text-transform: uppercase;
  font-size: 1.3rem;
  color: #f5f5f5;
  font-weight: 600;
  white-space: nowrap;
  padding-top: 10%; }

.primary-nav input[type=text] {
  border: none;
  padding: .4rem;
  background-image: url("../images/search.png");
  background-repeat: no-repeat;
  background-color: rgba(237, 231, 227, 0.17);
  background-position: 10px 7px;
  border-radius: 40px;
  padding-left: 45px;
  font-size: 1rem;
  color: #f5f5f5;
  width: 8.5rem; }

/* hero styles */
#hero {
  background-image: url(../images/hero.png);
  background-size: cover;
  width: 100%;
  padding-top: 5%;
  height: 650px; }

#hero aside {
  margin: 1.5rem auto 2rem; }

.hero_text {
  width: 52%;
  margin: 0 auto;
  padding-top: 5rem;
  background-image: url(../images/bluesphere.svg);
  background-size: contain;
  background-repeat: no-repeat; }

.welcome {
  width: 100%; }

.welcome p:last-of-type {
  margin-bottom: 2rem; }

form {
  display: flex;
  flex-direction: column;
  font-family: "Overpass", sans-serif;
  align-content: center; }

#email {
  width: 90%;
  padding: .4rem;
  margin-bottom: 1.5rem; }

.subscribe {
  width: 60%; }

.subscribe:hover {
  background-color: rgba(241, 80, 27, 0.3); }

.border1 {
  position: absolute;
  top: 515px; }

/* Homepage - Discography Styles */
#disco {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-content: center;
  text-align: center; }

#disco h2 {
  margin-bottom: 2rem; }

/* Main Discography Styles */
#discography_title {
  margin-top: 0; }

#discography_title ul {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
  text-decoration: none;
  list-style: none;
  width: 90%;
  gap: 1.4rem; }

#discography_title li {
  width: 60%; }

.list_container {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 50px; }

.disco_link {
  text-transform: uppercase;
  border-bottom: 1px solid #f5f5f5;
  color: #f5f5f5; }

.disco_link:hover {
  color: #FAA23C; }

.disco_img {
  width: 60%; }

/* Table Styles */
table {
  border: 0.5px solid #f5f5f5;
  margin: 0 auto;
  width: 90%;
  table-layout: auto;
  line-height: 2rem; }

.table_heading_orange {
  color: #F1501B;
  text-align: left;
  text-transform: uppercase;
  font-size: 1.5rem; }

th {
  border-bottom: 0.5px solid #f5f5f5;
  border-right: 0.5px solid #f5f5f5;
  width: 4%; }

th:last-of-type {
  border-right: none; }

td {
  border-bottom: 0.3px solid #f5f5f5;
  border-right: 0.3px solid #f5f5f5;
  text-align: center; }

td:last-of-type {
  border-right: none; }

.table_heading {
  display: flex;
  align-items: center;
  padding-left: 1rem; }

.read-more-toggle {
  color: #f5f5f5;
  text-transform: uppercase;
  background: none;
  cursor: pointer;
  margin: .5rem 1rem;
  display: flex;
  width: 60%;
  align-items: center;
  gap: .8rem;
  font-size: inherit;
  border: none; }

.arrow {
  margin-left: 5px;
  transition: transform 0.3s ease; }

.view_more_disco.expanded .arrow {
  transform: rotate(180deg);
  /* Rotate arrow when expanded */ }

.more-content {
  display: none; }

.play {
  margin: 10px 0 0 15px; }

.table-container {
  overflow: auto;
  width: 100%; }

/* Homepage - Videos */
.video_container {
  margin-top: 3rem; }

/* Homepage - Images Styles */
#images {
  margin-top: 0; }

#images h2 {
  margin-bottom: 2.8rem; }

/* Homepage - Biography Styles */
.bio_text {
  width: 95%;
  text-align: left;
  line-height: 1.8rem;
  margin: 2rem auto; }

.bio_text, .homepage_news, .bio_article, .article_text, .about_text {
  margin-bottom: 40px;
  background-color: rgba(34, 56, 183, 0.18);
  padding: 5%;
  border-radius: 14px; }

.homepage_bio {
  display: flex;
  flex-direction: column; }

.bio_home_img {
  width: 50%; }

/* Main Page - Biography */
.bio_heading {
  font-size: 2.5rem;
  margin-left: 5%; }

.bio_img {
  width: 88%;
  margin-top: 10%; }

.bio_article {
  width: 95%;
  margin: 0 auto; }

.bio_aside {
  font-size: 2rem;
  width: 70%;
  margin: 0 auto 2rem; }

.author {
  font-size: .8rem; }

.bio_mainimg {
  margin-bottom: 10%; }

/* Homepage - Store Styles */
/* Homepage - News Styles */
figure.news_pic {
  width: 40%; }

img.news_pic {
  width: 90%;
  border-radius: 14px; }

.news_text {
  text-align: left;
  line-height: 1.8rem;
  width: 90%;
  align-self: center; }

.homepage_news h3 {
  font-size: 1rem;
  text-align: left;
  color: #FAA23C; }

time.news_entry_date {
  background: none;
  padding: 2px 8px;
  font-size: .9rem;
  opacity: 88%;
  text-align: left;
  margin-bottom: 1rem; }

.homepage_news {
  display: flex;
  flex-direction: column;
  width: 90%; }

/* News - Main page styles */
.news_heading {
  width: 88%;
  margin: 0 auto; }

.top_banner {
  display: flex;
  flex-direction: column;
  width: 88%;
  margin: 0 auto;
  align-items: center;
  text-align: center; }

.news_mailing_list {
  margin-top: 5%; }

.news_heading h2 {
  color: #F1501B; }

.news_heading {
  margin-bottom: 10%; }

.article_text {
  width: 88%;
  margin: 10% auto;
  padding: 5%; }

.news_main_btn {
  margin-top: 20%; }

.news_aside {
  width: 88%;
  margin: 0 auto; }

p.about_author {
  font-size: .9rem;
  font-style: italic;
  width: 95%;
  text-align: center;
  margin-top: 10%; }

.older_news {
  width: 80%;
  margin: 0 auto; }

/* About Us Styles */
.about_main {
  width: 85%;
  margin: 0 auto;
  line-height: 1.8rem; }

#about_title h1 {
  width: 60%; }

#about_title {
  padding-top: 175px; }

/*Footer Styles*/
footer {
  height: 520px;
  display: flex;
  flex-direction: column;
  justify-content: flex-start;
  align-items: center;
  margin: 0 auto;
  width: 100%;
  text-align: center; }

#footer_social_icons {
  display: flex;
  gap: 5%;
  width: 80%;
  justify-content: center;
  margin: 0 auto; }

#contact {
  display: flex;
  flex-direction: column;
  margin-top: 100px; }

a.contact {
  color: #f5f5f5;
  border-bottom: 1px solid #FAA23C;
  padding-bottom: 4px; }

.contact_link {
  margin-bottom: 150px; }

.trademark {
  font-size: .88rem;
  line-height: .8rem; }

.privacy {
  color: #f5f5f5; }

/* Media Queries */
@media screen and (max-width: 800px) {
  .nav-header {
    padding-left: 0; }

  nav > .nav-btn {
    display: inline-block;
    position: absolute;
    right: 0px;
    top: 0px; }

  nav > .nav-btn > label {
    display: inline-block;
    width: 3.125rem;
    height: 3rem;
    padding: 1rem;
    margin-right: 1.5rem; }

  nav > .menu {
    position: absolute;
    display: block;
    width: 100%;
    background-color: rgba(34, 0, 0, 0.9);
    height: 0px;
    transition: all 0.3s ease-in;
    overflow-y: hidden;
    top: 25px;
    left: 0px;
    padding-left: 1rem; }

  .nav-link {
    display: block;
    width: 100%;
    padding: 1rem; }

  nav > #nav-check:not(:checked) ~ .menu {
    height: 0px; }

  nav > #nav-check:checked ~ .menu {
    height: 450px;
    overflow-y: auto; }

  .primary-nav input[type=text] {
    margin-left: 0px;
    margin-top: 3rem; }

  #hero {
    background-position: center; }

  .mobile_hide {
    display: none; }

  .round {
    width: 100%; }

  #music, #videos, #images, #bio, #store #blog {
    margin-left: 10%; } }
@media screen and (min-width: 801px) {
  /* general styles */
  .mobile_hide {
    display: flex; }

  .section_heading {
    justify-content: flex-start; }

  /*nav styles */
  nav {
    display: flex;
    justify-content: space-around;
    align-content: center; }

  .menu {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-end;
    align-items: center;
    padding-right: 3%; }

  /* Hero styles */
  #hero {
    height: 800px;
    background-position: center; }

  h1 {
    font-size: 4rem;
    width: 20%;
    margin-right: 20%; }

  .hero_text {
    display: flex;
    flex-direction: row-reverse;
    flex-wrap: wrap;
    margin: 1rem auto;
    background-position: bottom left;
    width: 90%;
    justify-content: space-around;
    padding-top: 2rem; }

  #hero aside {
    margin: 17rem 0 0;
    font-size: 2rem;
    width: 30%; }

  .border1 {
    position: absolute;
    top: -40rem; }

  .welcome {
    width: 60%;
    margin-left: 53%; }

  .subscribe {
    width: 40%; }

  .welcome p {
    margin-bottom: 1.3rem; }

  #email {
    width: 50%;
    margin-bottom: 1rem; }

  .logo {
    padding-left: 15%; }

  #bio_btn, #news_btn {
    margin-left: 75%; }

  /* Discography Styles */
  #discography_title {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-wrap: wrap; }

  #discography_title h1 {
    width: 90%; }

  .list_container {
    width: 60%; }

  #discography_title li {
    width: 90%; }

  .disco_header {
    display: flex; }

  .disco_img {
    width: 35%; }

  /*Table Styles*/
  /*Biography Styles */
  /* Homepage Bio Styles */
  .homepage_bio {
    flex-direction: row; }

  .bio_text {
    padding: 3%;
    margin-bottom: 0;
    height: 250px; }

  #bio_btn {
    margin-top: 30px; }

  /* Main Bio Page Styles */
  .bio_row, .news_row, .about_row {
    display: flex;
    width: 95%; }

  .bio_row {
    gap: 10%;
    margin: 5% auto; }

  .bio_row1 {
    margin-bottom: 10%; }

  .bio_row2 {
    flex-direction: row-reverse; }

  .bio_aside {
    font-size: 2.5rem;
    width: 45%; }

  /* News - Main Page Styles */
  .bio_row2 {
    flex-direction: row-reverse; }

  .bio_aside {
    font-size: 2.5rem;
    width: 45%; }

  /*Video Styles */
  /*hompage -  news styles */
  .news_pic {
    width: 40%; }

  #news_btn {
    width: 20%; }

  /* News - Main page styles */
  .top_banner {
    flex-direction: row;
    width: 75%;
    height: 275px;
    justify-content: center;
    background-image: url(../images/bluesphere.svg);
    background-repeat: no-repeat; }

  .news_row {
    margin: 0 auto; }

  .news_aside {
    width: 40%;
    font-size: 2.5rem; }

  .news_row5 {
    justify-content: center;
    align-items: center;
    width: 80%;
    gap: 10%; } }
@media screen and (min-width: 1600) {
  nav {
    width: 100%; }

  .menu {
    padding: 0;
    display: flex;
    justify-content: space-around;
    width: 100%; }

  #hero aside {
    width: 10%; } }