* {
    	box-sizing: border-box;
    	font-family: -apple-system, BlinkMacSystemFont, "segoe ui", roboto, oxygen, ubuntu, cantarell, "fira sans", "droid sans", "helvetica neue", Arial, sans-serif;
    	font-size: 16px;
}
:root {
    --clr-white: rgb(255, 255, 255);
    --clr-black: rgb(0, 0, 0);
    --clr-light: rgb(245, 248, 255);
    --clr-light-gray: rgb(196, 195, 196);
    --clr-blue: rgb(63, 134, 255);
    --clr-light-blue: rgb(171, 202, 255);
    --dhs-green: rgb(0, 100, 0);
    --dhs-gold: rgb(255, 192, 0);
    --clr-black: rgb(0, 0, 0);
}

body {  background: url("img/lights2a-pixabay.jpg") no-repeat center; background-size:cover; margin:0; padding:0; color:black; min-height:100vh; display:flex; flex-direction:column; justify-content:flex-start; align-items:center; line-height:1.5rem;  }
.wrap-banner { width:100%; display:flex; flex-direction:column; justify-content:center; align-items:center; background:white; margin:.5rem 0 0; }


/**********************************/
/* LOGIN AND REGISTRATION FORMS   */
/**********************************/
.login,
.register {	width: 400px; background-color: #ffffff; box-shadow: 0 0 9px 0 rgba(0, 0, 0, 0.3); margin: 100px auto;}

.login h3,
.register h3 { text-align: center; color: #5b6574; padding: 20px 0 20px 0; border-bottom: 1px solid #dee0e4;}

.login form,
.register form { display: flex; flex-wrap: wrap; justify-content: center; padding-top: 20px; }

.login form label,
.register form label { display:flex; justify-content:center; align-items:center; width:50px; height:50px; background-color:green; color:#ffffff;}

.login form input[type="password"],
.login form input[type="text"],
.register form input[type="password"],
.register form input[type="text"],
.register form input[type="email"]  {
   	width: 310px; height: 50px;	border: 1px solid #dee0e4; margin-bottom: 20px; padding: 0 15px;
}
.login form input[type="submit"],
.register form input[type="submit"]  {
   	width:100%; padding:15px; margin-top:20px; background-color:green; border:0; cursor:pointer; font-weight: bold;color: #ffffff; transition:background-color 0.2s;
}
.login form input[type="submit"]:hover,
.register form input[type="submit"]:hover {
    background-color: #00C200; transition: background-color 0.2s;
}
/**************************************************/
/*  ADMINISTRATION PLAYER PAGE                    */
/**************************************************/
.navtop { width:100%; display:flex; flex-direction:row; flex-wrap:wrap; justify-content:space-around; align-items:center; padding:0;  }
.navtop a:hover {color:var(--dhs-gold);}
.navtop i { margin-right:10px;}

.admintitle { width:60%; text-align:center; padding:0; margin:0; white-space:nowrap; font-weight:bolder; }
.wlogout { width: 50%; text-align:center; }

.editdel { width:90%; display:flex; flex-direction:row; justify-content:space-between;    }
.addbtn, .editbtn {  background:var(--dhs-green); color:white; border:none; border-radius:14px; padding:.5em 1em; text-decoration:none; margin:4px 2px; cursor:pointer; white-space:nowrap;
}
.addbtn:hover, .editbtn:hover { background: var(--dhs-gold); color:black; }
.admin-pic { width:100%; display: flex; flex-direction: column; justify-content:flex-start; align-items:center; background:white;}
.admin-pic img { height:19em; }
.admin-card { background-color: #fff; max-width:330px; min-width:330px; height:auto; display: flex; flex-direction: column; justify-content:flex-start; align-items:center; overflow: hidden; border-radius: 2rem; box-shadow: 0px 1rem 1.5rem rgba(0,0,0,0.5); margin:.3rem; padding:0 0 1rem; }
.admin-card .bannerfill { width: 100%; height: 1rem; background:green; }
.admin-card h4.name { color:var(--dhs-green); text-align: center; padding:.1rem; margin: 0;}
.admin-card .stats { color:var(--dhs-gold); padding: 0; display:flex; flex-direction:column; justify-content:center; align-items:center; font-weight:bolder; line-height:1; }

@media(min-width: 992px)
{   .navtop { flex-wrap:nowrap; }
    .wlogout { width:200px;  }
    .admin-card { max-width:230px; min-width:230px; height:auto;}
    .admin-pic img { height:10em; }
}

/**************************************************/
/*  ADMINISTRATION ADD EDIT FORM PAGE             */
/**************************************************/
.wrap-addedit-form { margin-top:2rem; }
.addedit-form { background-color:#f3f3f3; width:100%; max-width:1000px; display: flex; flex-direction: column; justify-content:flex-start; align-items:center; overflow: hidden; border-radius: 2rem; box-shadow: 0px 1rem 1.5rem rgba(0,0,0,0.5); margin:.3rem auto; padding:.5rem; text-align:center;}
.form-title { font-size:1.6rem; padding:0; margin:0; color:var(--dhs-green); font-weight: bolder;  }
textarea { height:8em; }

.addedit-form input[type=text], .addedit-form textarea { font-size:1rem; width:auto; margin:.3em; padding:.2em; border-radius:14px; border:1px solid var(--dhs-green); color:black; }
.addedit-form input[type=button], .addedit-form input[type=submit], .addedit-form input[type=reset] {background:var(--dhs-green); border:none; border-radius:14px; color:white; padding:.5em 1em; text-decoration:none; margin:4px 2px; cursor:pointer;}
.addedit-form input[type=button]:hover, .addedit-form input[type=submit]:hover, .addedit-form input[type=reset]:hover { background: var(--dhs-gold); color: black;}

.alert-success{color:red;background:#d1e7dd;border-color:#badbcc; padding:.2rem .5rem; margin-bottom:.5rem;}
.alert-danger{color:#842029;background:#f8d7da;border-color:#f5c2c7; padding:.2rem .5rem; margin-bottom:.5rem;}
.upload-area { width:60%; position:relative; }
.btn-title { font-size:1.1rem; }

#profileDisplay { display:block; height: 210px; width:auto; margin: 0px auto; border-radius: 5%; }

.img-placeholder { width:100%; color:white; height:210px; background:black; opacity:.7; border-radius:5%; z-index:2; position:absolute; display:none; }
.img-div:hover .img-placeholder { display:flex; justify-content:center; align-items:center; cursor:pointer;   }