#wholePage {
    font-family: "poppins", sans-serif;
    display: block;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    background-image: url("registerBackground1.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
}

#navBar {
    text-align: left;
}

#navBar a {
    text-decoration: none;
    font-size: 40px;
    color: white;

    font-family: "Lilita One", serif;
    font-style: normal;

    -webkit-text-stroke: 1.3px brown;
}

#registerParent {
    margin-top: -5%;
    width: 100vw;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
}

#registerPanel {
    font-family: "poppins", sans-serif;
    display: block;
    width: 25%;
    height: 60%;
    border: solid .2px white;
    border-radius: 16px;
    backdrop-filter: blur(25px);

    border-left-width: 3px;
    border-left-color: gray;

    border-bottom-width: 4px;
    border-bottom-color: gray;

    border-right-width: 1px;
    border-right-color: silver;
}

#registerPanel:hover {
    backdrop-filter: blur(5px);
    transform: scale(1.1);
}

#registerPanel {
    transform: scale(1);
    backdrop-filter: 0;
    transition: 0.5s transform ease-in-out, 0.5s backdrop-filter ease-in-out;
}

#registerForm {
    width: 100%;
    height: 100%;
}

#registerLabel {
    padding-top: 35px;
    padding-bottom: 30px;
    text-align: center;

    font-size: 30px;
    color: white;
    font-weight: bold;
}

#firstNameSection, #lastNameSection, #emailSection, #passwordSection, #confirmPasswordSection {
    display: flex;
    justify-content: space-between;
    width: 75%;
    padding-left: 10%;
    padding-bottom: 4%;
    align-items: center;
}

#signUpSection {
    display: flex;
    /* text-align: center; */
    justify-content: center;
}

.nameLabel {
    font-weight: bold;
    color: white;
}

#signUpSection {
    padding-top: 30px;
}
#signUpButton {
    border-radius: 50px;
    padding: 10px;
    width: 50%;
    border: outset 1.5px silver;
    /* background-color: white; */
    background-image: linear-gradient(white, rgb(251, 122, 67), rgb(197, 196, 196));
    cursor: pointer;
    color: black;
    font-weight: bold;
}

#signUpButton:hover {
    border: inset 1.5px silver;
    background-image: linear-gradient(rgb(224, 221, 221), rgb(253, 161, 122), rgb(249, 248, 248));
}

/* //// Toggle Password ///// -->Header*/
.password-wrapper {
    display: flex;
}

.password-wrapper-section {
    padding-right: 5px;
}

.passwordInput, .inputBox {
    flex: 1;
    background-color: transparent;
    border-radius: 16px;
    border-color: white;
    color: white;
    padding-top: 5%;
    padding-bottom: 5%;
    padding-left: 5%;
    padding-right: 15%;
    border: inset 2px white;
}

.visiblePasswordButton {
    background: none;
    border: none;
    cursor: pointer;
    margin-left: -30px;
    z-index: 1;
}


.visiblePasswordButton:active {
    background: none;
}

.passwordInput::placeholder ,.inputBox::placeholder {
    color: silver;
}
/* //// Toggle Password ///// -->Bottom*/














@media (max-width: 768px) {

    #registerPanel {
        font-family: "poppins", sans-serif;
        display: block;
        width: 75%; /* Increased width for better visibility on mobile */
        height: auto; /* Adjust height automatically based on content */
        border: solid 0.2px white;
        border-radius: 16px;
        backdrop-filter: blur(20px); /* Slightly reduce blur for clarity */
        border-left-width: 2px;
        border-left-color: gray;
        border-bottom-width: 3px;
        border-bottom-color: gray;
        border-right-width: 1px;
        border-right-color: silver;
        padding: 10px; /* Add padding for better spacing inside */
    }

    #registerForm {
        width: 100%; /* Ensure form fills container */
        height: auto; /* Let form height adjust dynamically */
    }

    #firstNameSection, 
    #lastNameSection, 
    #emailSection, 
    #passwordSection, 
    #confirmPasswordSection {
        width: 90%; /* Full width for input sections */
        justify-content: space-between; /* Align content to the left for better flow */
        margin-bottom: 6px; /* Add spacing between sections */
        padding-left: 15px;
    }

    .nameLabel {
        font-size: 14px; /* Reduce label font size for smaller screens */
        color: white;
         /* Add spacing between label and input */
    }

    .passwordInput, .inputBox {
        flex: 1;
        background-color: transparent;
        border-radius: 16px;
        border-color: white;
        color: white;
        padding: 10px; /* Adjust padding for better touch targets */
        font-size: 14px; /* Reduce font size for inputs */
        border: inset 2px white;
    }

    #signUpSection {
        padding-top: 20px;
        justify-content: center;
    }

    #signUpButton {
        border-radius: 50px;
        padding: 10px;
        width: 70%; /* Increase width for better usability */
        font-size: 16px; /* Adjust font size for readability */
        border: outset 1.5px silver;
        /* background-color: white; */
        background-image: linear-gradient(white, rgb(251, 122, 67), white);
        cursor: pointer;
        color: black;
    }

    #signUpButton:hover {
        border: inset 1.5px silver;
        background-image: linear-gradient(rgb(224, 221, 221), rgb(253, 161, 122), rgb(249, 248, 248));
    }

    #navBar a {
        font-size: 30px; /* Reduce font size of navigation links */
    }

    .passwordInput {
        margin-left: 25px;
        border: inset 2px white;
    }
}