.App {
  text-align: center;
}

@media (prefers-reduced-motion: no-preference) {
  .App-logo {
    max-width: 50%; /* Ensures the logo doesn't overflow the container */
    height: auto; /* Maintain the aspect ratio */
    max-height: 300px; /* Limit maximum height */
    pointer-events: none;
    
    /* Center the image horizontally and vertically */
    display: block;
    margin-left: auto;
    margin-right: auto;
  }
}

.App-header {
  background-color: #081E3F;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* Move content up */
  padding-top: 30px; /* Adjust this value as needed */
  font-size: calc(10px + 2vmin);
  color: white;
}

.App-link {
  color: #61dafb;
}

@keyframes App-logo-spin {
  from {
    transform: rotate(0deg);
  }
  to {
    transform: rotate(360deg);
  }
}

/* #081E3F for navy blue and #B6862C for gold. */
/* insert by me */
/* Centering all content on the page */
.App-page {
    background-color: #081E3F; /* navy blue */
    display: flex;
    flex-direction: column;
    align-items: center; /* Horizontally center the elements */
    height: 100vh; /* Full height of the viewport */
}

/* Styling for the title */
.App-header-page h1 {
  font-family: Roboto;
  font-style: bold;
  margin-bottom: 0px;
  font-size: 3rem;
  color: #FFFFFF;
  
  /* Center horizontally */
  text-align: center;
  
  /* Optional: If you want to center it vertically within its container */
  display: flex;
  justify-content: center;
  align-items: center;
}

/* Styling for the welcome message */
.welcome p {
    font-family: Roboto;
    font-size: 1.5rem;
    margin-bottom: 0px;
    color: #FFFFFF;
}
/* Styling for the sign-up message */
.signup p {
    font-family: Roboto;
    font-size: 1.2rem;
    color: #FFFFFF;
}

/* Styling for the "Sign Up" link */
.signup a {
    color: #B6862C; /* Orange color for the link */
    text-decoration: none;
}

.signup a:hover {
    text-decoration: underline; /* Underline the link on hover */
}

/* Styling for the form */
.form {
    display: flex;
    flex-direction: column;
    width: 300px; /* You can adjust the width of the form */
    margin-bottom: 10px;
}

.form label {
    margin-bottom: 5px;
    font-family: Roboto;
    font-size: 1rem;
}

.form input {
    padding: 10px;
    font-size: 1rem;
    margin-bottom: 15px;
    border-radius: 5px;
    border: 1px solid #ccc;
}

/* Styling for the "Remember me" checkbox and forgot password link */
.form-options {
  display: flex;
  flex-direction: column;
  margin-bottom: 20px;
  align-items: center; /* Horizontally center the items */
  justify-content: center; /* Vertically center the items */
}

.remember-me {
  display: flex; /* Use flex to align checkbox and label horizontally */
  align-items: center; /* Vertically center the checkbox and label */
}

.remember-me label {
  margin-left: 5px; /* Small gap between checkbox and label */
  font-size: 14px;
  color: #FFFFFF;
  white-space: nowrap; /* Prevent label from breaking into two lines */
}

.forgot-password a {
    font-family: Roboto;
    font-size: 14px;
    text-decoration: none;
    color: #B6862C; /* orange */
}

.forgot-password a:hover {
    text-decoration: underline;
}

/* Sign In Button Styling */
.signin-button button {
    display: flex;
    align-items: center;
    justify-content: left;
    width: 300px;
    padding: 10px;
    background-color: #B6862C;
    color: #081E3F;
    font-family: Roboto;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    font-size: 1rem;
    cursor: pointer;
}

.signin-button button:hover {
    background-color: #FFF; /* white */
}

.signin-button button svg {
    margin-right: 95px; /* Space between the lock icon and text */
    color: #081E3F;
}

/* Error message styling */
.error {
  color: red;
  margin-bottom: 10px;
  text-align: center;
}