@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&display=swap');
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Karla:ital,wght@0,200..800;1,200..800&display=swap');

body {
  margin: 0;
  padding: 0;
  font-family: "Karla", "DM Sans", "Helvetica", Arial, sans-serif;
  font-size: 1.4rem,
  color: black;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  text-align: center;
  background-image: url('../assets/images/bg2-min.jpg');
  background-size: cover;  /* The image will fill the entire screen */
  background-position: center center;  /* Keep it centered */
  background-repeat: no-repeat;
}

.container {
    text-align: center;
    padding: 2rem 3rem;
    max-width: 600px;
    width: 90%;
    box-sizing: border-box;
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* vertically center content */
    margin: 0 auto;
}

.main-content {
  background-color: rgba(255, 255, 255, 0.0);  /* White background with 80% opacity (adjust the 0.8 for more or less transparency) */
  padding: 10px;  /* Adds padding around the content */
  border-radius: 15px;  /* Rounds the corners of the container */
  /* box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1); */ /* Optional: Adds a subtle shadow for better visibility */
}

.text-container {
    font-size: 0.95rem;
}

.text-container a {
  position: relative;
  text-decoration: none;
  color: #0074D9; /* keep your link color */
}

.text-container a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px; /* adjust distance from text */
  height: 2px;
  width: 0;
  background-color: currentColor; /* underline uses the link's text color */
  transition: width 0.3s ease;
}

.text-container a:hover::after {
  width: 100%;
}

.logo {
  display: block;
  margin-left: auto;
  margin-right: auto;
  min-width: 300px;
  height: auto;
  margin-bottom: 1.5rem;
  width: 80%;
}

/* General header styling */
.header-container {
  padding: 10px 20px;
  text-align: right;
}


.header-container.authenticated {
  border-color: #000; /* Border color visible when user is authenticated */
}

/** Link animation header **/
.link {
   /* RESET */
   text-decoration: none;
   line-height: 1;
   position: relative;
   z-index: 0;
   display: inline-block;
   padding: 5px 5px;
   overflow: hidden;
   color: #333;
   vertical-align: bottom;
   transition: color .3s ease-out;
}

.link::before {
   content: "";
   position: absolute;
   z-index: -1;
   top: 0;
   left: 0;
   transform: translateY(calc(100% - 2px));
   width: 100%;
   height: 100%;
   background-image: linear-gradient(60deg, #64b3f4 0%, #c2e59c 100%);
   transition: transform .25s ease-out;
}

.link:hover { 
   color: #fff; 
}
.link:hover::before {
   transform: translateY(0);
   transition: transform .25s ease-out;
}

/** General footer styling **/
.footer {
  font-size: 0.9rem;
  color: #fff;
  text-align: center;
  width: 100%;
  padding: 10px 0;
  /* border-top: 1px solid #ddd; */
  /* stays at bottom because body is flex container with min-height: 100vh */
}

.footer a {
  position: relative;
  text-decoration: none;
  color: #ffffff; /* keep your link color */
}

.footer a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px; /* adjust distance from text */
  height: 2px;
  width: 0;
  background-color: currentColor; /* underline uses the link's text color */
  transition: width 0.3s ease;
}

.footer a:hover::after {
  width: 100%;
}

/* Responsive tweaks */
@media (max-width: 480px) {
  .logo {
    min-width: 180px;
    margin-bottom: 1rem;
  }
}