@font-face {
    font-family: 'Open Sans';
    src: url('fonts/OpenSans.ttf') format('truetype');
    font-weight: normal;
    font-style: normal;
}

body {
    font-family: 'Open Sans', 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.slider::-webkit-slider-thumb {
            -webkit-appearance: none;
            appearance: none;
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #3b82f6;
            cursor: pointer;
        }
        
        .slider::-moz-range-thumb {
            width: 24px;
            height: 24px;
            border-radius: 50%;
            background: #3b82f6;
            cursor: pointer;
        }
        
        .password-strength-meter {
            height: 8px;
            border-radius: 4px;
            transition: width 0.3s ease;
        }
        
        .copy-btn:hover .copy-icon {
            transform: scale(1.1);
        }
        
        .copy-icon {
            transition: transform 0.2s ease;
        }
        
        .tooltip {
            visibility: hidden;
            opacity: 0;
            transition: opacity 0.3s, visibility 0.3s;
        }
        
        .tooltip-visible {
            visibility: visible;
            opacity: 1;
        }
        
        /* Password strength colors */
        .strength-weak {
            background-color: rgba(239, 68, 68, 0.1);
            border-color: rgb(239, 68, 68);
        }
        
        .strength-medium {
            background-color: rgba(245, 158, 11, 0.1);
            border-color: rgb(245, 158, 11);
        }
        
        .strength-strong {
            background-color: rgba(34, 197, 94, 0.1);
            border-color: rgb(34, 197, 94);
        }
        
        #generated-password {
            transition: color 0.3s ease;
        }
        
        .bg-white.border.border-gray-300 {
            transition: all 0.3s ease;
        }

.glass-box {
  position: relative;
  font-family: sans-serif;
  width: 11.875em;
  height: 7em;
  padding: 1rem;
  background-color: rgba(255, 255, 255, 0.074);
  border: 1px solid rgba(255, 255, 255, 0.222);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-radius: 0.7rem;
  transition: all ease 0.3s;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  align-items: center;
}

.glass-box .scan-title {
  font-size: 1rem;
  font-weight: 500;
  letter-spacing: 0.1em;
  color: white;
}

.glass-box:hover {
  box-shadow: 0px 0px 20px 1px #ffbb763f;
  border: 1px solid rgba(255, 255, 255, 0.454);
}