@font-face {
    font-family: bombing;
    src: url(Bombing.ttf);
}
@font-face {
    font-family: kids;
    src: url(kids.ttf);
}
/* common helper */
.rem-1 {font-size: 0.75rem;}

* {margin: 0; padding: 0; box-sizing: border-box;}

header {background:linear-gradient(rgba(46, 162, 229, 0.8), rgba(65, 173, 73, 0.8), rgba(235, 33, 40, 0.8)); position: sticky; top: 0;}
#site-name {font-family: bombing; letter-spacing: 0.1rem;}

/* setting the counters */
.counter-wrapper:link, .counter-wrapper:visited {box-shadow: 2px 2px 5px black; border-radius: 1rem; position: relative; transition: transform 0.1s ease, box-shadow 0.1s ease;}
.counter-wrapper:active {transform: scale(0.9);  box-shadow: 1px 1px 3px black;}
.badge {position: absolute; top: -5px; right: 0;}
#pending-learner-wrapper {border-radius: 1rem;}

/* Setting Nav */
.nav-button {background: lightblue; border-radius: 12px; box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.3), -4px -4px 8px rgba(255, 255, 255, 0.2); transition: transform 0.1s ease-in-out, box-shadow 0.1s ease-in-out; height: 80px; width: 100%;}
.nav-button:hover {background: linear-gradient(145deg, #41af49, #37a7de);}
.nav-button:active {transform: translateY(4px); box-shadow: 3px 3px 5px rgba(0, 0, 0, 0.2), -2px -2px 4px rgba(255, 255, 255, 0.1);}