body {
    /* Background image is centered vertically and horizontally */ 
    font-family: Arial, Helvetica, sans-serif;
    font-size: larger;
    color: rgb(0, 0, 0); /*font*/
    background-color: grey;
    background-position: center center; 
    background-repeat: no-repeat; 
    background-attachment: fixed; 
    background-size: cover; 
}

h4 {margin: 20px 0 0 0;}

.rhIcon {
  height: 30px;
  border-radius: 50%;
}


/*------------------------------------------------------*/
/* Signup Page */
.signup_body {
    color: #fff;
    background-image: url("../images/bg_signup.jpg");  
    background-color: grey;    
} 
.signup_box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    padding: 15px;
    background:rgba(0, 0, 0,.7);
    box-sizing: border-box;
    box-shadow: 0 15px 25px rbga(0, 0, 0,.5);
    border-radius: 10px;
}
.signup_box h1 {
    margin: 0 0 20px;
    padding: 0;
    font-family: 'Arial Narrow';
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    color: #223c53;
    text-shadow:
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;  
}
.signup_box h2 {
    color: #fff;
    text-align: center;
}
.signup_box h5 {
    color: #fff;
    text-align: center;
}
.signup_box .signup_input {
    position: relative;
}
.signup_box .signup_input input {
    width: 100%;
    padding: 10px 0;
    font-size: 22px;
    color: #fff;
    letter-spacing: 1px;
    margin-bottom: 30px;
    border: none;
    outline: none;
    border-bottom: 1px solid #faf0e4;
    background: transparent;
}
.signup_box .signup_input label {
    font-family: 'Arial Narrow';
    text-transform: uppercase;
    position: absolute;
    top: 0px;
    left: 0px;
    letter-spacing: 1px;
    padding: 10px 0;
    font-size: 16px;
    color: #fff;
    pointer-events: none;  
    transition: .5s;  
}
.signup_box .signup_input input:focus ~ label,
.signup_box .signup_input input:valid ~ label {
    top: -18px;
    left: 0;
    color: #e26a59;
    font-size: 12px;
}
.signup_box input[type="submit"] {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    background: #88292f;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}
.signup_err_msg {
    background: red;
    font-size: 18px;
    font-style: italic;
}


/*------------------------------------------------------*/
/* Login Page */
.login_body {
    color: #fff;
    text-shadow: 1px 1px 1px #000;
    background-color: grey;
    background-position: center top;   
    text-shadow: 1px 1px 1px #000;
    background-image: url("../images/bg_login.jpg");
}
.login_box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 350px;
    padding: 15px;
    background:rgba(0,0,0,0.7);
    box-sizing: border-box;
    box-shadow: 0 15px 25px rbga(0,0,0,0.5);
    border-radius: 10px;
}
.login_box h1 {
    margin: 0 0 20px;
    padding: 0;
    font-family: 'Arial Narrow';
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    color: #9d2411;
    text-shadow:
    -1px -1px 0 #fff,
    1px -1px 0 #fff,
    -1px 1px 0 #fff,
    1px 1px 0 #fff;  
}
.login_box h2 {
    color: #fff;
    text-align: center;
}
.login_box h5 {
    color: #fff;
    text-align: center;
}
.login_box .login_input {
    position: relative;
}
.login_box .login_input input {
    width: 100%;
    padding: 10px 0;
    font-size: 20px;
    color: #fff;
    letter-spacing: 1px;
    margin-bottom: 30px;
    border: none;
    outline: none;
    border-bottom: 1px solid #faf0e4;
    background: transparent;
}
.login_box .login_input label {
    font-family: 'Arial Narrow';
    text-transform: uppercase;
    position: absolute;
    top: 0px;
    left: 0px;
    letter-spacing: 1px;
    padding: 10px 0;
    font-size: 16px;
    color: #fff;
    pointer-events: none;  
    transition: .5s;  
}
.login_box .login_input input:focus ~ label,
.login_box .login_input input:valid ~ label {
    top: -18px;
    left: 0;
    color: #e26a59;
    font-size: 12px;
}
.login_box input[type="submit"] {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    background: #88292f;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}
.login_err_msg {
    background: red;
    font-size: 18px;
    font-style: italic;
}
a.login_pg:link {
    padding: 10px 15px;
    background-color: rgba(214, 237, 245, 0);
    color: #e6f1db;
    display: inline-block;
    text-shadow: 1px 1px 2px #33473f;
}
a.login_pg:visited {
    color: #e6f1db;
}
a.login_pg:hover {
    color: #f2be6a;
}
a.login_pg:active {
    color: #ce7594;
}


/*------------------------------------------------------*/
/* Forgot Password Page */
.forgot_pass_body {
    color: rgb(0, 0, 0); /*font*/
    text-shadow: 1px 1px 1px maroon;
    background-position: center top;   
    background-image: url("../images/bg_forgot_pass.jpg");  
}
.forgot_pass_box {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    padding: 40px;
    background:rgba(255,255,255,0.8);
    box-sizing: border-box;
    box-shadow: 0 15px 25px rbga(0,0,0,0.5);
    border-radius: 10px;
}
.forgot_pass_box h1 {
    margin: 0 0 20px;
    padding: 0;
    font-family: 'Arial Narrow';
    font-weight: bold;
    text-align: center;
    text-transform: uppercase;
    color: #9d2411;
    text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;  
}
.forgot_pass_box input {
    position: relative;
}
.forgot_pass_box .forgot_pass_input input {
    width: 100%;
    padding: 0px 0;
    font-size: 20px;
    color: #000;
    letter-spacing: 1px;
    margin-bottom: 30px;
    border: none;
    outline: none;
    border-bottom: 1px solid #000;
    background: transparent;
}
.forgot_pass_box input[type="submit"] {
    background: transparent;
    border: none;
    outline: none;
    color: #fff;
    background: #88292f;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}


/*------------------------------------------------------*/
/* Profile Page */
.profile_body {
    color: #59e4d6;
    background-color: #014d43;
    background-image: url("../images/bg_profile.jpg");  
    text-shadow: 2px 2px 12px #9ae8e0;
    background-position: right center; 
}
.profile_box {
    font-family: 'Arial';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 400px;
    padding: 30px;
    background:rgba(40,55,60,0.7);
    box-sizing: border-box;
    border-radius: 10px;
}
.profile_box h2 {
    margin: 0 20px;
    padding: 0;
    font-weight: bold;
    text-transform: uppercase;
    color: #59e4d6;

    overflow: hidden; /* Ensures the content is not revealed until the animation */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 0 auto; /* Gives that scrolling effect as the typing happens */
    animation: typing 1.5s steps(15, end), blink-caret .1s step-end infinite;
}    
.profile_box dd {
    margin: 0 0 20px;
    padding: 0;
    text-align: left;
    color: #59e4d6;

    overflow: hidden; /* Ensures the content is not revealed until the animation */
    white-space: nowrap; /* Keeps the content on a single line */
    margin: 0 0 auto; /* Gives that scrolling effect as the typing happens */
    animation: typing 2s steps(15, end), blink-caret 1.5s step-end infinite;
}
/* The typing effect */
@keyframes typing {
    from { width: 0 }
    to { width: 100% }
}
/*------------------------------------------------------*/
/* Admin Users Page */
.admin_users_body {
    color: #59e4d6;
    background-color: #014d43;
    background-image: url("../images/bg_profile.jpg");  
    text-shadow: 2px 2px 12px #9ae8e0;
    background-position: right center; 
}
.admin_users_box {
    font-family: 'Arial';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 30px;
    color: #59e4d6;
    background:rgba(40,55,60,0.7);
    box-sizing: border-box;
    border-radius: 10px;
}
.admin_users_box h1 {
    margin: 0 0px;
    padding: 0;
    font-weight: bold;
    text-transform: uppercase;
}
.admin_users_box table th {
    text-transform: uppercase;
    padding: 0 20px 0 0;
}
.admin_users_box table td {
    vertical-align: top;
    padding: 0 20px 0 0;
}
hr {
    border-width:1px; 
    border-style:inset; 
    width:100%;
    border-color: #59e4d6;
    border-style: dotted;
}
a.admin_users_link:link {
    background-color: rgba(214, 237, 245, 0);
    color: #59e4d6;
}
a.admin_users_link:visited {
    color: #59e4d6;
}
a.admin_users_link:hover {
    color: #f00;
    text-shadow: 2px 2px 12px #f08f8f;
}
a.admin_users_link:active {
    color: #f00;
    text-shadow: 2px 2px 12px #f08f8f;
}




/*------------------------------------------------------*/
/* Code Links Page */
.body_links_code { 
    /* Image Location */ 
    background-image: url("../images/bg_links_code.jpg"); 
    color: #fff;
} 
h1.code {
    font-weight: bold;
    text-shadow: 1px 1px 2px #000000;
} 
h4.code {
    font-weight: bold;
    text-shadow: 1px 1px 2px #1c035f;
} 
a.code_pg_links:link {
    background-color: rgba(214, 237, 245, 0);
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 2px #0c038b;
}
a.code_pg_links:visited {
    color: cyan;
}
a.code_pg_links:hover {
    color: yellow;
}
a.code_pg_links:active {
    color: cyan;
}


/*------------------------------------------------------*/
/* English Links Page */
.body_links_en { 
    /* Image Location */ 
    background-image: url("../images/bg_links_en.jpg");
    color: #fff; 
} 
a.en_pg_links:link {
    color: white;
}
a.en_pg_links:visited {
    color: #c7f11c;
}
a.en_pg_links:hover {
    color: #eff31a;
}
a.en_pg_links:active {
    color: #f1b28d;
}

/*------------------------------------------------------*/
/* Afrikaans Links Page */
.body_links_af { 
    /* Image Location */ 
    background-image: url("../images/bg_links_cy.jpg");
    color:white;
} 
a.af_pg_links:link {
    padding: 10px 15px;
    background-color: #43333e;
    border: 2px solid #fede95;
    border-radius: 5px;
    color: white;
    font-weight: bold;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    display: inline-block;
}
a.af_pg_links:visited {
    color: #fede95;
}
a.af_pg_links:hover {
    color: black;
    border: 2px solid #2c1913;
    background-color: rgba(255, 175, 104, 0.2);
    transition-duration: 0.7s;
}
a.af_pg_links:active {
    color: #fa4008;
    border: 2px solid #2c1913;
    background-color: rgba(255, 175, 104, 0.2);
}

/*------------------------------------------------------*/
/* German Page */
.body_links_de { 
    /* Image Location */ 
    background-image: url("../images/bg_links_de.jpg");
    color: rgb(255, 255, 255);
    text-shadow: 1px 1px 2px #1c035f;
}
a.de_pg_links:link {
    color: white;
}
a.de_pg_links:visited {
    color: #14bbee;
}
a.de_pg_links:hover {
    color: white;
    background-color: rgba(214, 237, 245, 0.2);
}
a.de_pg_links:active {
    color: #f6eec7;
    background-color: rgba(245, 58, 7, 0.7);
}


/*------------------------------------------------------*/
/* Irish Links Page */
.body_links_ir { 
    /* Image Location */ 
    background-image: url("../images/bg_links_ir.jpg");
    color:white;
    font-weight: bold;
} 
a.ir_pg_links:link {
    color: white;
    text-shadow: 1px 1px 10px white;    
}
a.ir_pg_links:visited {
    color: aqua;
    text-shadow: 1px 1px 10px white;
}
a.ir_pg_links:hover {
    color: greenyellow;
    text-shadow: 1px 1px 12px black;
    text-decoration: none;
}
a.ir_pg_links:active {
    color: orangered;
    text-shadow: 1px 1px 12px black;
    text-decoration: none;
}



/*------------------------------------------------------*/
/* Latin Page */
.body_links_la { 
    /* Image Location */ 
    background-image: url("../images/bg_links_la.jpg"); 
    color: #fff; 
} 
h1.latin {
    font-weight: bold;
    text-shadow: 1px 1px 2px #000000;
} 
h4.latin {
    font-weight: bold;
    text-shadow: 1px 1px 2px #1c035f;
} 
a.la_pg_links:link {
    background-color: rgba(214, 237, 245, 0);
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 2px #0c038b;
}
a.la_pg_links:visited {
    color: cyan;
}
a.la_pg_links:hover {
    color: yellow;
}
a.la_pg_links:active {
    color: cyan;
}



/*------------------------------------------------------*/
/* Ancient Greek Links Page */
.body_links_ag { 
    /* Image Location */ 
    background-image: url("../images/bg_links_ag.jpg"); 
    color:#ffffff;
}
h1.ag {
    font-weight: bold;
    text-shadow: 1px 1px 2px #33473f;
} 
h4.ag {
    font-weight: bold;
    text-shadow: 1px 1px 2px #33473f;
} 
a.ag_pg_links:link {
    background-color: rgba(214, 237, 245, 0);
    color: white;
    font-weight: bold;
    display: inline-block;
    text-shadow: 1px 1px 2px #33473f;
}
a.ag_pg_links:visited {
    color: #fede95;
}
a.ag_pg_links:hover {
    color: #c7f0e0;
}
a.ag_pg_links:active {
    color: rgb(247, 136, 9);
}



/*------------------------------------------------------*/
/* Welsh Links Page */
.body_links_cy { 
    /* Image Location */ 
    background-image: url("../images/bg_links_cy.jpg");
    color:white;
} 
a.cy_pg_links:link {
    padding: 10px 15px;
    background-color: #43333e;
    border: 2px solid #fede95;
    border-radius: 5px;
    color: white;
    font-weight: bold;
    box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2), 0 6px 20px 0 rgba(0,0,0,0.19);
    display: inline-block;
}
a.cy_pg_links:visited {
    color: #fede95;
}
a.cy_pg_links:hover {
    color: black;
    border: 2px solid #2c1913;
    background-color: rgba(255, 175, 104, 0.2);
    transition-duration: 0.7s;
}
a.cy_pg_links:active {
    color: #fa4008;
    border: 2px solid #2c1913;
    background-color: rgba(255, 175, 104, 0.2);
}



/*------------------------------------------------------*/
/* Math Links Page */
.body_links_math { 
    /* Image Location */ 
    background-image: url("../images/bg_links_math.jpg"); 
    color: #fff;
} 
a.math_pg_links:link {
    color: white;
}
a.math_pg_links:visited {
    color: orangered;
}
a.math_pg_links:hover {
    color: #f9dd55;
}
a.math_pg_links:active {
    color: orange;
}



/*------------------------------------------------------*/
/* Antique Math Links Page */
.body_links_antmath { 
    /* Image Location */ 
    background-image: url("../images/bg_links_antmath.jpg");
    color:#fff; 
} 
h1.antmath {
    color: rgb(224, 42, 42); 
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
} 
h4.antmath {
    color:  #fff;
    font-weight: bold;
    text-shadow: 2px 2px 2px  rgb(224, 42, 42); 
} 
a.antmath_pg_links:link {
    padding: 10px 15px;
    background-color: rgba(214, 237, 245, 0);
    color: white;
    font-weight: bold;
    display: inline-block;
    text-shadow: 1px 1px 2px #33473f;
}
a.antmath_pg_links:visited {
    color: #c7f0e0;
}
a.antmath_pg_links:hover {
    color: #fede95;
}
a.antmath_pg_links:active {
    color: rgb(247, 136, 9);
}




/*------------------------------------------------------*/
/* Illustration Links Page */
.body_links_illus { 
    /* Image Location */ 
    background-image: url("../images/bg_links_illus.jpg"); 
    color: #d1f1df;
} 
h1.illus {
    font-weight: bold;
    text-shadow: 1px 1px 2px #000000;
} 
h4.illus {
    font-weight: bold;
    text-shadow: 1px 1px 2px #ffffff;
} 
a.illus_pg_links:link {
    padding: 10px 15px;
    background-color: rgba(214, 237, 245, 0);
    color: #e6f1db;
    font-weight: bold;
    display: inline-block;
    text-shadow: 1px 1px 2px #33473f;
}
a.illus_pg_links:visited {
    color: #000000;
}
a.illus_pg_links:hover {
    color: #f2be6a;
}
a.illus_pg_links:active {
    color: #ce7594;
}



/*------------------------------------------------------*/
/* Plant Links Page */
.body_links_plants { 
    /* Image Location */ 
    background-image: url("../images/bg_links_plants.jpg");
    color: #05690a; 
} 
h1.plants {
    font-weight: bold;
    text-shadow: 1px 1px 2px #000000;
} 
h4.plants {
    font-weight: bold;
    text-shadow: 1px 1px 2px #ffffff;
} 
a.plants_pg_links:link {
    padding: 10px 15px;
    background-color: rgba(214, 237, 245, 0);
    color: #c7f0e0;
    font-weight: bold;
    display: inline-block;
    text-shadow: 1px 1px 2px #33473f;
}
a.plants_pg_links:visited {
    color: #fede95;
}
a.plants_pg_links:hover {
    color: #e41313;
}
a.plants_pg_links:active {
    color: rgb(247, 136, 9);
}