.container{
    flex: 1; /* Make the container fill the available height */
    display: flex;
    flex-direction: column;
    height:100%;
}

h2{
    color:transparent;  
}
.authentication-page{
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width:100%;
    height:70vh;
    font-family: cloud;
    color: #71bbe9; 
    text-shadow: 
    10px 10px 10px black,  /* Horizontal and vertical shadow */
    -10px -10px 10px black,  /* Top-left shadow */
    10px -10px 10px black,  /* Bottom-left shadow */
    -10px 10px 10px black;  /* Top-right shadow */
}

.authentication-box{
    align-items: center;
    justify-content: center;
    flex-direction: column;
    text-align: center;
    padding:50px;
    border-radius: 20px;
    background-color: #13132a;
    opacity:0.7;
    box-shadow: 0 0 20px black;
    border: 1px solid #6f4099;
}

form{
    display:flex;
    flex-direction: column ;
}

.authentication-page form{
    display: flex;
    justify-content: center;
    align-items: center;
}

.authentication-button{
    position: relative;
    margin-top: 20px;
    border-radius: 15px;
    background-image: radial-gradient(ellipse at center, #9069b2 20%,black);

    color: #eb5497;
    padding:5px 40px;
    border: solid black 2px;
    box-shadow: 0 0 10px black;
    text-shadow: 
    1px 1px 1px black,  /* Horizontal and vertical shadow */
    -1px -1px 1px black,  /* Top-left shadow */
    1px -1px 1px black,  /* Bottom-left shadow */
    -1px 1px 1px black;  /* Top-right shadow */
}

.authentication-button::before{
    padding:5px 40px;
    border-radius: inherit;
    position: absolute;
    background-image: radial-gradient(ellipse at center,black 20%, #6f4099 );
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-size: cover;
    opacity: 0; /* Initially hidden */
    transition: opacity 0.3s ease;
}

input{
    border-radius: 5px;
    box-shadow: 0 0 10px black;
}

.sign-up-page input{
    margin:10px 0px;
}



label{
    text-shadow: 
    1px 1px 1px black,  /* Horizontal and vertical shadow */
    -1px -1px 1px black,  /* Top-left shadow */
    1px -1px 1px black,  /* Bottom-left shadow */
    -1px 1px 1px black;  /* Top-right shadow */
}
.authentication-button:hover::before{
    opacity:1;
}

.sign-up-link{
    margin-top:20px;
}

body::before {
    content: "";
      position: fixed; /* Keeps the background fixed in place */
      top: 0;
    left: 0;  
    width: 100%;
    height: 100%;
    opacity: 0.2;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    z-index: -1;
    pointer-events: none; /* Ensures background doesn't interfere with content */
  }