*{overflow-x: hidden;max-width:100%;-webkit-tap-highlight-color: transparent; }
    html{
        background:linear-gradient(to left,black,#003040);
         /*filter:hue-rotate(150deg); */
        position:relative;
        z-index: 0;
        height: 100%;
		margin: 0;
		padding: 0;
        scroll-behavior: smooth;
    }
	body {
        box-shadow: inset 0 0 20px black;
      display:relative;
      /*flex-direction: column;*/
      align-items:center;
      justify-content: center;
      margin: 0;
      padding: 0;
      max-width:100%;
      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;
    }
    .content{
       /* position:absolute;
        top:0;
        left:5%;*/
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content: center;
      width: 100%;
    }
    .column{
      width:100%;
      display:flex;
      flex-direction:column;
      align-items:center;
      justify-content: center;
    }
    .bg{
      position: fixed;
      top: 0;
      left: 0;
      min-width: 100%;
      height: 100%;
      z-index: -1;
      pointer-events: none;
    }
    body.show{
        opacity:1;
    }
    header {
      padding: 40px 20px 20px;
    }
    .img {
	  margin-top: 20px;
	  z-index: 11;
	  width: 160px;
	  height: 160px;
	  border-radius: 50%;
	  box-shadow: 0 0 10px black;
	  /* Gradient بزرگتر از عنصر */
	  background: linear-gradient(90deg, #82FAFF, #FF6060 ,#FF6060, #82FAFF);
	  background-size: 200% 200%; /* اندازه بزرگتر برای حرکت */
	  background-position: 0% 0%; /* شروع */
      animation: img 10s infinite;
	  transition: background-position 2s ease, border-radius 2s ease;
	}

	.img:hover {
	  /* تغییر موقعیت background برای حس حرکت زاویه */
	  background-position: 100% 100%;
	  border-radius: 10%;
	}
    @keyframes img{
        0% {transform: perspective(400px) rotateX(0deg) rotateY(0deg) rotateZ(0deg) ;}
        30% {transform: perspective(400px) rotateZ(10deg) rotateY(18deg) translateY(-10px);}
        70% {transform: perspective(400px) rotateY(20deg) translateY(10px);}
        100% {transform: 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 10s infinite;
    }
    @keyframes title{
        0% {text-shadow: 0px 2px 0px #00BBFF;transform: perspective(400px) rotateX(15deg);color:#CFFAFF;}
        25% {color:white;}
        50% {text-shadow: 0px -2px 3px #00BBFF;transform: perspective(400px) rotateX(-15deg);color:#CFFAFF;}
        75% {color:white;text-shadow: 0px -2px 5px #00BBFF;}
        100% {text-shadow: 0px 2px 0px #00BBFF;transform: perspective(400px) rotateX(15deg);color:#CFFAFF;}
    }
.gray {
  font-weight: bold;
  background: linear-gradient(135deg, #222 0%, #555 50%, #777 100%);
  -webkit-background-clip: text;
  background-clip: text; text-shadow:0 0 5px #eaeaff;
  -webkit-text-fill-color: transparent;
  background-size: 200% 200%;
  animation: gradientShift 3s ease-in-out infinite;
} @keyframes gradientShift { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }
    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: block;
      backdrop-filter: blur(3px) brightness(120%);
        will-change: backdrop-filter;
      background: linear-gradient(to right, rgba(255,255,255,0.2), rgba(255,255,255,0.1), rgba(255,255,255,0.2));
      width: 130px;
      margin: 10px;
      padding: 15px 30px;
      /*background: linear-gradient(to right, #22FEFF, #00FCFA, #00CCFA);*/
      color: #55EAFF;
      text-decoration: none;
      border-radius: 10px;
      font-weight: bold;
      /*border: 3px groove #0050AA;*/
      transition: transform 0.5s;
      box-shadow: 0px 5px 25px rgba(100,200,255,0.5);
    }
    @keyframes button {
        0%{filter: hue-rotate(360deg);}
        50%{filter: hue-rotate(50deg);}
        100%{filter: hue-rotate(360deg);}
    }
    .button:hover {
      transform: scale(1.3);
      animation:button 3s infinite;
    }
    .button:active{
      transform: scale(0.8);
    }
    .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.05);
      filter: hue-rotate(-10deg);
    }
    .box{
        backdrop-filter: blur(3px);
        opacity: 0;
        background-color: #00DDFF;
        color: black;
        max-width:70%;
        min-width:70%;
        font-size:18px;
        border-radius: 20px;
        box-shadow: 0px 5px 10px #00DDFF;
        text-shadow: 0px 1px 1px;
        text-align: center;
        transition: all 2s ease;
        margin-top: 50px;
        padding: 5%;
  	  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);
    }
    .box:active{
        filter:hue-rotate(360deg) invert(100%);
    }
    /*.box.show {
	  opacity: 1;
      transform: perspective(400px) translateY(0px) rotateX(0deg) scale(1);
	}*/
    .right{
      margin-left:20%;
      border-top-right-radius: 0px;
      border-bottom-right-radius: 0px;
      border-left:5px solid #00aaff;
      transform: translateX(100px) skew(30deg) perspective(400px) rotateY(-30deg);
    }
    .right.show,.left.show{
      opacity:1;
      transform: translateX(0px) perspective(400px) rotateY(0deg);
    }
    .left{
      margin-right:20%;
      border-top-left-radius: 0px;
      border-bottom-left-radius: 0px;
      border-right:5px solid #00aaff;
      transform: translateX(-100px) perspective(400px) rotateY(-30deg);
    }
    .footer-gradient{
      width: 100%;
      height: 100px;
      background: linear-gradient(to top, black,rgba(0,0,0,0.5), rgba(0,0,0,0));
    }
    
    #video,#freeman{
      width:80%;
      margin-top:20px;
      margin-bottom:60px;
      z-index:99999;
      border-radius:20px;
      background: rgba(0,0,0,0.5);
      padding:20px;
      backdrop-filter:blur(5px) saturate(30%);
      box-shadow: 0 0px 10px rgba(0,0,0,0.5);
      transition: all 0.5s ease;
    }
    #video:hover,#freeman:hover{
      box-shadow: 0 5px 10px black;
      transform:scale(1.1) translateY(20px);
    }
    
.half{  z-index:10;  pointer-events: none;  position: fixed;  backdrop-filter: hue-rotate(120deg) brightness(110%);  width:50%;  height:150vh;  top:0;  right:0;  transform: translateX(100px); transition:all 4s ease;}
.half.show{  transform: translateX(0px);  }
.half2{   position:fixed;   width:100%;  height:100vh; background: linear-gradient(to right,rgba(0,0,0,0.8),black);  box-shadow: -10px 0px 5px black; text-align:center;  z-index:2000;  transition:all 3s ease;}
.half2.show{transform:translateX(120%)}

.dark{
  box-shadow: inset 0px 0px 30px black;
  backdrop-filter:saturate(0%) blur(4px);
  padding-top:20px; display:flex;flex-direction:column;align-items:center;
}
.wbwwb{margin:20px;display: block;width:50%;border-radius:10px;animation: wbwwb 7s infinite;}
@keyframes wbwwb{0%{transform:perspective(1000px) rotateX(0) rotateY(0) rotateZ(0) translateY(0) scale(1);box-shadow:0 10px 20px black,inset 0 0 10px black;}25%{transform:perspective(1000px) rotateX(15deg) rotateY(45deg) rotateZ(-5deg) translateY(-20px) scale(1.05);box-shadow:0 25px 50px rgba(66,133,244,1),inset 0 0 0 5px rgba(66,133,244,1);}50%{transform:perspective(1000px) rotateX(-10deg) rotateY(-30deg) rotateZ(5deg) translateY(10px) scale(0.98);box-shadow:0 0px 30px rgba(9,8,55,1),inset 0 0 0 2px rgba(219,68,55,0.1);}75%{transform:perspective(1000px) rotateX(5deg) rotateY(35deg) rotateZ(-3deg) translateY(-10px) scale(1.02);box-shadow:0 20px 40px rgba(5,7,8,1),inset 0 0 0 3px rgba(15,157,88,0.1);}100%{transform:perspective(1000px) rotateX(0) rotateY(360deg) rotateZ(0) translateY(0) scale(1);box-shadow:0 10px 20px rgba(0,0,0,1),inset 0 0 0 0 rgba(66,133,244,0);}}