@font-face {
  font-family: 'yekan';
  font-style: normal;
font-weight: 300;
  src:url(fonts/yekan.eot?#) format('embedded-opentype'),    
        url(fonts/yekan.woff) format('woff'),
        url(fonts/yekan.ttf) format('truetype'); 
}
* {
  
  padding: 0;
  margin: 0;
  -webkit-transition: all .5s  ease-in;
  -moz-transition: all .5s  ease-in;
  -o-transition: all .5s  ease-in;
  -ms-transition: all .5s  ease-in;
  transition: all .5s  ease-in;
 -webkit-transform: translate3d(0, 0, 0);
   -moz-transform: translate3d(0, 0, 0);
   -ms-transform: translate3d(0, 0, 0);
 -o-transform: translate3d(0, 0, 0);
   transform: translate3d(0, 0, 0); 
   -webkit-backface-visibility: initial;
    backface-visibility: initial; 
    border: 1px solidtr transparent;
    text-rendering: optimizeLegibility;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    animation: fadein 2s;
   
      scroll-behavior: smooth;
      font-family:yekan,'yekan',tahoma;
  }
  @keyframes fadein {
    from { opacity: 0}
    to   { opacity: 1}
  }
  


a{
  color: #b3cce6;
  text-decoration: none; 
font-size: medium;
  font-weight: bolder;
 /* background-image: -webkit-linear-gradient(92deg, #cc5500, #ccbb00);  */
  
  
 border: 1px solidtr transparent;
 
  text-transform: capitalize;
  cursor: pointer;
   -webkit-filter: drop-shadow(3px 3px 5px rgb(239, 0, 151));
  filter: drop-shadow(3px 3px 5px rgb(239, 0, 151)); 
  
margin: 10px;


}
p{
  justify-content: right;
text-align:right;
align-content:right;
align-items:right;

margin: 0;
text-align: right;
box-sizing: border-box; 
text-transform: capitalize; 

font-style: oblique; letter-spacing: 0px; font-weight: bold; font-variant: small-caps;

   padding-top: 10px;

}
.shp{
  text-shadow: rgb(239, 0, 151) 0px 0px 1px, black 1px 1px 1px, black 0px 0px 11px, black -1px -1px 1px, black 1px -1px 1px, black -1px 1px 1px, green 1px 0px 8px, green -1px 0px 8px, green 0px 1px 8px, green 0px -1px 8px, gold 3px -4px 10px, gold 3px -4px 10px, gold 3px -4px 10px, gold -3px -4px 10px, gold -3px -4px 10px, gold -3px -4px 10px, green 0px 0px 8px; color: rgb(254, 254, 34); 
}
a:hover{
  text-shadow: rgb(239, 0, 151) 0px 0px 1px, black 1px 1px 1px, black 0px 0px 11px, black -1px -1px 1px, black 1px -1px 1px, black -1px 1px 1px, green 1px 0px 8px, green -1px 0px 8px, green 0px 1px 8px, green 0px -1px 8px, gold 3px -4px 10px, gold 3px -4px 10px, gold 3px -4px 10px, gold -3px -4px 10px, gold -3px -4px 10px, gold -3px -4px 10px, green 0px 0px 8px; color: rgb(254, 254, 34); 
  -webkit-filter:  drop-shadow(3px 3px 50px blue); 
 filter: drop-shadow(3px 3px 5px blue); 
 
}
#dcan{
 visibility: hidden;
  
  width: 0px;
  height:0px;
 
  
}



.container1 {

  position: -webkit-sticky; /* Safari */
        position: sticky;
  top: 0;
  
 
  z-index: -1;
  touch-action: none;
pointer-events: none;

}
.maindiv{
  
  background-color: transparent;
  position: absolute;
  z-index: 1;
   top:0;

  /* background: linear-gradient(to bottom, rgba(255,255,255,0.60) 0%, rgba(255,255,255,0.20) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0.0) 100%), radial-gradient(ellipse at bottom, #755927 0%,rgba(0,0,0,0.0) 100%), #000000;
   */
   left: 0; 
   right: 0; 
   margin-left: auto; 
   margin-right: auto; 

width: 90%;

}

.textDiv{
 
 
   z-index: 9999;
margin: 0;
padding: 0;

/* transform:rotate3d(1, 0, 0,4deg); */
justify-content: right;
text-align:right;
align-content:right;
align-items:right;
display: grid;

grid-template-columns:100%;
grid-auto-rows: 50px;
/* grid-template-columns: repeat(7, 12vw);  */

grid-gap:5px;

 } 

 .itemdiv{
   
  

  /* background: linear-gradient(to bottom, rgba(255,255,255,0.60) 0%, rgba(255,255,255,0.20) 50%, rgba(255,255,255,0) 51%, rgba(255,255,255,0.0) 100%), radial-gradient(ellipse at bottom, #755927 0%,rgba(0,0,0,0.0) 100%), #000000; */
  box-shadow: inset -2px -3px 3px rgba(0, 0, 0, 0.3), inset 2px 3px 5px rgba(255, 255, 255, 0.6), 0px 0px 5px rgba(0, 0, 0, 0.5);

  border-radius: 15px;
 cursor: pointer;
 -webkit-filter:  drop-shadow(3px 3px 5px rgb(4, 4, 5)); 
 filter: drop-shadow(3px 3px 5px rgb(4, 4, 5)); 
 }
 
 .itemdiv:hover{
  transform: scale3d(1.01, 1.01,1.01); 
 font-size: 120%;
 border-radius: 15px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.8)), color-stop(10%, rgba(255, 255, 255, 0.6)), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 10%, rgba(255, 255, 255, 0) 100%);
  
 }




 
