html{
        background:linear-gradient(to right bottom,black,#0084FF);
        /*   filter:hue-rotate(100deg);   */
    }
	body {
      margin: 0;
      padding: 0;
      font-family: 'Vazirmatn', sans-serif;
      background:radial-gradient(#00071D,#191919,black);
      /*
      background-image: url("https://cdn.imgurl.ir/uploads/h723966_bg_edit_94735509946481.jpg");
      background-repeat: no-repeat;
      background-attachment: fixed;
      background-position: top-right;
      */
      color: white;
      text-align: center;
	  user-select: none;
      transition: all 10s ease;
      text-direction: rtl;
      opacity: 0;
    }
    .layer1{
        postion:absolute;
        z-index: 10;
    }
    .layer2{
        postion:absolute;
        z-index: 1;
    }
    body.show{
        opacity:1;
    }
    header {
      padding: 40px 20px 20px;
    }
    .img {
      background: #82FAFF;
      width: 160px;
      border-radius: 200px;
      box-shadow: 0 0 20px #82FAFF;
      transition: all 2s ease;
      animation: img 7s infinite;
    }
    
    .img:hover{
         filter:contrast(110%) hue-rotate(270deg) invert(20%) opacity(100%) saturate(150%); 
      background: #FF7DE5 ;
      box-shadow: 0 0 20px #FF7DE5 ;
    }
    @keyframes img{
        0% {transform: scale(1) perspective(400px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) ;}
        25% {transform: scale(1.3) perspective(400px) rotateX(180deg)  rotateZ(180deg) scale(1.1) ;}
        50% {transform: scale(1)}
        100% {transform: scale(1) perspective(400px) rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
    }
    .title.show,.blue.show,.button.show{
       opacity: 1;
       transform: scale(1) translateY(0px);
    }
    .title {
        opacity: 0;
        transform: scale(0.5) translateY(-100px);
      margin-top: 20px;
      font-size: 30px;
      text-shadow: 0px 2px 0px gray;
      animation: title 5s infinite;
    }
    @keyframes title{
        0% {text-shadow: 0px 2px 0px #003FCF;transform: perspective(400px) rotateX(15deg);color:#CFFAFF;}
        25% {color:white;}
        50% {text-shadow: 0px -2px 0px #1B00FF;transform: perspective(400px) rotateX(-15deg);color:#CFFAFF;}
        75% {color:white;}
        100% {text-shadow: 0px 2px 0px #003FCF;transform: perspective(400px) rotateX(15deg);color:#CFFAFF;}
    }
    .gray{
      transition: all 2s ease; 
    }
    .gray:active{
       transform: scale(0) skewX(80deg) perspective(400px) rotateX(180deg);
       opacity: 0;
    }
    h6 {
      font-size: 1em;
      color: gray;
      text-shadow: 0px 0px 2px black;
    }
    p {
      font-size: 1.2em;
      margin-bottom: 30px;
    }
    .button {
        opacity: 0;
        transform: scale(0.5) translateY(-100px);

      display: inline-block;
      width: 130px;
      margin: 10px;
      padding: 15px 30px;
      background: #000000;
      background: linear-gradient(to right, #00CCFF, #00FCFF, #00CCFF);
      color: black;
      text-decoration: none;
      border-radius: 10px;
      font-weight: bold;
      border: 3px ridge #1F00D4;
      transition: transform 0.5s;
      box-shadow: 0px 0px 15px blue;
    }
    .button:hover {
      transform: perspective(400px) rotateX(25deg) rotateZ(10deg) scale(1.3);
      background: #00C0FF;
      filter: hue-rotate(100deg);
    }
    .blue {
        opacity: 0;
        transform: scale(0.5) translateY(-100px);

      font-size: 1.2em;
      margin-bottom: 30px;
      font-weight: bold;
      color: #00ECFF;
      text-shadow: 2px 0px 2px brown;
      transition: transform 1s;
      animation: blue 2s infinite;
    }
    @keyframes blue{
        0% {text-shadow: 2px 2px 3px #0039FF;}
        25% {text-shadow: -2px 2px 3px #006CFF }
        50% {text-shadow: -2px -2px 3px #0039FF ;}
        75% {text-shadow: 2px -2px 3px #006CFF ;}
        100% {text-shadow: 2px 2px 3px #0039FF;}
    }
    .blue:hover{
      transform : scale(1.10);
      filter: hue-rotate(30deg);
    }
    .box{
        opacity: 0;
        background-color: #00DDFF;
        color: black;
        border-radius: 20px;
        box-shadow: 0px 5px 10px #00DDFF;
        text-shadow: 0px 1px 1px;
        text-align: center;
        transition: all 2s ease;
        margin: 20px;
        margin-top: 50px;
        padding: 20px;
  	  user-select: text;
        transform: perspective(400px) translateY(100px) rotateX(180deg) scale(0);
    }
    .box:hover{
        filter:hue-rotate(360deg) invert(0%);
        color: #00DDFF;
        background-color: rgba(100,100,100,0.2);
        box-shadow: 0px 10px 0px rgba(200,200,200,0.2);
        border-radius: 10px;
    }
    .box:active{
        filter:hue-rotate(360deg) invert(100%);
    }
    .box.show {
	  opacity: 1;
      transform: perspective(400px) translateY(0px) rotateX(0deg) scale(1);
          }