*{
  padding: 0px;
  margin: 0px;
  box-sizing: border-box; font-family: "Share Tech", sans-serif;
}
.body-content{
  display: none;
}
.loading-page{
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100vh; background-color: rgb(233, 231, 231);
}
.loadingpage-body{
 width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
 
 
}
.loadingpage-logo{
  overflow: hidden;
  padding: 10px;
 
}
h2{
  margin-top: 20px;
  margin-left: 20px;
  text-transform: uppercase;
  display: none;
}
.loadingpage-logo>i{
  color: rgb(0, 7, 20);
  font-size: 100px;
 z-index: -3;
}

header{
  width: 100%;
  height: auto;
}
nav{
  width: 100%;
  padding: 20px 10px 20px 10px;
  background-color: rgb(0, 7, 20);
  position: fixed;
  top: 0px;z-index: 3;
}
.navbar{
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: whitesmoke;
  
}
.logo{
  width: 10%;
  font-size: 30px;
 color: whitesmoke;
}

.nav-links{
  width: 70%;
}
.nav-links>ul{
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  list-style-type: none;
  
  font-size: 22px;
  text-transform: uppercase;
}
.mode-and-user{
  width: 10%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 15px;
  font-size: 20px;
}
.bars{
  display: none;
}
body.darkmode-animation{
  background-color:rgb(0, 7, 20);
  color: whitesmoke;
}

.slider {
  width: 100%;
 height: auto;
  position:relative;
  margin-top: 70px;
 
  overflow: hidden; /* Hides extra slides off-screen */
}

.slide-container {
  width: 100%;
  height: 100%;
  display: flex;
 
  transition: transform 0.5s ease-in-out; /* Smooth transition when sliding */
}

.slide {
  min-width: 100%; /* Prevents slides from shrinking */
  height: 100%;
  padding: 0px 100px 0px 90px;
  position: relative; 
  background-color:rgb(233, 231, 231);
  display: flex;
  justify-content: space-between;
  align-items: center;
  /* Keeps the button positioned inside the slide */
}
.slide>img{
  width: 60%;
}


/* Button centered over the image */

.shopdiv{
  display: flex;
  justify-content: flex-start;
  width: 30%;
  flex-direction: column;
  align-items: center;
  gap: 15px;
 
}
.shopdiv>button{
  font-size: 25px;
  background-color: whitesmoke;
  border: none;
  padding: 10px 30px 10px 30px;
  text-transform: uppercase;

}
.shopdiv > button:hover {
  color: whitesmoke;
 
  background-color:rgb(0, 7, 20);
  backdrop-filter: blur(10px);
  transition: border 1s ease-in-out;
}

.btn{
position: absolute;
  top:45%;
  left: 0%;
  width: 100%;
  display: flex;
  padding: 0px 20px 0px 20px;
  justify-content: space-between;
}
.pre, .next{
  background-color:transparent;
  font-size: 40px;
  border: none;
  color: rgb(0, 7, 20);
}
h1{
  font-size: 60px;
  color: rgb(0, 7, 20);
}
.otherartists-container{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 20px;
}
.other-artists{
  width: 95%;
  height: auto;
  padding: 10px;
 
}
.otherartist-title{
font-size: 50px;
  text-transform: uppercase;
}
.search-container{
  width: 100%;
  margin-top: 10px;
}
.search-container>input{
  width: 100%;
  padding: 10px;
  font-size: 25px;
  
}
.search-container>input::placeholder{
  font-size: 20px;
}

.otherartist-name {
  width: 100%;
  height: auto;

  margin-top: 16px;
}

.showname {
  width: 100%;
  display: flex ;
  flex-direction: row; /* Stacks image and name vertically */
  justify-content: space-between; 
  align-items: center;  
    /* Centers the items horizontally */
              /* Adds clean spacing between image and text */
}

/* REMOVED width: 20% from here so the container can center properly */
.artist-image {
  width: 15%;           /* Set a fixed pixel width for the logo sizing instead of 20% */
padding: 10px;

border-radius: 20%;}


.artist-image img {
  width: 100%;
  height: 100%;box-shadow: 0px 0px 5px gray;
  border-radius: 20%;
  object-fit:fill;      /* Prevents the artist logo from stretching awkwardly */
   /* Optional: Makes the logo a clean circle */
}

.artist-groupname {
 
  width:40%;            /* Let the width adapt to the text size */
  text-align: center;     /* FIXED: Forces the text to center perfectly */
  font-weight: bold;
  font-size:70px;
}
.notfound{
  font-size: 30px;
  text-transform: uppercase;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.notfound>button{

 background-color: rgb(0, 7, 20);
 color: whitesmoke;
  border: none;
  font-size: 30px;
  box-shadow: 0px 0px 3px ghostwhite;
  padding: 10px;
}
.showname>button{

 background-color: transparent;
  border: none;
  font-size: 30px;
}
/* Container for navigation arrows */
@media (max-width:762px) {
  .pre, .next{
    color: whitesmoke;
  }
  .slide{
    flex-direction: column;
    padding: 0px;
    gap: 10px;
  }
  .slide>img{
    width: 100%;
  }
 .shopdiv>button{
font-size: 22px;
width: 60%;
margin-left: 0px;

 }
 .shopdiv{
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
  margin-bottom: 20px;
 }
}

@media (max-width:700px) {
  .bars{
    display: block;
    font-size: 20px;
  }
  .nav-links{
    display: none;
  }
  .mode-and-user{
    width: 80%;
  }
  .nav-links-animation{
    display: flex;
    width: 100%;
    position: absolute;
    top: 62px;
  
    right: 0px;
    height: 97vh;
    justify-content: center;
    align-items: center;
   background-color: rgb(247, 245, 245);
   animation: gonavanimation 1s ease-in-out forwards;

  }
   
  @keyframes gonavanimation {
    from{
      width: 0%;
    }
    to{
      width: 100%;
    }
  
  }
  .nav-links>ul{
  display: flex;
  justify-content: center;
  align-items: center;
flex-direction: column;
color: rgb(0, 7, 20);
font-size: 25px;
}
.pre, .next{
  font-size: 20px;
}
.artist-image {
  width: 30%;           /* Set a fixed pixel width for the logo sizing instead of 20% */
padding: 10px;

border-radius: 20%;
}
.shopdiv{
  display: flex;
  width: 100%;
  justify-content: center;
  align-items: center;
  flex-direction: row;
  padding: 0px 20px 0px 20px;
}
.shopdiv>h1{
  width: 40%;
  
}
.shopbtn{
  width: 50%;
}
}
@media (max-width:500px) {
  .artist-groupname{
    font-size: 40px;
  }
  .artist-image {
    width: 40%;
  }
  .notfound>button{
    font-size: 20px;
    width: 12%;
  }
  .notfound{
    font-size: 25px;
  }
  .otherartists-container{
    padding: 10px;
    text-align: center;
  }
  .otherartist-title{
    font-size: 40px;
  }
  .search-container>input{
    padding: 5px;
  }
  .shopdiv>h1{
    font-size: 40px;
  }
 .shopdiv>button{
  padding: 6px 10px 6px 10px;
 }

}