*{
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
}

body{
   height: 100vh;
   display: flex;
   justify-content: center;
   align-items: center;
   background: linear-gradient(to left top, #0f0e0d, #33322f, #585953, #7d847c, #a3b2aa);
   color: #ffffff;
   font-weight: 400;
}


.container{

    border: 0.5px solid #ffffff;
    border-radius: 10px;
    padding: 28px 32px;
    display: flex;
    flex-direction: column;
    background: transparent;
    box-shadow: 6px 6px 12px rgba(15, 14, 13, 0.8),-4px -4px 8px rgba(163, 178, 170, 0.3); 
}

.container h1 {
  font-size: 2rem;
  margin-block: 14px;
  font-weight: 800;
  text-align: center;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: #e5e7eb; 
  text-shadow: 
      0 0 2px #d1d5db,
      0 0 4px #9ca3af;
  animation: flicker 2s infinite alternate;
}

@keyframes flicker {
  0%   { opacity: 1; text-shadow: 0 0 2px #f3f4f6, 0 0 4px #d1d5db; }
  50%  { opacity: 0.85; text-shadow: 0 0 1px #d1d5db, 0 0 3px #9ca3af; }
  100% { opacity: 1; text-shadow: 0 0 2px #ffffff, 0 0 4px #d1d5db; }
}


.inputbox {
    position: relative; 
}

.inputbox span {
  position: absolute;
  top: 29px;
  right: 12px;
  font-size: 22px;
  cursor: pointer;
  color: #dcdcdc;   
  transition: all 0.3s ease;
  user-select: none;
}


.inputbox span:hover {
  color: #ffffff;
  text-shadow: 0 0 6px rgba(200, 220, 220, 0.6);
  transform: scale(1.1);
}

.inputbox span:active {
  color: #b0b0b0;
  text-shadow: 0 0 3px rgba(255, 255, 255, 0.4);
  transform: scale(0.95);
}



.passbox {
  background: rgba(255, 255, 255, 0.05);  
  border: 1px solid #9ca3af;              
  padding: 14px 16px;
  width: 100%;
  border-radius: 8px;
  font-size: 20px;
  margin-block: 12px;

  color: #e5e7eb;                         
  text-align: center;                     
  letter-spacing: 2px;                    

  backdrop-filter: blur(6px);             
  box-shadow: 
    0 0 8px rgba(15, 14, 13, 0.6),
    0 0 12px rgba(163, 178, 170, 0.25);
  transition: all 0.3s ease;
}

.passbox:hover {
  border: 1px solid #d1d5db;
  box-shadow: 
    0 0 12px rgba(229, 231, 235, 0.5),
    0 0 20px rgba(255, 255, 255, 0.15);
}

.row{
    display: flex;
    margin-block: 8px;
}

.row p,label{

    flex-basis: 100%;
    font-size: 18px;
}

.row input[type="checkbox"]{
    width: 20px;
    height: 20px;
}

.gnbtn {
  border: none;
  outline: none;
  color: #f1f1f1;
  background: linear-gradient(135deg, #4a6b82, #2c619e);
  padding: 14px 28px;
  font-size: 18px;
  margin-block: 12px;
  font-weight: 700;
  cursor: pointer;
  border-radius: 8px;

  letter-spacing: 1px;
  text-transform: uppercase;
  transition: all 0.3s ease;
  box-shadow:
    0 0 4px rgba(0,0,0,0.4),
    0 0 6px rgba(200, 220, 220, 0.2);
}

.gnbtn:hover {
  background: linear-gradient(135deg, #5a7a90, #2c619e);
  box-shadow:
    0 0 6px rgba(230, 230, 230, 0.25),   
    0 0 12px rgba(255, 255, 255, 0.08);  
  transform: translateY(-2px) scale(1.02);
}

.gnbtn:active {
  transform: translateY(0) scale(0.98);
  box-shadow:
    0 0 4px rgba(230, 230, 230, 0.2),
    0 0 8px rgba(255, 255, 255, 0.06);
}