* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

img {

    object-fit: contain;
    width: 100%;

}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background: linear-gradient(135deg, #1e3c72 0%, #2a5298 100%);
    min-height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    overflow: hidden;
}

.login-container {
    background: rgba(255, 255, 255, 0.95);
    padding: 35px;
    border-radius: 15px;
    box-shadow: 0 15px 35px rgba(0, 0, 0, 0.3);
    width: 650px;
    position: relative;
}


h2 {
text-align: center;
color: #333;
margin-bottom: 30px;
}

.input-group {
margin-bottom: 20px;
}

label {
display: block;
margin-bottom: 5px;
color: #555;
font-size: 14px;
}

input {
width: 100%;
padding: 12px;
border: 2px solid #ddd;
border-radius: 8px;
font-size: 14px;
transition: border-color 0.3s;
}

input:focus {
outline: none;
border-color: #2a5298;
}

.cloudy-background-simple {
    background: radial-gradient(ellipse at 55% 32%, rgba(255, 255, 255, 0.6) 0%, transparent 40%),
    radial-gradient(ellipse at 75% 60%, rgba(240, 245, 250, 0.5) 0%, transparent 45%),
    radial-gradient(ellipse at 40% 80%, rgba(255, 255, 255, 0.4) 0%, transparent 35%),
    linear-gradient(to bottom right, #c5d8ed, #2b5a9e, #4a7ab8);
}

.cloudy-background-textured {
  background: 
    radial-gradient(circle at 20% 30%, rgba(200, 213, 227, 0.4) 0%, transparent 50%),
    radial-gradient(circle at 80% 70%, rgba(184, 201, 219, 0.3) 0%, transparent 50%),
    linear-gradient(135deg, #e8ecf1 0%, #d4dde8 100%);
}



    .spider-container {
      position: absolute;
      top: -28px;
      left: 50%;
      transform: translateX(-50%);
      pointer-events: none;
    }

    .web-string {
      width: 2px;
      background: linear-gradient(to bottom, 
        rgba(200, 200, 200, 0.8), 
        rgba(200, 200, 200, 0.3));
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
      transition: height 0.3s ease-out;
      height: 0;
    }

    .spider {
      position: absolute;
      top: 0;
      left: 50%;
      transform: translateX(-50%);
      transition: top 0.3s ease-out, left 0.3s ease-out;
      width: 140px;
      height: 90px;
    }

    .spider.idle {
      animation: spiderIdle 4s ease-in-out infinite;
    }

    @keyframes spiderIdle {
      0%, 100% {
        transform: translateX(-50%) rotate(0deg);
      }
      25% {
        transform: translateX(-45%) rotate(-3deg);
      }
      50% {
        transform: translateX(-50%) rotate(0deg);
      }
      75% {
        transform: translateX(-55%) rotate(3deg);
      }
    }

    .spider-body {
      width: 60px;
      height: 45px;
      background: #000;
      border-radius: 50%;
      position: absolute;
      top: 22px;
      left: 40px;
      z-index: 2;
      animation: bodyBounce 2s ease-in-out infinite;
    }

    @keyframes bodyBounce {
      0%, 100% {
        transform: translateY(0px);
      }
      50% {
        transform: translateY(-2px);
      }
    }

    .eye-container {
      position: absolute;
      top: 12px;
      left: 12px;
      display: flex;
      gap: 8px;
      z-index: 3;
    }

    .eye {
      width: 16px;
      height: 16px;
      background: white;
      border-radius: 50%;
      position: relative;
      overflow: hidden;
    }

    .pupil {
      width: 7px;
      height: 7px;
      background: #000;
      border-radius: 50%;
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
      animation: pupilMove 3s ease-in-out infinite;
    }

    @keyframes pupilMove {
      0%, 100% {
        transform: translate(-50%, -50%);
      }
      25% {
        transform: translate(-70%, -50%);
      }
      75% {
        transform: translate(-30%, -50%);
      }
    }

    .eyelid {
      position: absolute;
      top: -20px;
      left: 0;
      width: 100%;
      height: 100%;
      background: #000;
      transition: top 0.1s ease-in-out;
    }

    .eye.blinking .eyelid {
      top: 0;
    }

    .legs {
      position: absolute;
      width: 100%;
      height: 100%;
      z-index: 1;
    }

    svg {
      position: absolute;
      width: 100%;
      height: 100%;
      overflow: visible;
    }

    .leg-path {
      animation: legWiggle 2s ease-in-out infinite;
      transform-origin: center;
    }

    .leg-path:nth-child(1) { animation-delay: 0s; }
    .leg-path:nth-child(2) { animation-delay: 0.25s; }
    .leg-path:nth-child(3) { animation-delay: 0.5s; }
    .leg-path:nth-child(4) { animation-delay: 0.75s; }
    .leg-path:nth-child(5) { animation-delay: 0s; }
    .leg-path:nth-child(6) { animation-delay: 0.25s; }
    .leg-path:nth-child(7) { animation-delay: 0.5s; }
    .leg-path:nth-child(8) { animation-delay: 0.75s; }

    @keyframes legWiggle {
      0%, 100% {
        transform: translateY(0px);
      }
      50% {
        transform: translateY(-1px);
      }
    }