.body-content {
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    margin: 0;
    /* background: url('../images/homepagebg.jpeg');
    background-size: cover; */
    background: linear-gradient(to bottom, 
    var(--clr-primary) 0%, 
    var(--clr-surface) 100%
  ); 

}

.body-content::before {
  content: ""; /* Required for pseudo-elements */
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; /* Makes the pseudo-element cover the entire container */
  /* background-color: rgba(from var(--clr-primary) r g b / 55%);
  backdrop-filter: blur(4px);
  z-index: 1; /* Ensures the overlay is on top of the background image */
} 

.body-content > * {
  position: relative;
  z-index: 2; /* Higher z-index than the overlay */
  margin-bottom: 5vh
}

.joinus-content {
    display: flex;
    justify-content: center;
    /* align-items: center; */
    height: 100vh;
    margin:0;
    padding-top: 5vh;
    background: url('../images/homepagebg.jpeg');
    background-size: cover;

}

.joinus-content::before {
  content: ""; /* Required for pseudo-elements */
  top: 0;
  left: 0;
  right: 0;
  bottom: 0; /* Makes the pseudo-element cover the entire container */
  background-color: #0b4550be; /* Black overlay with 50% opacity */
  z-index: 1; /* Ensures the overlay is on top of the background image */
}

.joinus-content > * {
  position: relative;
  z-index: 2; /* Higher z-index than the overlay */
  margin-bottom: 5vh
}

.login-container {
    z-index:1;
    position: relative;
    width: 40%;
    height: 40vh; 
    background-color: #ffffff;
    /* border: 1px solid #ccc; */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    border-radius: 15px;
    overflow: scroll; 
    margin-bottom: 2vh;
    /* margin: 5vw; */
}
.joinus-container {
    z-index:1;
    position: relative;
    width: 40%;
    /* height: 40vh;  */
    background-color: #ffffff;
    border: 1px solid #ccc;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    text-align: center;
    border-radius: 15px;
    margin-bottom: 2vh;
    max-height: max-content;
    /* margin: 5vw; */
}

@media (max-width: 1080px) {
    .login-container {
        width: 90%;
        height: 50vh;
        /* height: 40vh; */
	    /* border-radius: 0; */
        box-shadow: none;
    }
    .joinus-container {
        width: 90%;
        /* max-height: 50vh; */
        /* height: 40vh; */
	    /* border-radius: 0; */
        box-shadow: none;


    }
}

@media (max-width:480px){
    .joinus-container {
        width: 90%;
        /* height: 80vh; */
        /* height: 40vh; */
	    /* border-radius: 0; */
        box-shadow: none;

    }
}

.login-header {
    padding: 15px; 
    background-color: var(--clr-primary);
    /* height: 128px; */
    color: var(--clr-on-secondary);
    border-radius: 15px 15px 0px 0px;
    margin-bottom: 2vh;
}

.login-header * {
    color: var(--clr-on-primary);
}


.login-comm-header {
    padding: 20px; 
    background: url(../images/blackboard.jpg);
    color: white;
    border-radius: 15px 15px 0px 0px;
    margin-bottom: 2vh;
}

.login-content-container {
    padding: 15px 30px 15px 30px; 
    text-align: left; 
}

.login-right-align-container {
    display: flex;
    justify-content: space-between;
    align-items: center; 
    margin-bottom: 2vh;
}

.login-input {
    border-radius: 5px;
    height: 40px;
    width: 60%;
    padding: 8px; 
    border: 1px solid #ccc; 
}

.login-btn {
    background: url(/static/images/blackboard.jpg);
    padding: 8px;
    font-size: 25px;
    color: white;
    border-radius: 8px;
    border: none; 
    cursor: pointer; 
    transition: transform 0.3s ease; 
}

.login-btn:hover {
    background: rgba(0, 0, 0, 0.6); 
    transform: scale(1.05); 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); 
}