@font-face {
   font-family: "IranSans";
   src: url("IranSans.ttf");
   font-weight: normal;
   font-style: normal;
}

@layer base {
   html {
      font-size: 14px; 
   }
}

* {
   font-family: "IranSans", sans-serif;
}


body {
   background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
}

.glass-effect {
   background: rgba(26, 26, 26, 0.8);
   backdrop-filter: blur(10px);
   border: 1px solid rgba(255, 255, 255, 0.1);
}

.connection-pulse {
   animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

@keyframes pulse {
   0%,
   100% {
      opacity: 1;
   }
   50% {
      opacity: 0.5;
   }
}

.video-container {
   position: relative;
   width: 100%;
   height: 100vh;
}

#remoteVideo {
   width: 100%;
   height: 100%;
   object-fit: cover;
}

#localVideo {
   position: absolute;
   bottom: 20px;
   right: 20px;
   width: 200px;
   height: 150px;
   border-radius: 12px;
   border: 2px solid rgba(255, 255, 255, 0.2);
   object-fit: cover;
   box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}

@media (max-width: 640px) {
   #localVideo {
      width: 120px;
      height: 90px;
      bottom: 10px;
      right: 10px;
   }
}

.notification-permission-btn {
   animation: shake 0.5s;
}

@keyframes shake {
   0%,
   100% {
      transform: translateX(0);
   }
   25% {
      transform: translateX(-10px);
   }
   75% {
      transform: translateX(10px);
   }
}