* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    font-family: 'AGaramondPro-Regular', 'garamond', serif; /* Use the same font family */
}



  body {
  margin-left: 8%;
  margin-right: 8%;
  margin-top: 0;
  margin-bottom: 0;
  background-color: black;
  font-family: 'AGaramondPro-Regular', 'garamond', serif;
  color: white;
  display: flex;
  justify-content: center;
  align-items: center;
  min-height: 100vh;
  font-size: 15px;
  line-height: 19px;
  font-weight: 25;
}

/* When the page is loaded, the button fades in */
body.loaded button {
    opacity: 1;
    filter: blur(0); /* Remove blur */
}

@font-face {
    font-family: 'AGaramondPro-Regular';
    src: url("../fonts/AGaramondPro-Regular.woff2") format("woff2"),
         url("../fonts/AGaramondPro-Regular.woff") format("woff"),
         url("../fonts/AGaramondPro-Regular.ttf") format("truetype");
         font-style: normal;
         font-stretch: normal;
}

@font-face {
    font-family: 'AGaramondPro-Italic';
    src: url("../fonts/AGaramondPro-Italic.woff2") format("woff2"),
         url("../fonts/AGaramondPro-Italic.woff") format("woff"),
         url("../fonts/AGaramondPro-Italic.ttf") format("truetype");
         font-style: normal;
         font-stretch: normal;
}

@font-face {
    font-family: 'AGaramondPro-Bold';
    src: url("../fonts/AGaramondPro-Bold.woff2") format("woff2"),
         url("../fonts/AGaramondPro-Bold.woff") format("woff"),
         url("../fonts/AGaramondPro-Bold.ttf") format("truetype");
         font-style: normal;
         font-stretch: normal;
}


/* Global button style */
button {
    all: unset;
    /* padding: 10px 20px; /* Adjust padding */ */
    font-family: 'AGaramondPro-Regular', 'garamond', serif; /* Ensure same font family */
    font-size: 24px; /* Ensure font size is the same */
    font-weight: 400; /* Ensure font weight is consistent */
    line-height: 19px;
    cursor: pointer;
    text-transform: none; /* No text-transform */
    background: none; /* No background */
    border: none; /* No border */
    color: white; /* Text color */
    display: inline-block;
    transition: opacity 0.3s ease, filter 0.3s ease;
    opacity: 0; /* Start as invisible */
    filter: blur(10px); /* Start with a blur effect */
}

/* Container for the login form */
.login-container {
    position: fixed;
    top: 50%; /* Center vertically */
    left: 50%;
    transform: translate(-50%, -50%); /* Center horizontally */
    width: 42vw; /* Same width as aside */
    z-index: 4; /* Above other content */
    pointer-events: all;
    opacity: 0; /* Start as invisible */
    filter: blur(10px); /* Start with a blur effect */
    transition: opacity 1s ease-in-out, filter 1s ease-in-out; /* Smooth fade-in effect */
}

@media screen and (max-width: 800px) {
.login-container {
  width: calc(100% - 16vw);
  margin-left: 8vw;
  margin-right: 8vw;
  left: 0;
  transform: translateX(0);
}
}

/* When the page is loaded, fade in the button */
body.loaded .login-container {
    opacity: 1;
    filter: blur(0); /* Remove blur */
}

/* Same transition and styles for button and input */
body.loaded .login-form input,
body.loaded .login-form button {
    opacity: 1;
    filter: blur(0); /* Remove blur */
}



.login-form {
    display: flex;
    flex-direction: row;  /* Keep the input and button on the same line */
    align-items: center;  /* Ensure vertical alignment */
    justify-content: space-between;
}

/* Input Field */
.login-form input {
    background: none;
    border: none;
    color: white;
    font-size: 24px; /* Match font size of aside */
    font-weight: 400; /* Ensure same font weight as aside */
    text-align: left;
    outline: none;
    width: 200px;
    font-style: italic;  /* Italicize the placeholder */
    opacity: 0; /* Start as invisible */
    filter: blur(10px); /* Start with a blur effect */
    transition: opacity 1.2s ease-in-out, filter 1.2s ease-in-out; /* Fade in and remove blur */
    line-height: 19px;
}

/* Submit Button (No padding, matching font weight) */
.login-form button {
    all: unset;
    font-family: 'AGaramondPro-Regular', 'garamond', serif; /* Same font family */
    font-size: 24px; /* Same as input and aside font size */
    font-weight: 400; /* Same font weight */
    line-height: 19px;
    cursor: pointer;
    color: white;
    display: inline-block;
    background: none;
    border: none;
    text-align: center;
    vertical-align: middle;
    transition: opacity 0.3s ease, filter 0.3s ease;
    opacity: 0; /* Start as invisible */
    filter: blur(10px); /* Start with a blur effect */
    word-spacing: -1px;
    font-stretch: 100%;
    font-style: normal;
}


/* CSS for changing the placeholder color */
@keyframes placeholderFade {
    0% { color: #950606; }
    100% { color: rgba(255, 255, 255, 0.7); }  /* Fade to an opaque white (slightly gray) */
}

/* Apply smooth transition to placeholder color */
input::placeholder {
    color: rgba(255, 255, 255, 0.7); /* Initial opaque white */
    transition: color 0.5s ease-in-out;  /* Smooth transition for color change */
}

/* Focus state to prevent animation while focused */
input:focus::placeholder {
    color: rgba(255, 255, 255, 0.7); /* Make sure it stays the same color when focused */
    animation: none; /* Ensure animation doesn't apply when focused */
}

/* Apply the invalid class animation (red color on invalid input) */
input.invalid::placeholder {
    color: #940e00; /* Red color when the password is incorrect */
}




.info-container {
  position: fixed;
  left: 20px;
  bottom: 20px;
  z-index: 1000;
}

.info-icon {
  font-style: italic;
  font-size: 24px;
  color: rgba(128, 128, 128, 0.5); /* 50% grey */
  cursor: pointer;
  user-select: none;
}

.contact-info {
  display: none;
  position: absolute;
  left: 40px; /* Make it appear to the right of the "i" */
  width: auto;
  bottom: 0;
  background-color: rgba(0, 0, 0, 0.8);
  color: white;
  opacity: 0;
  filter: blur(10px);
  transition: opacity 0.5s ease-in-out, filter 0.5s ease-in-out;
  overflow: hidden;
  white-space: nowrap; /* Prevent text from wrapping */
  text-overflow: ellipsis; /* Add ellipsis (...) if text is too long */
}

.contact-info p {
  text-align: left; /* Adjust to left alignment for one-line */
  font-size: 15px;
  line-height: 19px;
  font-weight: normal;
  font-style: normal;
  margin: 0;
}

.contact-info a {
  color: white;
  text-decoration: none;
}

.contact-info a:hover {
  text-decoration: underline;
}


p {
  text-align: justify;
  font-style: normal;
  font-stretch: normal;
  font-weight: normal;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  font-size: 15px;
  line-height: 19px;
  word-spacing: -1px;
}


/* For screens with max-width 450px */
@media screen and (max-width: 450px) {
  p {
    font-size: 14px !important;
    line-height: 17.8px !important;
  }
}

/* For screens with max-width 400px */
@media screen and (max-width: 400px) {
  p {
    font-size: 12px !important;
    line-height: 15.6px !important;
  }
}

/* For screens with max-width 375px */
@media screen and (max-width: 375px) {
  p {
    font-size: 10px !important;
    line-height: 13px !important;
  }
}