.button {
  position: relative;
  margin: 10px;
  padding: 20px;
  min-width: 200px;
  max-width: 300px;
  display: inline-block;
  background: transparent;
  text-align: center;
  box-shadow: inset -2px -3px 3px rgba(0, 0, 0, 0.3), inset 2px 3px 5px rgba(255, 255, 255, 0.6), 0px 0px 5px rgba(0, 0, 0, 0.5);
  border-radius: 15px;
}

.button:before,
.button:after {
  content: '';
  position: absolute;
  height: 100%;
  width: 100%;
  border-radius: 15px;
  left: 0;
  top: 0;
}

.button:before {
  z-index: -2;
}

.button:after {
  opacity: 0;
  z-index: -1;
  box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
  -webkit-transition: opacity .4s;
  transition: opacity .4s;
}

.button:hover:after {
  opacity: 1;
}

.blue:before {
  background: -webkit-gradient(linear, left top, left bottom, from(#2d5986), color-stop(60%, #3973ac), color-stop(90%, #b3cce6), to(#336699));
  background: linear-gradient(to bottom, #2d5986 0%, #3973ac 60%, #b3cce6 90%, #336699 100%);
}
.blue:after {
  background: -webkit-gradient(linear, left top, left bottom, from(#538cc6), to(#79a6d2));
  
  background: linear-gradient(to bottom, #538cc6 0%, #79a6d2 100%);
}

.green:before {
  background: -webkit-gradient(linear, left top, left bottom, from(#2d8681), color-stop(60%, #39aca6), color-stop(90%, #b3e6e3), to(#339994));
  background: linear-gradient(to bottom, #2d8681 0%, #39aca6 60%, #b3e6e3 90%, #339994 100%);
}
.green:after {
  background: -webkit-gradient(linear, left top, left bottom, from(#53c6c0), to(#79d2ce));
  background: linear-gradient(to bottom, #53c6c0 0%, #79d2ce 100%);
}

.red:before {
  background: -webkit-gradient(linear, left top, left bottom, from(#862d43), color-stop(60%, #ac3956), color-stop(90%, #e6b3bf), to(#99334d));
  background: linear-gradient(to bottom, #862d43 0%, #ac3956 60%, #e6b3bf 90%, #99334d 100%);
}
.red:after {
  background: -webkit-gradient(linear, left top, left bottom, from(#c65370), to(#d2798f));
  background: linear-gradient(to bottom, #c65370 0%, #d2798f 100%);
}

.button-container {
  display: -webkit-box;
  display: flex;
  -webkit-box-align: center;
          align-items: center;
  -webkit-box-pack: center;
          justify-content: center;
  flex-wrap: wrap;
  border: 1px solid rgba(0,0,0,0.5);
  border-radius: 10px 10px 10px 10px;
  background: rgba(0,0,0,0.25);
  box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
  -o-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
  -webkit-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
  -moz-box-shadow: 0 2px 6px rgba(0,0,0,0.5), inset 0 1px rgba(255,255,255,0.3), inset 0 10px rgba(255,255,255,0.2), inset 0 10px 20px rgba(255,255,255,0.25), inset 0 -15px 30px rgba(0,0,0,0.3);
}


.title {
  font-size: 26px;
  font-weight: 500;
  display: block;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.8);
}

.description {
  color: rgba(0, 0, 0, 0.7);
  display: block;
  padding: 5px 0 0 0;
  font-size: 16px;
  font-weight: 500;
  text-shadow: 0.5px 0.5px 1px rgba(255, 255, 255, 0.6);
}

.gloss {
  position: absolute;
  width: 90%;
  height: 30%;
  top: 5px;
  left: 50%;
  -webkit-transform: translate(-50%);
          transform: translate(-50%);
  border-radius: 15px;
  background: -webkit-gradient(linear, left top, left bottom, from(rgba(255, 255, 255, 0.8)), color-stop(10%, rgba(255, 255, 255, 0.6)), to(rgba(255, 255, 255, 0)));
  background: linear-gradient(to bottom, rgba(255, 255, 255, 0.8) 0%, rgba(255, 255, 255, 0.6) 10%, rgba(255, 255, 255, 0) 100%);
}

.container {
 
  padding: 20px 0;
  top:0;
  /* animation: 4s linear infinite hue;
  animation-direction: alternate-reverse; */
}

@keyframes hue {
  to {
    filter: hue-rotate(360deg);
  }
/* 
  0% {
    filter: hue-rotate(36deg);
    -webkit-filter: hue-rotate(36deg);
    
  }
  20% {
    filter: hue-rotate(100deg);
    -webkit-filter:hue-rotate(100deg);
    
  }
  
  50% {
    filter: hue-rotate(200deg);
    -webkit-filter: hue-rotate(200deg);
   
  }
  
  100% {
    filter: hue-rotate(360deg);
    -webkit-filter: hue-rotate(300deg);
   
  } */
}