diff --git a/dist/index.css b/dist/index.css
index f240205..a028d4f 100644
--- a/dist/index.css
+++ b/dist/index.css
@@ -510,6 +510,15 @@ html {
     opacity: 1;
     text-align: left; }
 
+.text-black {
+  color: #000000; }
+
+.text-white {
+  color: #ffffff; }
+
+.text-red {
+  color: #dc341e; }
+
 .text-orange {
   color: #ff5733; }
 
@@ -537,6 +546,15 @@ html {
 .text-pale-yellow {
   color: #fdfd96; }
 
+.bg-black {
+  background-color: #000000; }
+
+.bg-white {
+  background-color: #ffffff; }
+
+.bg-red {
+  background-color: #dc341e; }
+
 .bg-orange {
   background-color: #ff5733; }
 
@@ -687,7 +705,6 @@ input.nb-checkbox {
   padding: 5px;
   border: 2px solid #000;
   border-radius: 50px;
-  background-color: #40d39c;
   box-shadow: 3px 3px 0 0 #000; }
   .badge .badge-inner {
     display: flex;
@@ -698,7 +715,6 @@ input.nb-checkbox {
     border: 2px solid #000;
     border-radius: 50px; }
     .badge .badge-inner .badge-text {
-      color: #031926;
       padding: 10px;
       margin: 0; }
 
diff --git a/dist/index.min.css b/dist/index.min.css
index b254108..6386244 100644
--- a/dist/index.min.css
+++ b/dist/index.min.css
@@ -1 +1 @@
-*,*::before,*::after{box-sizing:border-box}html{font-family:Arial, sans-serif}.nb-button.default{display:inline-block;padding:10px 20px;background-color:#fff;color:#000;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.default:hover{box-shadow:3px 3px 0px #000000;background-color:#aaa}.nb-button.default:focus{outline-color:transparent}.nb-button.default.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.orange{display:inline-block;padding:10px 20px;background-color:#ff5733;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.orange:hover{box-shadow:3px 3px 0px #000000;background-color:#d64b2b}.nb-button.orange:focus{outline-color:transparent}.nb-button.orange.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.blue{display:inline-block;padding:10px 20px;background-color:#0077b6;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.blue:hover{box-shadow:3px 3px 0px #000000;background-color:#005785}.nb-button.blue:focus{outline-color:transparent}.nb-button.blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.green{display:inline-block;padding:10px 20px;background-color:#40d39c;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.green:hover{box-shadow:3px 3px 0px #000000;background-color:#30ac7e}.nb-button.green:focus{outline-color:transparent}.nb-button.green.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.sky-blue{display:inline-block;padding:10px 20px;background-color:#b9e2f8;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.sky-blue:hover{box-shadow:3px 3px 0px #000000;background-color:#91bed6}.nb-button.sky-blue:focus{outline-color:transparent}.nb-button.sky-blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.pale-red{display:inline-block;padding:10px 20px;background-color:#ffc5c8;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.pale-red:hover{box-shadow:3px 3px 0px #000000;background-color:#ffb2b2}.nb-button.pale-red:focus{outline-color:transparent}.nb-button.pale-red.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.pale-violet{display:inline-block;padding:10px 20px;background-color:#bc98cb;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.pale-violet:hover{box-shadow:3px 3px 0px #000000;background-color:#b482c9}.nb-button.pale-violet:focus{outline-color:transparent}.nb-button.pale-violet.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.soft-blue{display:inline-block;padding:10px 20px;background-color:#4799ae;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.soft-blue:hover{box-shadow:3px 3px 0px #000000;background-color:#378589}.nb-button.soft-blue:focus{outline-color:transparent}.nb-button.soft-blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.pale-cyan{display:inline-block;padding:10px 20px;background-color:#b9e7de;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.pale-cyan:hover{box-shadow:3px 3px 0px #000000;background-color:#a0e5d7}.nb-button.pale-cyan:focus{outline-color:transparent}.nb-button.pale-cyan.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.pale-yellow{display:inline-block;padding:10px 20px;background-color:#fdfd96;color:#000;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.pale-yellow:hover{box-shadow:3px 3px 0px #000000;background-color:#fcfc7e}.nb-button.pale-yellow:focus{outline-color:transparent}.nb-button.pale-yellow.disabled{background-color:#ccc;cursor:not-allowed}.rounded{border-radius:9999px}.nb-input.default{padding:10px;background-color:#fff;color:#000;border:2px solid #ccc;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.default:hover{background-color:#aaa}.nb-input.default:focus{outline-color:transparent;border-color:#aaa}.nb-input.default.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.default::placeholder{color:#000;opacity:1;text-align:left}.nb-input.orange{padding:10px;background-color:#ff5733;color:#000;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.orange:hover{background-color:#d64b2b}.nb-input.orange:focus{outline-color:transparent;border-color:#d64b2b}.nb-input.orange.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.orange::placeholder{color:#000;opacity:1;text-align:left}.nb-input.blue{padding:10px;background-color:#0077b6;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.blue:hover{background-color:#005785}.nb-input.blue:focus{outline-color:transparent;border-color:#005785}.nb-input.blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.blue::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.green{padding:10px;background-color:#40d39c;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.green:hover{background-color:#30ac7e}.nb-input.green:focus{outline-color:transparent;border-color:#30ac7e}.nb-input.green.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.green::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.sky-blue{padding:10px;background-color:#b9e2f8;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.sky-blue:hover{background-color:#91bed6}.nb-input.sky-blue:focus{outline-color:transparent;border-color:#91bed6}.nb-input.sky-blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.sky-blue::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.pale-red{padding:10px;background-color:#ffc5c8;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.pale-red:hover{background-color:#ffb2b2}.nb-input.pale-red:focus{outline-color:transparent;border-color:#ffb2b2}.nb-input.pale-red.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.pale-red::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.pale-violet{padding:10px;background-color:#bc98cb;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.pale-violet:hover{background-color:#b482c9}.nb-input.pale-violet:focus{outline-color:transparent;border-color:#b482c9}.nb-input.pale-violet.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.pale-violet::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.soft-blue{padding:10px;background-color:#4799ae;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.soft-blue:hover{background-color:#378589}.nb-input.soft-blue:focus{outline-color:transparent;border-color:#378589}.nb-input.soft-blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.soft-blue::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.pale-cyan{padding:10px;background-color:#b9e7de;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.pale-cyan:hover{background-color:#a0e5d7}.nb-input.pale-cyan:focus{outline-color:transparent;border-color:#a0e5d7}.nb-input.pale-cyan.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.pale-cyan::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.pale-yellow{padding:10px;background-color:#fdfd96;color:#000;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.pale-yellow:hover{background-color:#fcfc7e}.nb-input.pale-yellow:focus{outline-color:transparent;border-color:#fcfc7e}.nb-input.pale-yellow.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.pale-yellow::placeholder{color:#000;opacity:1;text-align:left}.text-orange{color:#ff5733}.text-blue{color:#0077b6}.text-green{color:#40d39c}.text-sky-blue{color:#b9e2f8}.text-pale-red{color:#ffc5c8}.text-pale-violet{color:#bc98cb}.text-soft-blue{color:#4799ae}.text-pale-cyan{color:#b9e7de}.text-pale-yellow{color:#fdfd96}.bg-orange{background-color:#ff5733}.bg-blue{background-color:#0077b6}.bg-green{background-color:#40d39c}.bg-sky-blue{background-color:#b9e2f8}.bg-pale-red{background-color:#ffc5c8}.bg-pale-violet{background-color:#bc98cb}.bg-soft-blue{background-color:#4799ae}.bg-pale-cyan{background-color:#b9e7de}.bg-pale-yellow{background-color:#fdfd96}.dialog{background:#fff;border-radius:20px;filter:drop-shadow(4px 4px 0px #000);padding:20px;border:3px solid #000;width:20rem}.dialog p{font-size:18px}.button-container{display:flex;text-align:right}.marquee{width:100%;overflow:hidden;white-space:nowrap;border:2px solid black;font-weight:bold;position:relative}.marquee .marquee-content{animation:marquee 10s linear infinite}.marquee .marquee-content span{display:inline-block;padding:0 20px;font-size:24px}@keyframes marquee{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}.card{width:300px;margin:20px;border-radius:8px;overflow:hidden;border:3px solid #000;box-shadow:-3px 3px 0px #000000;transition:box-shadow 0.2s ease, transform 0.2s ease}.card:hover{box-shadow:0px 0px 0px #000000;transform:translate(-6px, 6px)}.card a{margin:0;text-decoration:none;color:inherit}.card-thumbnail img{width:100%;height:auto}.card-content{padding:16px}.text-small{font-size:14px;color:#888}.card-content div{font-size:16px;line-height:1.5;color:#333}.card-content strong{cursor:pointer}.avatar{overflow:hidden;width:67px;height:67px;display:flex;justify-content:center;align-items:center;border:2px solid #000;border-radius:50%;box-shadow:2px 2px 0 0 #031926}.avatar img{border:0;max-width:100%;vertical-align:middle;display:inline-block}.nb-label{cursor:pointer;display:flex;align-items:center;font-family:"Public Sans", sans-serif;font-size:1rem;color:black;text-transform:uppercase}input.nb-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:25px;height:25px;background-color:#fff;border:2px solid black;border-radius:4px;cursor:pointer}input.nb-checkbox:checked{background-color:#007bff;color:#fff}input.nb-checkbox:checked::before{content:"x";font-weight:bold;color:inherit;left:5px;position:relative;top:0px;font-size:18px;text-align:center}.badge{width:fit-content;padding:5px;border:2px solid #000;border-radius:50px;background-color:#40d39c;box-shadow:3px 3px 0 0 #000}.badge .badge-inner{display:flex;height:100%;margin:0;justify-content:center;align-items:center;border:2px solid #000;border-radius:50px}.badge .badge-inner .badge-text{color:#031926;padding:10px;margin:0}#modal{display:none}#modal:checked ~ .modal,#modal:checked ~ .modal-background{display:block}.modal-background{width:100%;height:100%;background-color:rgba(0,0,0,0.5);position:fixed;top:0;left:0;display:none;z-index:9998}.modal{position:fixed;top:0;left:0;right:0;bottom:0;margin:auto;display:none;width:300px;height:300px;background-color:#fff;box-sizing:border-box;z-index:9999}.modal>p{padding:15px;margin:0}.modal-header{background-color:#f9f9f9;border-bottom:1px solid #dddddd;box-sizing:border-box;height:50px}.modal-header h3{margin:0;box-sizing:border-box;padding-left:15px;line-height:50px;color:#4d4d4d;font-size:16px;display:inline-block}.modal-header label{box-sizing:border-box;border-left:1px solid #dddddd;float:right;line-height:50px;padding:0 15px 0 15px;cursor:pointer}.modal-header label:hover img{opacity:0.6}.alert.success{background-color:#92fca2;border:1px solid #40d39c;padding:0.1rem;border-radius:5px;margin-bottom:1rem;text-align:center;font-size:1.2rem;font-weight:bold;box-shadow:2px 2px 0px #000}.alert.error{background-color:#ffc5c8;border:1px solid #dc341e;padding:0.1rem;border-radius:5px;margin-bottom:1rem;text-align:center;font-size:1.2rem;font-weight:bold;box-shadow:2px 2px 0px #000}.alert.warning{background-color:#f8f894;border:1px solid #fdfd96;padding:0.1rem;border-radius:5px;margin-bottom:1rem;text-align:center;font-size:1.2rem;font-weight:bold;box-shadow:2px 2px 0px #000}.alert.info{background-color:#d5f0ff;border:1px solid #b9e2f8;padding:0.1rem;border-radius:5px;margin-bottom:1rem;text-align:center;font-size:1.2rem;font-weight:bold;box-shadow:2px 2px 0px #000}.accordion-tab{position:absolute;opacity:0;z-index:-1}.accordion{border-radius:5px;overflow:hidden;box-shadow:2px 2px 0px black;border:1px solid black}.accordion-label{display:flex;padding:1em;font-weight:bold;cursor:pointer;color:#fff}.accordion-content{max-height:0;padding:0 1em;background:white;transition:all 0.35s}.accordion-tab:checked ~ .accordion-content{max-height:100vh;padding:1em}.dropdown{border-radius:5px;overflow:hidden;box-shadow:2px 2px 0px black;border:1px solid black;padding:10px;cursor:pointer}.dropdown::after{content:'\25BC';position:absolute;top:50%;right:10px;transform:translateY(-50%)}.dropdown option{background-color:#fff;color:#333;box-shadow:2px 2px 0px black;border:1px solid black;padding:10px}.dropdown:focus{outline:none;box-shadow:0 0 5px rgba(0,0,0,0.3)}
+*,*::before,*::after{box-sizing:border-box}html{font-family:Arial, sans-serif}.nb-button.default{display:inline-block;padding:10px 20px;background-color:#fff;color:#000;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.default:hover{box-shadow:3px 3px 0px #000000;background-color:#aaa}.nb-button.default:focus{outline-color:transparent}.nb-button.default.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.orange{display:inline-block;padding:10px 20px;background-color:#ff5733;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.orange:hover{box-shadow:3px 3px 0px #000000;background-color:#d64b2b}.nb-button.orange:focus{outline-color:transparent}.nb-button.orange.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.blue{display:inline-block;padding:10px 20px;background-color:#0077b6;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.blue:hover{box-shadow:3px 3px 0px #000000;background-color:#005785}.nb-button.blue:focus{outline-color:transparent}.nb-button.blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.green{display:inline-block;padding:10px 20px;background-color:#40d39c;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.green:hover{box-shadow:3px 3px 0px #000000;background-color:#30ac7e}.nb-button.green:focus{outline-color:transparent}.nb-button.green.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.sky-blue{display:inline-block;padding:10px 20px;background-color:#b9e2f8;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.sky-blue:hover{box-shadow:3px 3px 0px #000000;background-color:#91bed6}.nb-button.sky-blue:focus{outline-color:transparent}.nb-button.sky-blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.pale-red{display:inline-block;padding:10px 20px;background-color:#ffc5c8;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.pale-red:hover{box-shadow:3px 3px 0px #000000;background-color:#ffb2b2}.nb-button.pale-red:focus{outline-color:transparent}.nb-button.pale-red.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.pale-violet{display:inline-block;padding:10px 20px;background-color:#bc98cb;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.pale-violet:hover{box-shadow:3px 3px 0px #000000;background-color:#b482c9}.nb-button.pale-violet:focus{outline-color:transparent}.nb-button.pale-violet.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.soft-blue{display:inline-block;padding:10px 20px;background-color:#4799ae;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.soft-blue:hover{box-shadow:3px 3px 0px #000000;background-color:#378589}.nb-button.soft-blue:focus{outline-color:transparent}.nb-button.soft-blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.pale-cyan{display:inline-block;padding:10px 20px;background-color:#b9e7de;color:#fff;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.pale-cyan:hover{box-shadow:3px 3px 0px #000000;background-color:#a0e5d7}.nb-button.pale-cyan:focus{outline-color:transparent}.nb-button.pale-cyan.disabled{background-color:#ccc;cursor:not-allowed}.nb-button.pale-yellow{display:inline-block;padding:10px 20px;background-color:#fdfd96;color:#000;border:none;cursor:pointer;font-size:16px;font-weight:bold;text-align:center;text-decoration:none;text-transform:uppercase;border:2px solid #000000;transition:background-color 0.3s ease, transform 0.2s ease;transition:box-shadow 0.2s ease, transform 0.1s ease}.nb-button.pale-yellow:hover{box-shadow:3px 3px 0px #000000;background-color:#fcfc7e}.nb-button.pale-yellow:focus{outline-color:transparent}.nb-button.pale-yellow.disabled{background-color:#ccc;cursor:not-allowed}.rounded{border-radius:9999px}.nb-input.default{padding:10px;background-color:#fff;color:#000;border:2px solid #ccc;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.default:hover{background-color:#aaa}.nb-input.default:focus{outline-color:transparent;border-color:#aaa}.nb-input.default.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.default::placeholder{color:#000;opacity:1;text-align:left}.nb-input.orange{padding:10px;background-color:#ff5733;color:#000;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.orange:hover{background-color:#d64b2b}.nb-input.orange:focus{outline-color:transparent;border-color:#d64b2b}.nb-input.orange.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.orange::placeholder{color:#000;opacity:1;text-align:left}.nb-input.blue{padding:10px;background-color:#0077b6;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.blue:hover{background-color:#005785}.nb-input.blue:focus{outline-color:transparent;border-color:#005785}.nb-input.blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.blue::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.green{padding:10px;background-color:#40d39c;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.green:hover{background-color:#30ac7e}.nb-input.green:focus{outline-color:transparent;border-color:#30ac7e}.nb-input.green.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.green::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.sky-blue{padding:10px;background-color:#b9e2f8;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.sky-blue:hover{background-color:#91bed6}.nb-input.sky-blue:focus{outline-color:transparent;border-color:#91bed6}.nb-input.sky-blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.sky-blue::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.pale-red{padding:10px;background-color:#ffc5c8;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.pale-red:hover{background-color:#ffb2b2}.nb-input.pale-red:focus{outline-color:transparent;border-color:#ffb2b2}.nb-input.pale-red.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.pale-red::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.pale-violet{padding:10px;background-color:#bc98cb;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.pale-violet:hover{background-color:#b482c9}.nb-input.pale-violet:focus{outline-color:transparent;border-color:#b482c9}.nb-input.pale-violet.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.pale-violet::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.soft-blue{padding:10px;background-color:#4799ae;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.soft-blue:hover{background-color:#378589}.nb-input.soft-blue:focus{outline-color:transparent;border-color:#378589}.nb-input.soft-blue.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.soft-blue::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.pale-cyan{padding:10px;background-color:#b9e7de;color:#fff;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.pale-cyan:hover{background-color:#a0e5d7}.nb-input.pale-cyan:focus{outline-color:transparent;border-color:#a0e5d7}.nb-input.pale-cyan.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.pale-cyan::placeholder{color:#fff;opacity:1;text-align:left}.nb-input.pale-yellow{padding:10px;background-color:#fdfd96;color:#000;border:2px solid #000;border-radius:0.25rem;box-shadow:2px 2px 0px 0px #000;border-radius:5px;font-family:Arial, sans-serif;font-size:16px;text-align:center;text-decoration:none;transition:background-color 0.3s ease, transform 0.2s ease}.nb-input.pale-yellow:hover{background-color:#fcfc7e}.nb-input.pale-yellow:focus{outline-color:transparent;border-color:#fcfc7e}.nb-input.pale-yellow.disabled{background-color:#ccc;cursor:not-allowed}.nb-input.pale-yellow::placeholder{color:#000;opacity:1;text-align:left}.text-black{color:#000}.text-white{color:#fff}.text-red{color:#dc341e}.text-orange{color:#ff5733}.text-blue{color:#0077b6}.text-green{color:#40d39c}.text-sky-blue{color:#b9e2f8}.text-pale-red{color:#ffc5c8}.text-pale-violet{color:#bc98cb}.text-soft-blue{color:#4799ae}.text-pale-cyan{color:#b9e7de}.text-pale-yellow{color:#fdfd96}.bg-black{background-color:#000}.bg-white{background-color:#fff}.bg-red{background-color:#dc341e}.bg-orange{background-color:#ff5733}.bg-blue{background-color:#0077b6}.bg-green{background-color:#40d39c}.bg-sky-blue{background-color:#b9e2f8}.bg-pale-red{background-color:#ffc5c8}.bg-pale-violet{background-color:#bc98cb}.bg-soft-blue{background-color:#4799ae}.bg-pale-cyan{background-color:#b9e7de}.bg-pale-yellow{background-color:#fdfd96}.dialog{background:#fff;border-radius:20px;filter:drop-shadow(4px 4px 0px #000);padding:20px;border:3px solid #000;width:20rem}.dialog p{font-size:18px}.button-container{display:flex;text-align:right}.marquee{width:100%;overflow:hidden;white-space:nowrap;border:2px solid black;font-weight:bold;position:relative}.marquee .marquee-content{animation:marquee 10s linear infinite}.marquee .marquee-content span{display:inline-block;padding:0 20px;font-size:24px}@keyframes marquee{0%{transform:translateX(100%)}100%{transform:translateX(-100%)}}.card{width:300px;margin:20px;border-radius:8px;overflow:hidden;border:3px solid #000;box-shadow:-3px 3px 0px #000000;transition:box-shadow 0.2s ease, transform 0.2s ease}.card:hover{box-shadow:0px 0px 0px #000000;transform:translate(-6px, 6px)}.card a{margin:0;text-decoration:none;color:inherit}.card-thumbnail img{width:100%;height:auto}.card-content{padding:16px}.text-small{font-size:14px;color:#888}.card-content div{font-size:16px;line-height:1.5;color:#333}.card-content strong{cursor:pointer}.avatar{overflow:hidden;width:67px;height:67px;display:flex;justify-content:center;align-items:center;border:2px solid #000;border-radius:50%;box-shadow:2px 2px 0 0 #031926}.avatar img{border:0;max-width:100%;vertical-align:middle;display:inline-block}.nb-label{cursor:pointer;display:flex;align-items:center;font-family:"Public Sans", sans-serif;font-size:1rem;color:black;text-transform:uppercase}input.nb-checkbox{-webkit-appearance:none;-moz-appearance:none;appearance:none;width:25px;height:25px;background-color:#fff;border:2px solid black;border-radius:4px;cursor:pointer}input.nb-checkbox:checked{background-color:#007bff;color:#fff}input.nb-checkbox:checked::before{content:"x";font-weight:bold;color:inherit;left:5px;position:relative;top:0px;font-size:18px;text-align:center}.badge{width:fit-content;padding:5px;border:2px solid #000;border-radius:50px;box-shadow:3px 3px 0 0 #000}.badge .badge-inner{display:flex;height:100%;margin:0;justify-content:center;align-items:center;border:2px solid #000;border-radius:50px}.badge .badge-inner .badge-text{padding:10px;margin:0}#modal{display:none}#modal:checked ~ .modal,#modal:checked ~ .modal-background{display:block}.modal-background{width:100%;height:100%;background-color:rgba(0,0,0,0.5);position:fixed;top:0;left:0;display:none;z-index:9998}.modal{position:fixed;top:0;left:0;right:0;bottom:0;margin:auto;display:none;width:300px;height:300px;background-color:#fff;box-sizing:border-box;z-index:9999}.modal>p{padding:15px;margin:0}.modal-header{background-color:#f9f9f9;border-bottom:1px solid #dddddd;box-sizing:border-box;height:50px}.modal-header h3{margin:0;box-sizing:border-box;padding-left:15px;line-height:50px;color:#4d4d4d;font-size:16px;display:inline-block}.modal-header label{box-sizing:border-box;border-left:1px solid #dddddd;float:right;line-height:50px;padding:0 15px 0 15px;cursor:pointer}.modal-header label:hover img{opacity:0.6}.alert.success{background-color:#92fca2;border:1px solid #40d39c;padding:0.1rem;border-radius:5px;margin-bottom:1rem;text-align:center;font-size:1.2rem;font-weight:bold;box-shadow:2px 2px 0px #000}.alert.error{background-color:#ffc5c8;border:1px solid #dc341e;padding:0.1rem;border-radius:5px;margin-bottom:1rem;text-align:center;font-size:1.2rem;font-weight:bold;box-shadow:2px 2px 0px #000}.alert.warning{background-color:#f8f894;border:1px solid #fdfd96;padding:0.1rem;border-radius:5px;margin-bottom:1rem;text-align:center;font-size:1.2rem;font-weight:bold;box-shadow:2px 2px 0px #000}.alert.info{background-color:#d5f0ff;border:1px solid #b9e2f8;padding:0.1rem;border-radius:5px;margin-bottom:1rem;text-align:center;font-size:1.2rem;font-weight:bold;box-shadow:2px 2px 0px #000}.accordion-tab{position:absolute;opacity:0;z-index:-1}.accordion{border-radius:5px;overflow:hidden;box-shadow:2px 2px 0px black;border:1px solid black}.accordion-label{display:flex;padding:1em;font-weight:bold;cursor:pointer;color:#fff}.accordion-content{max-height:0;padding:0 1em;background:white;transition:all 0.35s}.accordion-tab:checked ~ .accordion-content{max-height:100vh;padding:1em}.dropdown{border-radius:5px;overflow:hidden;box-shadow:2px 2px 0px black;border:1px solid black;padding:10px;cursor:pointer}.dropdown::after{content:'\25BC';position:absolute;top:50%;right:10px;transform:translateY(-50%)}.dropdown option{background-color:#fff;color:#333;box-shadow:2px 2px 0px black;border:1px solid black;padding:10px}.dropdown:focus{outline:none;box-shadow:0 0 5px rgba(0,0,0,0.3)}
diff --git a/docs/index.html b/docs/index.html
index 59f4141..85d61d2 100644
--- a/docs/index.html
+++ b/docs/index.html
@@ -258,7 +258,7 @@ <h3>Badge</h3>
                 Section presents a badge with text. It illustrates a user interface component
                 provided by NeoBrutalismCSS for badges.
             </p>
-            <div class="badge">
+            <div class="badge bg-orange text-white">
                 <div class="badge-inner">
                     <p class="badge-text">Excellence</p>
                 </div>
@@ -267,7 +267,7 @@ <h3>Badge</h3>
                 <pre>
                   <button class="copy tooltip copy-button"><img src="assets/copy.svg" alt="copy"> <span class="tooltiptext">Copy to clipboard</span></button>
                   <code class="language-html" data-lang="html"> 
-<span class="tag">&lt;div</span> <span class="class">class=</span><span class="name">"badge"</span><span class="tag">&gt;</span>
+<span class="tag">&lt;div</span> <span class="class">class=</span><span class="name">"badge bg-orange"</span><span class="tag">&gt;</span>
     <span class="tag">&lt;div</span> <span class="class">class=</span><span class="name">"badge-inner"</span><span class="tag">&gt;</span>
         <span class="tag">&lt;p</span> <span class="class">class=</span><span class="name">"badge-text"</span><span class="tag">&gt;</span>Excellence<span class="tag">&lt;/p&gt;</span>
     <span class="tag">&lt;/div&gt;</span>
diff --git a/package.json b/package.json
index 9f9c62f..dba9654 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "neobrutalismcss",
-  "version": "0.5.1",
+  "version": "0.5.2",
   "description": "NeoBrutalismCSS design framework that embraces the aesthetics of neo-brutalism in web",
   "main": "dist/index.min.css",
   "repository": {
diff --git a/src/scss/base/_variables.scss b/src/scss/base/_variables.scss
index 4cce5c0..c6a67a6 100644
--- a/src/scss/base/_variables.scss
+++ b/src/scss/base/_variables.scss
@@ -1,3 +1,5 @@
+$black: #000000;
+$white: #ffffff;
 $red: #dc341e;
 $orange: #ff5733;
 $blue: #0077b6;
@@ -12,6 +14,7 @@ $pale-cyan: #b9e7de;
 $pale-yellow: #fdfd96;
 $pale-yellow-light: #f8f894;
 
+$hover-red: #a52a2a;
 $hover-orange: #d64b2b;
 $hover-blue: #005785;
 $hover-green: #30ac7e;
diff --git a/src/scss/components/_badge.scss b/src/scss/components/_badge.scss
index c9e359a..3067418 100644
--- a/src/scss/components/_badge.scss
+++ b/src/scss/components/_badge.scss
@@ -3,7 +3,6 @@
   padding: 5px;
   border: 2px solid #000;
   border-radius: 50px;
-  background-color: #40d39c;
   box-shadow: 3px 3px 0 0 #000;
 
   .badge-inner {
@@ -15,7 +14,6 @@
     border: 2px solid #000;
     border-radius: 50px;
     .badge-text {
-      color: #031926;
       padding: 10px;
       margin: 0;
     }
diff --git a/src/scss/components/_colors.scss b/src/scss/components/_colors.scss
index 8d3d63a..5ebd9db 100644
--- a/src/scss/components/_colors.scss
+++ b/src/scss/components/_colors.scss
@@ -1,4 +1,7 @@
 $text-colors: (
+  black: $black,
+  white: $white,
+  red: $red,
   orange: $orange,
   blue: $blue,
   green: $green,
@@ -11,6 +14,9 @@ $text-colors: (
 );
 
 $bg-colors: (
+  black: $black,
+  white: $white,
+  red: $red,
   orange: $orange,
   blue: $blue,
   green: $green,