/* --------------------------------------------------
   GLOBAL RESET & BASE
-------------------------------------------------- */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {  /*background: linear-gradient(to right, #B2C9C9, #FFD3B6, #B6A0D8);*/
    background:url('https://tm2cruz.ca/game/kindergarten-game/bg02.png');
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
    font-family: Arial, sans-serif;
    /*  background: #f4f4f9;  */
    color: #333;
    padding: 20px;
}

/* --------------------------------------------------
   HEADERS
-------------------------------------------------- */
h1, h2, h3 {
    margin-bottom: 15px;
    color: #222;
}

/* --------------------------------------------------
   LINKS
-------------------------------------------------- */
a { color: #0077cc; text-decoration: none;}

a:hover {text-decoration: underline;}

/* --------------------------------------------------
   FORMS
-------------------------------------------------- */
form {
    background: white;
    padding: 20px;
    max-width: 400px;
    border-radius: 8px;
    margin: 20px auto;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

label {
    font-weight: bold;
}

input[type="text"], input[type="email"], input[type="password"] {
    width: 100%;
    padding: 10px;
    margin-top: 6px;
    margin-bottom: 15px;
    border: 1px solid #ccc;
    border-radius: 6px;
}

button {
    background: #0077cc;
    color: white;
    padding: 10px 18px;
    border: none;
    border-radius: 6px;
    cursor: pointer;
    font-size: 15px;
}

button:hover {
    background: #005fa3;
}

/* --------------------------------------------------
   AVATAR SELECTION
-------------------------------------------------- */
.avatar-option img {
    border: 2px solid transparent;
    border-radius: 50%;
    cursor: pointer;
    transition: 0.2s;
}

.avatar-option input[type="radio"]:checked + img {
    border-color: #0077cc;
}

/* --------------------------------------------------
   DASHBOARD
-------------------------------------------------- */
.dashboard-box {
    background: #fff; outline: solid 0.3rem #0cb;
    padding: 20px;
    max-width: 600px;
    margin: 20px auto;
    border-radius: 8px;
    box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

/* --------------------------------------------------
   ADMIN TABLE
-------------------------------------------------- */
table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 15px;
}

table th, table td {
    padding: 10px;
    border: 1px solid #ddd;
}

table th {
    background: #0077cc;
    color: white;
}

table tr:nth-child(even) {
    background: #f9f9f9;
}

/* --------------------------------------------------
   MESSAGES
-------------------------------------------------- */
.success {color: green; margin-bottom: 10px;}

.error {color: red; margin-bottom: 10px;}

/* --------------------------------------------------
   BUTTON LINKS
-------------------------------------------------- */
.btn {
    display: inline-block;
    padding: 8px 14px;
    background: #0077cc;
    color: white;
    border-radius: 6px;
    margin-right: 8px;
}

.btn:hover {background: #005fa3;}

/* set for dashboard */
#dashboard  {position: fixed; width:80%; left: 50%; top:50%; transform:
    translate(-50%,-50%); padding:2rem; border-radius:2rem;
    background:rgba(255, 255, 255, 0.4);
    box-shadow: 0px 0px 0.5rem rgba(0, 255, 255, 0.8);}
#list div {padding:0.5rem; margin:0.3rem;}
#list a {background:#afa; padding:0.3rem; border-radius:0.5rem;
    border:3px solid #099; color:#000;}
#list a:hover  {background: #aff;}

.test  {outline: solid red;}