*,html{
  scroll-behavior: smooth;
  }
  
  *, *:after, *:before {
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
  }
  :root{
  scrollbar-width: thin !important;
  --secondary:#202124;
  --gray:#b8bca7;
  --blue:#061221;
  }
  ::-webkit-scrollbar {
  height: 12px;
  width: 20px;
  }
  ::-webkit-scrollbar-thumb {
    
  background:  repeating-linear-gradient( 135deg, rgb(236, 236, 236), rgb(221, 221, 221) 5px, rgb(201, 201, 201) 5px, rgb(228, 228, 228) 1px, rgb(224, 224, 224) 10px, rgb(53, 103, 126) 15px, rgb(214, 214, 214) 15px, rgb(224, 224, 224) 10px );
  -webkit-border-radius:  5px;
  }
  ::-webkit-scrollbar-corner {
  background: #000;
  }
        .button {
          position: absolute;
          z-index: 1;
          width: 55%;
          height: 80%;
          left: 5%;
          border-radius: 100px;
          background-image: linear-gradient(160deg, hsl(var(--hue) 20% 95%) 40%, hsl(var(--hue) 20% 65%) 70%);
          transition: all var(--duration) var(--easing);
          box-shadow:
            2px 2px 3px hsl(var(--hue) 18% 50% / 80%),
            2px 2px 6px hsl(var(--hue) 18% 50% / 40%),
            10px 20px 10px hsl(var(--hue) 18% 50% / 40%),
            20px 30px 30px hsl(var(--hue) 18% 50% / 60%);
        }
        
        .button::before, 
        .button::after {
          content: '';
          position: absolute;
          top: 10%;
          width: 41%;
          height: 80%;
          border-radius: 100%;
        }
        
        .button::before {
          left: 5%;
          box-shadow: inset 1px 1px 2px hsl(var(--hue) 20% 85%);
          background-image: linear-gradient(-50deg, hsl(var(--hue) 20% 95%) 20%, hsl(var(--hue) 20% 85%) 80%);
        }
        
        .button::after {
          right: 5%;
          box-shadow: inset 1px 1px 3px hsl(var(--hue) 20% 70%);
          background-image: linear-gradient(-50deg, hsl(var(--hue) 20% 95%) 20%, hsl(var(--hue) 20% 75%) 80%);
        }



        
        
        :root{
  --main-clr: rgb(235, 236, 240);
  --font-clr: 108, 122, 146;
  --bright-clr: 255, 255, 255;
  --dark-clr: 0, 0, 0;
}
body {
  margin: 0;
  background-color: var(--main-clr); 
  font-family: Arial, Helvetica, sans-serif;
}

/* row */
.row::after {
  content: "";
  clear: both;
  display: table;
}

[class*="col-"] {
  float: left;
  padding: 15px;
}

.col-1 {width: 8.33%;}
.col-2 {width: 16.66%;}
.col-3 {width: 25%;
  padding: 40px;
  margin: 10px;
  box-shadow: -6px -6px 16px #fff,
  6px 6px 16px #d1cdc7;}
.col-4 {width: 33.33%;}
.col-5 {width: 41.66%;}
.col-6 {width: 50%;}
.col-7 {width: 58.33%;}
.col-8 {width: 66.66%;}
.col-9 {width: 55%;}
.col-9:hover {
  transform: translate(0, -5px);
}

.col-10 {width: 83.33%;}
.col-11 {width: 91.66%;}
.col-12 {width: 100%;}

html {
  font-family: "Lucida Sans", sans-serif;
}

div.b {
  margin: 10px;
  position: absolute;
  color: #808181;
  font-size: 13px;
  right: 0;
  background-image: linear-gradient(#eee 50%, rgb(206, 211, 214));
  width: 20%; box-shadow: 8px 8px 38px rgba(var(--dark-clr), 0.1),
  -8px -8px 10px rgba(var(--bright-clr), 0.8);  background-color: var(--main-clr); padding: 14px; 
   background-color: var(--main-clr); padding: 14px;  
} 



@media only screen and (max-width: 00px) {
  div.b {
    visibility: hidden;

  }
}
.header {
  display: flex;
  margin: 7px;
  font-size: 16px;
  background-color: #f7f7f70c;
  border-bottom: 1px solid rgb(201, 201, 201);
  color: #4e4e4e;
  
}
.header> div{
  width: 40px;
  font-size: 23px;
}
.menu ul {
  list-style-type: none;
  align-items: center;
  width: 100%;
  text-align: center;
}

.menu li:hover {
  background-color: #9896b949;
}
#shad{
  padding: 8px;
  margin-bottom: 7px;
  color: #ffffff;
  border-radius: 63px;
  border-left: 2px solid rgb(245, 245, 245);
  border-right: 5px solid rgba(204, 204, 204, 0.199);
  background-color:#3b589805;
  color: rgba(var(--font-clr), 0.5);
  margin: 30px;
  justify-content: center;
  box-shadow: 8px 8px 38px rgba(var(--dark-clr), 0.1),
  -8px -8px 10px rgba(var(--bright-clr), 0.8);
}
#shad:hover{
  background-color:#3b589870;
}
.containr {
  background-color: rgba(0, 0, 0, 0.699);
  height: 300px;
  position: relative;
  text-align: center;
  color: white;
}


