body {
  background-color: #f8f9fa;
}

.container
{
    display: flex;
    width: 100%;
    height: 100vh; /* يجعل المحتوى يأخذ ارتفاع الشاشة بالكامل */
    justify-content: center;
    align-items: center;
    margin: 0;
}

.login {
  width: 100%;
  max-width: 400px;
  background-color: white;
  border-radius: 15px;
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.login-container {
  padding: 25px;
}

.triangle-left {
  width: 0;
  height: 0;
  border-top: 20px solid #ffffff; /* اللون */
  border-right: 20px solid transparent;
  transform: rotate(-90deg);
  position: absolute;
  left: 0px;
  bottom:0px;
}

.triangle-right {
  width: 0;
  height: 0;
  border-top: 20px solid #ffffff; /* اللون */
  border-right: 20px solid transparent;
  transform: rotate(180deg);
  position: absolute;
  right: 0px;
  bottom:0px;
}

.effect{
  position:fixed;
  font-size:40px;
  opacity:0;
  pointer-events:none;
  animation:fly 1.4s ease-out forwards;
  z-index:999999;
}

.paper{
  position:fixed;
  width:16px;
  height:16px;
  opacity:0;
  border-radius:4px;
  animation:fly 1.4s ease-out forwards;
  z-index:999999;
}

@keyframes fly{
  0%{
    opacity:1;
    transform:translate(0,0) scale(1);
  }
  100%{
    opacity:0;
    transform:translate(var(--x), var(--y)) scale(1.8) rotate(var(--r));
  }
}