*,*::before,*::after{box-sizing:border-box}body,h1,h2,h3,h4,p,figure,blockquote,dl,dd{margin:0}ul[role="list"],ol[role="list"]{list-style:none}html:focus-within{scroll-behavior:smooth}body{min-height:100vh;text-rendering:optimizeSpeed;line-height:1.5}a:not([class]){text-decoration-skip-ink:auto}img,picture{max-width:100%;display:block}input,button,textarea,select{font:inherit}@media(prefers-reduced-motion:reduce){html:focus-within{scroll-behavior:auto}*,*::before,*::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important;scroll-behavior:auto !important}}


/* Start of styling for the Login Page */
body#loginBody{
    /*
    background-image: 
        linear-gradient(rgb(1, 80, 1) 0%, 
        rgba(1, 80, 1) 18%, 
        rgba(255, 255, 255, 0) 80%), 
        url("../images/lb-ext.jpg");
    background-size: cover;
    background-repeat: no-repeat;
    */
    background-color: rgb(253, 250, 241);
    height: 100vh;
    margin: 0;
    font-family: Arial, Helvetica, sans-serif;
    color: rgb(52, 63, 30);
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 50px;
}

.loginContainer {
    width: 100%;
    height: 100%;
    background-color: rgb(227, 233, 216);
}
/* For the header */
.loginHeader {
    text-align: center;
    margin-bottom: 60px;
    margin-top: 90px;
}
.loginHeader h1 {
    font-size: 80px;
    padding: 0%;
    margin: 0%;
    /* text-shadow: 1px 1px 2px black, 0 0 5px green; */
}
.loginHeader p {
    font-size: 25px;
    margin: 0%;
    display: inline-block;
}
.loginHeader p:after {
    content: '';
    display: block;
    height: 3px;
    background: rgb(52, 63, 30);
    border-radius: 3px;
    margin: 0 auto;
    margin-top: 7px;
}

/* For the container of the body */
.loginBody form{
    margin: 0 auto;
    width: 45%;
    background: rgba(0,0,0,.5);
    padding: 2%;
    border: 3px solid rgb(52, 63, 30);
    border-radius: 5px;
}

/* For the input fields */
.loginInputContainer {
    margin-top: 2%;
}
.loginInputContainer label {
    display: block;
    font-size: 20px;
    margin-left: 5px;
    text-transform: uppercase;
    color: rgb(255, 255, 255);
}
.loginInputContainer input {
    width: 98%;
    border: 2px solid rgb(119, 119, 119);
    padding: 5px;
    display: inline-block;
    margin-bottom: 2%;
    border-radius: 5px;
    font-size: 15px;
}

/* For the login button */
.loginButtonContainer {
    margin-top: 2%;
    text-align: center;
}
.loginButtonContainer button {
    padding: 8px 20px;
    font-size: 15px;
    border-radius: 5px;
    font-weight:bold;
    
}
.loginButtonContainer button:hover {
    background-color: rgb(112, 163, 9);
}
.loginButtonContainer button:active {
    background-color: rgb(1, 80, 1);
    color: white;
}

/* For the error message */
#logMessage {
    text-align: center;
    color: rgb(196, 10, 10);
    padding: 20px;
    font-size: 20px;
}