.bottom-left {
  position: absolute;
  bottom: 68px;
  left: 155px;
}

.top-left {
  font-size: 13px;
  position: absolute;
  top: 8px;
  left: 16px;
}

.top-right {
  
  position: absolute;
  top: 8px;
  right: 16px;
}

.bottom-right {
  position: absolute;
  bottom: 8px;
  right: 16px;
}



.like__icon {
  font-size: 1.2rem;
  margin-right: 0.3rem;
}

.like__number {
  font-size: 0.8rem;
}
/* 
// Container styling */
.cntainer {
  margin: 10px;
height: 100vh;
width: 100vw;
display: flex;
justify-content: center;
align-items: center;
}

.centered {
  visibility: visible;
}

@media only screen and (max-width: 600px) {
  .centered {
    visibility: hidden;
  }
}

/*  */

.imog{
  z-index: -2;
  position: fixed;
  height: 500px;
  
    -webkit-filter: grayscale(100%); /* Safari 6.0 - 9.0 */
    filter: grayscale(100%);
  
}


.contai {
  display: flex;
      justify-content: space-between;
  padding: 2.5em;
  width: 300px;
}

.contai a {
  font-size: 1.5em;
  margin: 0.2em;
  padding: 0.6em;
}

.contai,
.contai a {
  background: #efeeee;
  border-radius: 10px;

}

.contai a:active {
  box-shadow: inset -6px -6px 16px #fff,
              inset 6px 6px 16px #d1cdc7
}

.twitter {
  color: #19a9dd;
}

.github,
.codepen {
  color: #010101;
}

.conainer
 {
 align-items: center;
  }

.data_more_less_inner {
  overflow: hidden;
   margin-bottom: 20px;
  width: 80%;
  padding-left: 10%;
   position: relative;}
.action_less {
  display: none;
 align-items: center;
}
.less_active .action_less {
  display: inline-block;
}
.less_active .action_more {
  display: none;}
.data_more_less:not(.less_active):not(.action_disabled) .data_more_less_inner:after {content: ''; display: block; position: absolute; bottom: 0; left: 0; width: 100%; background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgb(14, 13, 13) 100%);

filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ffffff',GradientType=0 ); height: 80px;}
.data_more_less.action_disabled .more_less_action {display: none;}
h1 {margin-bottom: 0px;}
.btn {color: rgb(238, 232, 232); text-decoration: none; border: 1px solid #444; padding: 7px 6px;border-radius: 3px;
}
.btn:hover { color: rgb(238, 238, 238);}

.coniner
 {
   color: rgba(46, 46, 82, 0.582);
  }
/* inside box */
.flex-contair {
  border-left: 2px solid rgb(245, 245, 245);
  border-right: 5px solid rgba(204, 204, 204, 0.199);
  background-color:#3b589805;
  color: rgba(var(--font-clr), 0.5);
  border-radius: 8px;
  display: flex;
  flex-wrap: wrap;
  margin: 50px;
  justify-content: center;
  box-shadow: 8px 8px 38px rgba(var(--dark-clr), 0.1),
  -8px -8px 10px rgba(var(--bright-clr), 0.8);

}

.flex-contair > div {
  width: 300px;
  margin: 6px;
  padding: 6px;
  text-align: center;
  line-height: 25px;
  font-size: 17px;
}
.player {
  margin-top: 0.5rem;
  padding: 0.4rem;
}

.player section:nth-child(2),
.player section:nth-child(3) {
  display: flex;
  flex-flow: row wrap;
  justify-content: space-evenly;
  align-items: center;
  margin: 1rem 0;
}

.player section:nth-child(3) i {
  cursor: pointer;
}

span {
  flex-basis: 6%;
}

.song-info {
  padding-left: 0.5rem;
}

.song-info h3 {
  margin: 0;
}

.song-info span {
  font-size: 0.9rem;
  display: block;
}

/*input range*/
.slider {
  flex-basis: 62%;
  outline: none;
  height: 0.2rem;
  -webkit-appearance: none;
  background-color: hsl(231, 100%, 90%);
  cursor: pointer;
}

.slider::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 0.8rem;
  height: 0.8rem;
  border-radius: 50%;
  background-color: hsl(231, 28%, 67%);
}

.button {
  background-color: transparent;
  outline: none;
  border: none;
}

i {
  color: hsla(230, 11%, 42%, 0.616);
}

#inx{
  border-radius: 80%;
  box-shadow: 5px 2px 10px rgba(var(--dark-clr), 0.2),
  -5px -5px 10px rgba(var(--bright-clr), 0.8);
}
#ino:hover{
  cursor: pointer;
  box-shadow: 8px 8px 10px rgba(var(--dark-clr), 0.2),
  -8px -8px 10px rgba(var(--bright-clr), 0.8),
  inset 6px 6px 10px rgba(var(--dark-clr), 0.2),
  inset -6px -6px 10px rgba(var(--bright-clr), 0.8);
}


