/* Ensure the body has no margin */
/* General body styling */
body {
  /* 1. Set the image URL */
  background-image: url('../images/abstract2.png'); /* was */
  
  /* 1b. Position the image: X-pos Y-pos */
    /* This centers it horizontally and pushes it 50px down from the top */
    background-position: center 50px; 

  /* 2. Set the width to 100% and height to auto to maintain aspect ratio */
  background-size: 100% auto;

  /* 3. Prevent the image from tiling/repeating */
  background-repeat: no-repeat;
  
  /* 4. (Optional) Align the image to the top */
  background-position: center top; 
  
  /* Make the body a flex container */
    display: flex;
    justify-content: center; /* Center horizontally */
    align-items: center;    /* Center vertically */
    
    /* Ensure the body takes up the full viewport height */
    min-height: 100vh;
    margin-topwas: 240px; 
	margin: 0; /* Remove default body margin */
	
}

html {
  font-size: 14px; /* Setting a new root font size so fontsize will be relative to this */
}


#formContainer{
	display:none;
}


/* Keypad container */
.keypad {
    display: grid;
    /* Creates a 3-column grid */
    grid-template-columns: repeat(3, 1fr);
    gap: 5px; /* Space between buttons */
    padding: 20px;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
	width:160px;
}

/* Individual key styling */
.key {
    width: 50px;
    height: 50px;
    border-radius: 0%; /* 50 Makes buttons circular */
    border: none;
    background-color: #e4e6eb;
    cursor: pointer;
    display: flex;
    flex-direction: column; /* Stacks number and letters vertically */
    justify-content: center;
    align-items: center;
    transition: background-color 0.2s ease;
    -webkit-tap-highlight-color: transparent; /* Removes tap highlight on mobile */
}

/* Hover and active states for feedback */
.key:hover {
    background-color: #c1dcff;
}

.key:active {
    background-color: #cdd0d5;
}

/* Style for the main number */
.key-number {
    font-size: 28px;
    font-weight: 400;
    color: #050505;
    line-height: 1; /* Reduces extra spacing */
}

/* Style for the small letters */
.key-letters {
    font-size: 10px;
    font-weight: 600;
    color: #606770;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

/* Styling for the backspace button */
.key-special {
    background-color: transparent; /* No background */
}
/* Hide background change on hover/active for special keys */
.key-special:hover,
.key-special:active {
    background-color: transparent;
}

#pwd {
  text-align: center;
  
  /* Set a font size of at least 16px to prevent iOS auto-zoom */
  font-size: 14px; 

  /* Add padding for a larger tap area and more space inside */
  padding: 6px 7px; /* 12px on top/bottom, 15px on left/right */

  /* Make the input take up the full width of its container */
  width: 200px;

  /* Ensures padding and border are included in the total width */
  box-sizing: border-box; 
  
  /* Optional: Add a subtle border and rounded corners */
  border: 0px solid #cccccc;
  border-radiuswas: 8px;
  
  background-color:white;
}
.inputpasswordContainer {
	margin-top:3px;
}

  /* This is the main styling for the button */
  .gradient-button {
    margin-top:3px;
	
	/* 1. The Gradient Background */
    background: linear-gradient(to bottom, #003366, #007bff); /* Dark blue to light blue */

    /* 2. Styling the Text */
    color: white;
    font-size: 1.5rem;
    font-weight: bold;
    font-family: sans-serif;

    /* 3. Button Shape and Spacing */
    border: none;
	width:200px;
    border-radius: 8px; /* Rounded corners */
    padding: 5px 0px; /* Vertical and horizontal padding */
    cursor: pointer; /* Changes the mouse cursor to a hand on hover */

    /* 4. Smooth transition for the hover effect */
    transition: background 0.3s ease-in-out;
  }

  
  .submitButtonContainer {
	  margin-top:0px;
	  width:170px;
	  text-align:center;
  }