@import url('https://fonts.googleapis.com/css2?family=Bai+Jamjuree:wght@200;300;400;500;600;700&family=Crimson+Text:ital,wght@0,400;0,600;0,700;1,400;1,600;1,700&family=Dancing+Script:wght@400;500;600;700&family=Dawning+of+a+New+Day&family=Gochi+Hand&family=Indie+Flower&family=Lato:ital,wght@0,100;0,300;0,400;0,700;1,100;1,300;1,400;1,700&family=Poiret+One&family=Poppins:wght@500&family=Raleway:wght@100;200;300;400&family=Roboto+Mono:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;1,100;1,200;1,300;1,400;1,500;1,600;1,700&family=Wallpoet&display=swap');

:root{
   color: #FFA800;
   color: #242D42;
   color: #313D5A;
}

*{
  margin: 0;
  padding: 0;
  
  
}

 html{
  scroll-behavior: smooth;
 }

body{
  font-family: 'Poppins', sans-serif;
  height: 100vh;
  width: 100%;
   background-color:#313D5A;
   
}
.left-bar{
width: 22rem;
background-color: #1c2541;
bottom: 0;
top: 0;
padding: 10px;
z-index: 5;
position: fixed;
display: grid;
align-items: center;
justify-content: center;

}

.user{
display: flex;
position: relative;
text-decoration: none;
width: 18rem;
height: 7rem;
border-radius: 16px;
margin-top: -1rem;
margin-left: 2rem;
box-shadow: inset 0px 0px 2em 0px #b9baa3;
border: 2px solid #b9baa3;
}

.user i{
   display: flex;
   font-size: 2rem;
   color: #717379;
   align-items: center;
   margin-left: 1rem;
  
}



.notification{
  display: grid;
  align-items: center;
  justify-content: center;
  margin-top: -11rem;
}

 

 .Noti span{
   display: flex;
   width: 19rem;
   font-size: 25px;
   color: #717379;
   margin-top: 4rem;
   border-bottom: 3px solid #717379;
   overflow: hidden;
 }

 .Noti span:hover{
  border-bottom: 3px solid #b9baa3;
   transition: 1s;
 }

 .Noti i{
   position: absolute;
   font-size: 30px;
   
 }

 .Noti a{
   margin-left: 3rem;
   text-decoration: none;
   color: #717379;
 }

.Genre {
   position: relative;
   display: grid;
   grid-template-columns: repeat(4,1fr);
   margin-top: 0rem;
   gap: 5px;
   width: 20rem;
   height: 10rem;
   border-top: 2px solid #717379;
   padding: 20px;
   padding-top: 10%;
   margin-top: -8rem;
 }
 
 .Genre h2 {
 position: absolute;
 display: flex;
 justify-content: center;
 align-items: center;
 color: white;
 background-color: #1c2541;
 width: 25%;
 font-size: 20px;
 font-weight: 100;
 left: 38%;
 top: -18px;
 }
 
 .g1, .g2,.g3,.g4,.g5,.g6,.g7
 ,.g8,.g9,.g10,.g11,.g12
 ,.g13,.g14,.g15,.g16 {
   position: relative;
   display: flex;
   font-size: 15px;
   justify-content: center;
   background-color: #b9baa3;
   color:#242D42;
   padding: 5px;
   height: 1rem;
   padding-bottom: 10px;
   text-decoration: none;
   
 }

 .g1:hover, .g2:hover, .g3:hover, .g4:hover, .g5:hover, .g6:hover, .g7:hover,
.g8:hover, .g9:hover, .g10:hover, .g11:hover, .g12:hover,
.g13:hover, .g14:hover, .g15:hover, .g16:hover {
  background-color: #242D42;
  color: #b9baa3;
  
}



 .g6,.g7,.g11,.g12,.g13,.g15{
     display: flex;
     width: 3rem;
     text-align: center;
    
 }

 .g7,.g8,.g12,.g16{
   position: relative;
   right: 18px;
 }

 .g7{
  position: relative;
   left: -12px;
 }

 .g8{
  position: relative;
  right: 42px;
 }

 .g12{
  position: relative;
  right: 30px;
 }

 .g14,.g15{
  position: relative;
  right: 12px;
 }

 .g16{
  position: relative;
  right: 42px;
 }

 .sign-out{
  position: absolute;
  display: flex;
  right: 0;
  bottom: 0;
  background-color: #b9baa3;
  width: 25rem;
  height: 5rem;
  gap: 20px;
  justify-content: center;
  align-items: center;
 }

 .sign-out i{
  font-size: 35px;
 }

 .sign-out a{
  text-decoration: none;
  color: #242D42;
 }

 /*--------- end of left-bar -----------*/


 /*======== mein ======*/
.na{
  height: 150%;
}
 .mein{
position: fixed;
display: flex;
z-index: 5;
width: 104rem;
height: 4.3rem;
background-color: #1c2541;
color: white;
border-bottom: 2px solid #b9baa3;
left: 23.2rem;
top: 0;
 }

 .header{
  position: relative;
  display: flex;
  gap: 20rem;
  justify-content: center;
  align-items: center;
  padding: 10px;
 }

 .header h2{
  color: #b9baa3;
  font-size: 30px;
 }

 .sp{
  display: flex;
  color: #717379;
  font-size: 23px;
  gap: 5rem;
 }
 
 .inpot input{
  display: flex;
 background-color: #313D5A;
 border: 1px solid #b9baa3;
 padding: 10px;
 color: #FFF;
 font-size: 23px;
  width: 22rem;
  height: 2.7rem;
  border-radius: 30px;
  justify-content: center;
  align-items: center;
 }