#ino{
    border-radius: 50%;
    font-size: 0.8rem;
    transition: box-shadow 200ms;
}


.flex-contes {
  display: flex;
  width: 97%;
  background-color:#3b589805;
  border-radius: 8px;
  line-height: 20px;
  color: hsla(230, 12%, 41%, 0.815);
  box-shadow: 8px 8px 10px rgba(var(--dark-clr), 0.04),
                -8px -8px 10px rgba(var(--bright-clr), 0.5);
  border-left: 2px solid rgb(245, 245, 245);
  border-right: 5px solid rgba(204, 204, 204, 0.199);

}

.flex-contes > div {
  width: 100%;
  margin: 18px;
  text-align: center;
}

/* button  */
#inox{
  width: 2.5rem;
  height: 2.5rem;
  border: 2px solid var(--main-clr);
  border-radius: 50%;
  font-size: 0.8rem;
  box-shadow: 5px 2px 10px rgba(var(--dark-clr), 0.2),
              -5px -5px 10px rgba(var(--bright-clr), 0.8);
  transition: box-shadow 200ms;
   background-color: #32309202;
  color: rgb(167, 167, 167);
  -webkit-appearance: none;
  justify-content: center;
  outline: none;
  cursor: pointer;
  width: 90px;
  height: 30px;
  margin: 10px;
  border-radius: 30px;
  transition: all .2s ease;
  font-family: "Source Sans Pro", sans-serif;
  font-size: 12px;
  font-weight: 300;
}

/* next boutton */

.arrows-div
{
  width:1000px;
  margin:0 auto;
  padding-top:70px;
  padding-bottom:70px;
}
.button {
  position: relative;
  margin: 0;
  padding-left: 10px;
  padding-right: 10px;
  padding-top: 5px;
  padding-bottom: 5px;
  color: #c9bbbb;
  font-size: 18px;
    border-radius:5px;
}
.button::after {
  content: '';
  position: absolute;
  top: 2.5px;
  width: 0;
  height: 0;
}
.button:hover {
  color: #9fd4e2;
}
/* Arrow Buttons */
/* ------------- */
.next::after,
.prev::after {
  border-style: solid;
}




.page-numbers {
color: 
#75797d;
background-color: 
#95b9f315;
text-decoration: none;
padding: 10px;
  width:20px;
  height:20px;
font-family: "tahoma";
  font-size:16px;
  box-shadow: 1px 1px 1px 1px whitesmoke;
  padding-right: 15px;
  padding-left:15px;
  padding-top:5px;
  padding-bottom:5px;
  border-radius:50px;
  margin: 10px;
}
.page-numbers:hover {
  color: #262f3d;
  background-color: #fff;
  -webkit-transition: all 0.5s ease;
	-moz-transition: all 0.5s ease;
	-o-transition: all 0.5s ease;
	-ms-transition: all 0.5s ease;
  border-radius:50px;
  
 }

.current {
background-color: #262f3d;
color: #9cd3e1;
font-family: "tahoma";
text-decoration: none;
  font-size:20px;
}


.back-td
{
    width:250px;
    text-align:left;
}
.prev-td
{
    width:250px;
    text-align:right;
}
.paging-td
{
    width:500px;
    text-align:center;
}

.tabl {
  color: rgb(183, 183, 187);
  background-color: rgb(10, 9, 14);
  font-family: arial, sans-serif;
  border-collapse: collapse;
  width: 100%;
}

td, th {
  padding: 10px 10px;
  text-align: left;
  padding: 8px;
}
td, th, a {
 color: rgb(196, 196, 190);
 text-decoration: none;
}
tr:nth-child(even) {
  background-color: rgb(10, 9, 14);
}

main {
  border-bottom: 0.3px solid rgba(0, 0, 0, 0.123);
  position: relative;
  padding: 10px 4px;
  height: 90px;
  display: grid; 
  grid-template-columns: repeat(4, 1fr);
  grid-template-rows: repeat(8, 1fr);
  gap: 20px;
}
div {
  text-align: center; 
  border-radius: 5px;
  justify-content: center;
  align-items: center;
  cursor: pointer;
  transition: .5s;
}


div:first-child {
  grid-column: span 1;
}
div:nth-child(2) {
  grid-column: span 3;
}


.logo {
  font-size: 30px;
}

/* serchingbar */
form.example input[type=text] {
  padding: 10px;
  font-size: 17px;
  border: 1px solid rgb(226, 226, 226);
  float: left;
  border-radius: 60px;
  width: 80%;
  background: #f1f1f1;
}

form.example button {
  float: left;
  width: 14%;
  padding: 10px;
  background: #e2e2ff;
  border-radius: 50px;
  color: white;
  font-size: 17px;
  border: 1px solid rgb(235, 235, 235);
  border-left: none;
  cursor: pointer;
}

form.example button:hover {
 
  background: #0b7dda;
}

form.example::after {
  content: "";
  clear: both;
  display: table;
}