.slider{
  position: relative;
  width: 100rem;
  height: 18rem;
  display: flex;
  justify-content: center;
  padding: 5px;
  left: 24rem;
  top: 5rem;
  gap: 20px;
  
 
}


.gmov{
  position: relative;
  display: flex;
  width: 48rem;
  height: 19rem;
  background-color: #1c2541;
  border-radius: 20px;
  color: #FFF;
  
}

.gmov:hover,.gmov2:hover{
  box-shadow: inset 0px 0px 2em 0px #b9baa3;
  
}

.gmov .text{
  position: absolute;
  display: block;
  top: 0px;
  margin: 10px;
  font-size: 18px;
  
}

.gmov .text p{
  margin-bottom: 20px;
  margin-top: 20px;
}
.gmov2{
  position: relative;
  display: flex;
  width: 48rem;
  height: 19rem;
  background-color: #1c2541;
  border-radius: 20px;
  color: #FFF;

}


.gmov2 .text{
  position: absolute;
  display: block;
  top: 20px;
  margin: 20px;
  font-size: 18px;
}

.gmov2 .text p{
  margin-bottom: 30px;
  margin-top: 60px;
}

.text{
  position: absolute;
  width: 25rem;
  display: block; 
  right: 0;
  top: -10px;
 
}

.text span{
  position: relative;
  font-size: 15px;
  top:-12px ;
  
}

.img img{
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  width: 15rem;
  height: 19rem;
  top: 0px;
  left: 0px;
  border-radius:20px 0px 0px 20px;
}

.logo{
  position: relative;
  display: flex;
  padding: 5px;
  justify-content: space-evenly;
  width: 98rem;
  height: 4.5rem;
  background-color: #242D42;
  border-radius: 180px;
  border: 3px solid #b9baa3;
  left: 24.8rem;
  top: 7rem;
  
}

.logo span{
    display: flex;
    justify-content: center;
    align-items: center; 
}

.logo img{
  width: 5.1875rem;
  height: 2.1875rem;
  
}

.main-card{
 position: relative;
 display: grid;
 grid-template-columns: repeat(4,1fr);
 align-items: center;
 justify-content: center;
 gap: 10px;
 width: 74rem;
 padding: 25px;
 height: 53rem;
 top: 10rem;
 left: 24rem;
 border-radius: 20px;
 border: 1px solid #b9baa3;
 background-color: #1c2541;
 
}

.card{
  position: relative;
  display: grid;
  text-decoration: none;
  width: 18rem;
  height: 25rem;
  border-radius: 10px;
  background-color: #313D5A;
  color: white;
  
  
}


.card img{
  background-repeat: no-repeat;
  background-size: cover;
  border-radius: 10px 10px 0px 0px;
  width: 18rem;
  height: 21.5rem;
}

.card .name{
display: grid;
padding-bottom: 0px;
padding-left: 5px;
padding-right: 5px;
border-radius:0px 0px 10px 10px;
}


.card .txt{
  display: flex;
  justify-content: space-between;
  font-size: 15px;
  font-weight: 100;
  color: #717379;
}

.card b{
  font-weight: 100;
  font-size: 20px;
  color: #FFF;
}

/*========end card ============*/

.view{
  position: relative;
  padding: 10px;
  display: block;
  align-items: center;
  left: 80.4%;
  top: -46.4rem;
  border-radius: 30px;
  height: 43rem;
  width: 23rem;
  background-color: #1c2541;
  border: 1px solid #b9baa3;
}

.Added{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 15px;
  width: 23rem;
  height: 5rem;
  margin-bottom: 30px;
}

.Added i{
  color: #b9baa3;
  font-size: 2.5rem;
}

.Added p{
  color: white;
  font-size: 1.2em;
  font-weight: 100;
}

.Added a{
  text-decoration: none;
  color: #b9baa3;
  font-weight: 100;
  font-size: 1.2em;
}

.top{
  display: flex;
  text-decoration: none;
  gap: 30px;
  width: 23rem;
  height: 4.5rem;
  border-radius: 15px;
  background-color: #313D5A;
  border: 1px solid #b9baa3;
  margin-bottom: 20px;
}

.top:hover{
 box-shadow: inset 0px 0px 2em 0px #b9baa3;
 
}

.im{
  width: 3rem;
  height: 4.3rem;
  border-radius: 15px 0px 0px 15px ;
  
}

.im img{
  width: 3.5rem;
  height: 4.5rem;
  border-radius:15px 0px 0px 15px ;
  background-repeat: no-repeat;
  background-size: cover;
}

.tex-about{
  display: grid;
  align-items: center;
  color: #FFF;
}

.tex-about p{
  font-size: 1.3em;
  font-weight: lighter;
}

.abo{
  display: flex;
  align-items: center;
  gap: 10px;
}

.abo i{
  font-size: 1.3em;
  color: #717379;
}

.abo span{
  font-size: 1.2em;
  color: #717379;

}