funuicss 3.7.3 → 3.7.5

package/css/fun.css

@@ -607,137 +607,137 @@
 /* Font utilities with matching line heights */
 .text-xs {
   font-size: var(--text-xs-responsive) !important;
-  line-height: var(--leading-xs-responsive) !important;
+  line-height: var(--leading-xs-responsive);
 }
 
 .text-sm {
   font-size: var(--text-sm-responsive) !important;
-  line-height: var(--leading-sm-responsive) !important;
+  line-height: var(--leading-sm-responsive);
 }
 
 .text-base {
   font-size: var(--text-base-responsive) !important;
-  line-height: var(--leading-base-responsive) !important;
+  line-height: var(--leading-base-responsive);
 }
 
 .text-lg {
   font-size: var(--text-lg-responsive) !important;
-  line-height: var(--leading-lg-responsive) !important;
+  line-height: var(--leading-lg-responsive);
 }
 
 .text-xl {
   font-size: var(--text-xl-responsive) !important;
-  line-height: var(--leading-xl-responsive) !important;
-  font-weight: 400 !important;
+  line-height: var(--leading-xl-responsive);
+  font-weight: 400;
 }
 
 .text-2xl {
   font-size: var(--text-2xl-responsive) !important;
-  line-height: var(--leading-2xl-responsive) !important;
-  font-weight: 500 !important;
+  line-height: var(--leading-2xl-responsive);
+  font-weight: 500;
 }
 
 .text-3xl {
   font-size: var(--text-3xl-responsive) !important;
-  line-height: var(--leading-3xl-responsive) !important;
-  font-weight: 500 !important;
+  line-height: var(--leading-3xl-responsive);
+  font-weight: 500;
 }
 
 .text-4xl {
   font-size: var(--text-4xl-responsive) !important;
-  line-height: var(--leading-4xl-responsive) !important;
-  font-weight: 600 !important;
+  line-height: var(--leading-4xl-responsive);
+  font-weight: 600;
 }
 
 .text-5xl {
   font-size: var(--text-5xl-responsive) !important;
-  line-height: var(--leading-5xl-responsive) !important;
-  font-weight: 600 !important;
+  line-height: var(--leading-5xl-responsive);
+  font-weight: 600;
 }
 
 .text-6xl {
   font-size: var(--text-6xl-responsive) !important;
-  line-height: var(--leading-6xl-responsive) !important;
-  font-weight: 600 !important;
+  line-height: var(--leading-6xl-responsive);
+  font-weight: 600;
 }
 
 .text-7xl {
   font-size: var(--text-7xl-responsive) !important;
-  line-height: var(--leading-7xl-responsive) !important;
-  font-weight: 600 !important;
+  line-height: var(--leading-7xl-responsive);
+  font-weight: 600;
 }
 
 .text-8xl {
   font-size: var(--text-8xl-responsive) !important;
-  line-height: var(--leading-8xl-responsive) !important;
-  font-weight: 800 !important;
+  line-height: var(--leading-8xl-responsive);
+  font-weight: 800;
 }
 
 .text-9xl {
   font-size: var(--text-9xl-responsive) !important;
-  line-height: var(--leading-9xl-responsive) !important;
-  font-weight: 900 !important;
+  line-height: var(--leading-9xl-responsive);
+  font-weight: 900;
 }
 
 .text-10xl {
   font-size: var(--text-10xl-responsive) !important;
-  line-height: var(--leading-10xl-responsive) !important;
-  font-weight: 900 !important;
+  line-height: var(--leading-10xl-responsive);
+  font-weight: 900;
 }
 
 .text-big {
   font-size: var(--font-size-big-responsive) !important;
-  line-height: var(--line-height-big-responsive) !important;
-  font-weight: var(--font-weight-big) !important;
-  font-style: var(--font-style-big) !important;
-  text-decoration: var(--text-decoration-big) !important;
-  text-transform: var(--text-transform-big) !important;
-  letter-spacing: var(--letter-spacing-big) !important;
+  line-height: var(--line-height-big-responsive);
+  font-weight: var(--font-weight-big);
+  font-style: var(--font-style-big);
+  text-decoration: var(--text-decoration-big);
+  text-transform: var(--text-transform-big);
+  letter-spacing: var(--letter-spacing-big);
 }
 
 .text-bigger {
   font-size: var(--font-size-bigger-responsive) !important;
-  line-height: var(--line-height-bigger-responsive) !important;
-  font-weight: var(--font-weight-bigger) !important;
-  font-style: var(--font-style-bigger) !important;
-  text-decoration: var(--text-decoration-bigger) !important;
-  text-transform: var(--text-transform-bigger) !important;
-  letter-spacing: var(--letter-spacing-bigger) !important;
+  line-height: var(--line-height-bigger-responsive);
+  font-weight: var(--font-weight-bigger);
+  font-style: var(--font-style-bigger);
+  text-decoration: var(--text-decoration-bigger);
+  text-transform: var(--text-transform-bigger);
+  letter-spacing: var(--letter-spacing-bigger);
 }
 
 .text-jumbo {
   font-size: var(--font-size-jumbo-responsive) !important;
-  line-height: var(--line-height-jumbo-responsive) !important;
-  font-weight: var(--font-weight-jumbo) !important;
-  font-style: var(--font-style-jumbo) !important;
-  text-decoration: var(--text-decoration-jumbo) !important;
-  text-transform: var(--text-transform-jumbo) !important;
-  letter-spacing: var(--letter-spacing-jumbo) !important;
+  line-height: var(--line-height-jumbo-responsive);
+  font-weight: var(--font-weight-jumbo);
+  font-style: var(--font-style-jumbo);
+  text-decoration: var(--text-decoration-jumbo);
+  text-transform: var(--text-transform-jumbo);
+  letter-spacing: var(--letter-spacing-jumbo);
 }
 .important{
   font-weight: 700;
-  color: var(--primary) !important;
+  color: var(--primary);
 }
 
 /* Mini sizes */
 .text-small {
   font-size: var(--font-size-small) !important;
-  line-height: var(--line-height-small) !important;
-  font-weight: var(--font-weight-small) !important;
-  font-style: var(--font-style-small) !important;
-  text-decoration: var(--text-decoration-small) !important;
-  text-transform: var(--text-transform-small) !important;
-  letter-spacing: var(--letter-spacing-small) !important;
+  line-height: var(--line-height-small);
+  font-weight: var(--font-weight-small);
+  font-style: var(--font-style-small);
+  text-decoration: var(--text-decoration-small);
+  text-transform: var(--text-transform-small);
+  letter-spacing: var(--letter-spacing-small);
 }
 
 .text-smaller {
   font-size: var(--font-size-smaller) !important;
-  line-height: var(--line-height-smaller) !important;
-  font-weight: var(--font-weight-smaller) !important;
-  font-style: var(--font-style-smaller) !important;
-  text-decoration: var(--text-decoration-smaller) !important;
-  text-transform: var(--text-transform-smaller) !important;
-  letter-spacing: var(--letter-spacing-smaller) !important;
+  line-height: var(--line-height-smaller);
+  font-weight: var(--font-weight-smaller);
+  font-style: var(--font-style-smaller);
+  text-decoration: var(--text-decoration-smaller);
+  text-transform: var(--text-transform-smaller);
+  letter-spacing: var(--letter-spacing-smaller);
 }
 
 /* Headings */
@@ -762,66 +762,65 @@ h1,
 
 h1, .h1 {
   font-size: var(--font-size-h1-responsive) !important;
-  line-height: var(--line-height-h1-responsive) !important;
-  font-weight: var(--font-weight-h1) !important;
-  font-style: var(--font-style-h1) !important;
-  text-decoration: var(--text-decoration-h1) !important;
-  text-transform: var(--text-transform-h1) !important;
-  letter-spacing: var(--letter-spacing-h1) !important;
+  line-height: var(--line-height-h1-responsive);
+  font-weight: var(--font-weight-h1);
+  font-style: var(--font-style-h1);
+  text-decoration: var(--text-decoration-h1);
+  text-transform: var(--text-transform-h1);
+  letter-spacing: var(--letter-spacing-h1);
 }
 
 h2, .h2 {
   font-size: var(--font-size-h2-responsive) !important;
-  line-height: var(--line-height-h2-responsive) !important;
-  font-weight: var(--font-weight-h2) !important;
-  font-style: var(--font-style-h2) !important;
-  text-decoration: var(--text-decoration-h2) !important;
-  text-transform: var(--text-transform-h2) !important;
-  letter-spacing: var(--letter-spacing-h2) !important;
+  line-height: var(--line-height-h2-responsive);
+  font-weight: var(--font-weight-h2);
+  font-style: var(--font-style-h2);
+  text-decoration: var(--text-decoration-h2);
+  text-transform: var(--text-transform-h2);
+  letter-spacing: var(--letter-spacing-h2);
 }
 
 h3, .h3 {
   font-size: var(--font-size-h3-responsive) !important;
-  line-height: var(--line-height-h3-responsive) !important;
-  font-weight: var(--font-weight-h3) !important;
-  font-style: var(--font-style-h3) !important;
-  text-decoration: var(--text-decoration-h3) !important;
-  text-transform: var(--text-transform-h3) !important;
-  letter-spacing: var(--letter-spacing-h3) !important;
+  line-height: var(--line-height-h3-responsive);
+  font-weight: var(--font-weight-h3);
+  font-style: var(--font-style-h3);
+  text-decoration: var(--text-decoration-h3);
+  text-transform: var(--text-transform-h3);
+  letter-spacing: var(--letter-spacing-h3);
 }
 
 h4, .h4 {
   font-size: var(--font-size-h4-responsive) !important;
-  line-height: var(--line-height-h4-responsive) !important;
-  font-weight: var(--font-weight-h4) !important;
-  font-style: var(--font-style-h4) !important;
-  text-decoration: var(--text-decoration-h4) !important;
-  text-transform: var(--text-transform-h4) !important;
-  letter-spacing: var(--letter-spacing-h4) !important;
+  line-height: var(--line-height-h4-responsive);
+  font-weight: var(--font-weight-h4);
+  font-style: var(--font-style-h4);
+  text-decoration: var(--text-decoration-h4);
+  text-transform: var(--text-transform-h4);
+  letter-spacing: var(--letter-spacing-h4);
 }
 
 h5, .h5 {
   font-size: var(--font-size-h5-responsive) !important;
-  line-height: var(--line-height-h5-responsive) !important;
-  font-weight: var(--font-weight-h5) !important;
-  font-style: var(--font-style-h5) !important;
-  text-decoration: var(--text-decoration-h5) !important;
-  text-transform: var(--text-transform-h5) !important;
-  letter-spacing: var(--letter-spacing-h5) !important;
+  line-height: var(--line-height-h5-responsive);
+  font-weight: var(--font-weight-h5);
+  font-style: var(--font-style-h5);
+  text-decoration: var(--text-decoration-h5);
+  text-transform: var(--text-transform-h5);
+  letter-spacing: var(--letter-spacing-h5);
 }
 
 h6, .h6 {
   font-size: var(--font-size-h6-responsive) !important;
-  line-height: var(--line-height-h6-responsive) !important;
-  font-weight: var(--font-weight-h6) !important;
-  font-style: var(--font-style-h6) !important;
-  text-decoration: var(--text-decoration-h6) !important;
-  text-transform: var(--text-transform-h6) !important;
-  letter-spacing: var(--letter-spacing-h6) !important;
+  line-height: var(--line-height-h6-responsive);
+  font-weight: var(--font-weight-h6);
+  font-style: var(--font-style-h6);
+  text-decoration: var(--text-decoration-h6);
+  text-transform: var(--text-transform-h6);
+  letter-spacing: var(--letter-spacing-h6);
 }
 
 
-
 /* For WebKit browsers (Chrome, Edge, Brave, Safari) */
 ::-webkit-scrollbar {
   width: 10px;
@@ -952,10 +951,10 @@ Link {
   background: transparent;
   transition: 0.3s;
   color: var(--linkColor);
-  font-weight: 500;
 }
 a:hover {
-  color: var(--linkHover);
+  color: var(--primary);
+
 }
 
 button {
@@ -971,7 +970,6 @@ link:hover {
 
 
 
-
 .text-minified  , .text-md{
   font-size: var(--minifiedFontSize);
   line-height: 1rem;
@@ -983,413 +981,154 @@ link:hover {
   letter-spacing: normal;
 }
 
-
-
-.text-bold {
-  font-weight: bold !important;
-}
-.text-bolder {
-  font-weight: bolder !important;
-}
-.lightText{
-  font-weight: 300 !important;
-}
-
-.lighterText{
-  font-weight: 200 !important;
-}
-.underlineText{
-  text-decoration: underline;
-}
-.emp{font-style: italic;}
-.italicText{
- font-style: italic;
-}
-.uppercase{text-transform: uppercase;}
-.lowercase{text-transform: lowercase;}
-.capitalize{text-transform: capitalize;}
-.monospace{font-family:monospace !important;}
-
-.scroll-y{overflow-y: auto !important; overflow-x: visible !important;}
-.scroll-x{overflow-x: auto !important; overflow-y: visible !important;}
-.scroll{overflow: auto !important;}
-
-
-/*Helpers*/
-.glassy{
-  backdrop-filter: blur(0.3rem);
-  background-color: transparent !important;
-}
-.transparent{
-  background-color: transparent !important;
-}
-.flat{
-  border-radius: 0rem !important;
-}
-.no-padding {
-  padding: 0px !important;
-}
-.no-margin {
-  margin: 0px;
-}
-.line-through {
-  text-decoration: line-through;
-}
-.underline {
-  text-decoration: underline;
-}
-.overline {
-  text-decoration: overline;
-}
-.wavy {
-  text-decoration: wavy;
-}
-.borderless {
-  border: none;
-}
-.border {
-  border: var(--border);
-}
-.text-center {
-  text-align: center !important;
-}
-.text-left {
-  text-align: left !important;
-}
-.text-right {
-  text-align: right !important;
-}
-.text-justify {
-  text-align: justify !important;
-}
-.hide {
-  display: none;
-}
-.show {
-  display: block;
-}
-.center {
-  margin: 0px auto;
-}
-.float-right {
-  float: right;
-}
-.float-left {
-  float: left;
-}
-
-.section {
- margin-top: 1rem;
- margin-bottom: 1rem;
-}
-.minSection{
-  margin-top: 0.5rem;
-  margin-bottom: 0.5rem;
-}
-.maxSection{
-  margin-top: 2rem;
-  margin-bottom: 2rem;
-}
-.opacity-1,
-.hover-opacity-1:hover {
-  opacity: 1;
-}
-.opacity-2,
-.hover-opacity-2:hover {
-  opacity: 0.9;
-}
-.opacity-3,
-.hover-opacity-3:hover {
-  opacity: 0.8;
-}
-.opacity-4,
-.hover-opacity-4:hover {
-  opacity: 0.7;
-}
-.opacity-5,
-.hover-opacity-5:hover {
-  opacity: 0.6;
-}
-.opacity-6,
-.hover-opacity-6:hover {
-  opacity: 0.5;
-}
-.opacity-7,
-.hover-opacity-7:hover {
-  opacity: 0.4;
-}
-.opacity-8,
-.hover-opacity-8:hover {
-  opacity: 0.2;
-}
-.opacity-9,
-.hover-opacity-9:hover {
-  opacity: 0.1;
-}
-.hr,.bb {
-  border-bottom: var(--border);
-}
-.vr, .bl {
-  border-left: var(--border);
-}
-.bt{
-  border-top: var(--border);
-}
-.br{border-right: var(--border);}
-.vertical-scroll {
-  overflow-y: scroll;
-}
-.horizontal-scroll {
-  overflow-x: scroll;
-}
-.z-index-1 {
-  z-index: 1;
-}
-.z-index-2 {
-  z-index: 2;
-}
-.z-index-3 {
-  z-index: 3;
-}
-.z-index-4 {
-  z-index: 4;
-}
-.z-index-5 {
-  z-index: 5;
-}
-.z-index-6 {
-  z-index: 6;
-}
-.z-index-7 {
-  z-index: 7;
-}
-.z-index-8 {
-  z-index: 8;
-}
-.z-index-9 {
-  z-index: 9;
-}
-.z-index-10 {
-  z-index: 10;
-}
-.responsive {
-  width: 100%;
-  height: auto;
-}
-
-.top-right {
-  position: absolute;
-  top: 0px;
-  right: 0px;
-}
-.top-left {
-  position: absolute;
-  top: 0px;
-  left: 0px;
-}
-.top {
-  position: absolute;
-  top: 0px;
-}
-.bottom-right {
-  position: absolute;
-  bottom: 0px;
-  right: 0px;
-}
-.bottom-left {
-  position: absolute;
-  bottom: 0px;
-  left: 0px;
-}
-.bottom {
-  position: absolute;
-  bottom: 0px;
-}
-.clear-both {
-  clear: both;
-}
-.content-middle {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  height: 100%;
-  width: 100%;
-}
-.sticky-top {
-  position: -webkit-sticky;
-  position: sticky;
-  top: 0px;
-  z-index: var(--navBarZindex);
-  width: 100%;
-}
-.fixed-top {
-  position: fixed;
-  top: 0px;
-  z-index: var(--navBarZindex);
-  width: 100%;
-}
-
-.relative {
-  position: relative;
-}
-.fixed {
-  position: fixed;
-}
-.sticky {
-  position: sticky;
-}
-.absolute {
-  position: absolute;
-}
-.block {
-  display: block;
-}
-.inline-block {
-  display: inline-block;
-}
-.middle {
-  display: absolute;
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
-.shadow {
-  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
-}
-.hover-shadow {
-  transition: 0.3s;
-}
-.hover-shadow:hover {
-  box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2);
-}
-.fit {
-  height: 100%;
-  width: 100%;
-}
-.fit-width {
-  width: fit-content;
-}
-.fit-height {
-  height: fit-content;
-}
-.shadow-bingo {
-  box-shadow: 10px 20px 20px 10px rgba(225, 225, 225, 0.5),
-    0px 40px 40px 0px rgba(225, 225, 255, 0.6);
-}
-.top-border {
-  border-top: var(--border);
-}
-.bottom-border {
-  border-bottom: var(--border);
-}
-.right-border {
-  border-right: var(--border);
-}
-.left-border {
-  border-left: var(--border);
-}
-.row-flex{
-  display: flex !important;
-  flex-direction: row !important;
-  align-items: center ;
-
-}
-.row-flex.gap {
-  grid-gap: 0.5rem;
-}
-.row-flex.space-between {
-  justify-content: space-between;
-}
-.row-flex.gap {
-  gap: 0.2rem;
-}
-.row-flex.stretch{
-  align-items: stretch !important;
-}
-.row-flex.space-around {
-  justify-content: space-around;
-}
-
-
-
-
-
-.fixedBottom {
-  position: fixed;
-  bottom: 0;
-  left: 0;
-  width: 100%;
-  z-index: var(--navBarZindex);
-}
-.fixedTop {
-  position: fixed;
-  bottom: 0;
-  top: 0;
-  width: 100%;
-  z-index: var(--navBarZindex);
-}
-.row-flex.center {
-  justify-content: center;
-}
-.central {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-.hoverable{
-  transition: 0.1s linear;
-}
-.hoverable:hover{
-  background-color: var(--hoverable) !important;
-  /* filter: brightness(90%); */
-
-}
-.hoverable-border{border: 0.1rem solid transparent;transition: 0.3s ease-in-out;}
-.hoverable-border:hover{border: var(--border);}
-
-.rightRounded{
-  border-top-right-radius: 300rem !important;
-  border-bottom-right-radius: 300rem !important;
-  border-bottom-left-radius: 0 !important;
-  border-top-left-radius: 0 !important;
-}
-.leftRounded{
-  border-top-left-radius: 300rem !important;
-  border-bottom-left-radius: 300rem !important;
-  border-top-right-radius: 0 !important;
-  border-bottom-right-radius: 0 !important;
-}
-
-
-/* cursor */
-.cursor-pointer {
-  cursor: pointer;
-}
-.cursor-copy {
-  cursor: copy;
-}
-.cursor-none {
-  cursor: none;
-}
-.cursor-move {
-  cursor: move;
-}
-/* containers hover*/
-.container {
-  margin: 0 10%;
-}
+/* Typography */
+.text-bold { font-weight: bold !important; }
+.text-bolder { font-weight: bolder !important; }
+.lightText { font-weight: 300 !important; }
+.lighterText { font-weight: 200 !important; }
+.underlineText { text-decoration: underline; }
+.emp { font-style: italic; }
+.italicText { font-style: italic; }
+.uppercase { text-transform: uppercase; }
+.lowercase { text-transform: lowercase; }
+.capitalize { text-transform: capitalize; }
+.monospace { font-family: monospace !important; }
+
+/* Scroll */
+.scroll-y { overflow-y: auto !important; overflow-x: visible !important; }
+.scroll-x { overflow-x: auto !important; overflow-y: visible !important; }
+.scroll { overflow: auto !important; }
+.vertical-scroll { overflow-y: scroll; }
+.horizontal-scroll { overflow-x: scroll; }
+
+/* Helpers */
+.glassy { backdrop-filter: blur(0.3rem); background-color: transparent !important; }
+.transparent { background-color: transparent !important; }
+.flat { border-radius: 0rem !important; }
+.no-padding { padding: 0px !important; }
+.no-margin { margin: 0px; }
+.line-through { text-decoration: line-through; }
+.underline { text-decoration: underline; }
+.overline { text-decoration: overline; }
+.wavy { text-decoration: wavy; }
+.borderless { border: none; }
+.border { border: var(--border); }
+.hide { display: none; }
+.show { display: block; }
+.center { margin: 0px auto; }
+.float-right { float: right; }
+.float-left { float: left; }
+.clear-both { clear: both; }
+.responsive { width: 100%; height: auto; }
+
+/* Text Alignment */
+.text-center { text-align: center !important; }
+.text-left { text-align: left !important; }
+.text-right { text-align: right !important; }
+.text-justify { text-align: justify !important; }
+
+/* Sections */
+.section { margin-top: 1rem; margin-bottom: 1rem; }
+.minSection { margin-top: 0.5rem; margin-bottom: 0.5rem; }
+.maxSection { margin-top: 2rem; margin-bottom: 2rem; }
+
+/* Opacity */
+.opacity-1, .hover-opacity-1:hover { opacity: 1; }
+.opacity-2, .hover-opacity-2:hover { opacity: 0.9; }
+.opacity-3, .hover-opacity-3:hover { opacity: 0.8; }
+.opacity-4, .hover-opacity-4:hover { opacity: 0.7; }
+.opacity-5, .hover-opacity-5:hover { opacity: 0.6; }
+.opacity-6, .hover-opacity-6:hover { opacity: 0.5; }
+.opacity-7, .hover-opacity-7:hover { opacity: 0.4; }
+.opacity-8, .hover-opacity-8:hover { opacity: 0.2; }
+.opacity-9, .hover-opacity-9:hover { opacity: 0.1; }
+
+/* Borders */
+.hr, .bb { border-bottom: var(--border); }
+.vr, .bl { border-left: var(--border); }
+.bt { border-top: var(--border); }
+.br { border-right: var(--border); }
+.top-border { border-top: var(--border); }
+.bottom-border { border-bottom: var(--border); }
+.right-border { border-right: var(--border); }
+.left-border { border-left: var(--border); }
+
+/* Z-Index */
+.z-index-1 { z-index: 1; }
+.z-index-2 { z-index: 2; }
+.z-index-3 { z-index: 3; }
+.z-index-4 { z-index: 4; }
+.z-index-5 { z-index: 5; }
+.z-index-6 { z-index: 6; }
+.z-index-7 { z-index: 7; }
+.z-index-8 { z-index: 8; }
+.z-index-9 { z-index: 9; }
+.z-index-10 { z-index: 10; }
+
+/* Positioning */
+.top-right { position: absolute; top: 0px; right: 0px; }
+.top-left { position: absolute; top: 0px; left: 0px; }
+.top { position: absolute; top: 0px; }
+.bottom-right { position: absolute; bottom: 0px; right: 0px; }
+.bottom-left { position: absolute; bottom: 0px; left: 0px; }
+.bottom { position: absolute; bottom: 0px; }
+.middle { display: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); }
+.relative { position: relative; }
+.fixed { position: fixed; }
+.sticky { position: sticky; }
+.absolute { position: absolute; }
+.sticky-top { position: -webkit-sticky; position: sticky; top: 0px; z-index: var(--navBarZindex); width: 100%; }
+.fixed-top { position: fixed; top: 0px; z-index: var(--navBarZindex); width: 100%; }
+.fixedBottom { position: fixed; bottom: 0; left: 0; width: 100%; z-index: var(--navBarZindex); }
+.fixedTop { position: fixed; bottom: 0; top: 0; width: 100%; z-index: var(--navBarZindex); }
+
+/* Display */
+.block { display: block; }
+.inline-block { display: inline-block; }
+.content-middle { display: flex; justify-content: center; align-items: center; height: 100%; width: 100%; }
+.central { display: flex; align-items: center; justify-content: center; }
+
+/* Flexbox */
+.row-flex { display: flex !important; flex-direction: row !important; align-items: center; }
+.row-flex.gap { grid-gap: 0.5rem; gap: 0.2rem; }
+.row-flex.space-between { justify-content: space-between; }
+.row-flex.stretch { align-items: stretch !important; }
+.row-flex.space-around { justify-content: space-around; }
+.row-flex.center { justify-content: center; }
+
+/* Shadows */
+.shadow { box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2); }
+.hover-shadow { transition: 0.3s; }
+.hover-shadow:hover { box-shadow: 0 8px 16px 0 rgba(0, 0, 0, 0.2); }
+.shadow-bingo { box-shadow: 10px 20px 20px 10px rgba(225, 225, 225, 0.5), 0px 40px 40px 0px rgba(225, 225, 255, 0.6); }
+
+/* Fit */
+.fit { height: 100%; width: 100%; }
+.fit-width { width: fit-content; }
+.fit-height { height: fit-content; }
+
+/* Rounded */
+.rightRounded { border-top-right-radius: 300rem !important; border-bottom-right-radius: 300rem !important; border-bottom-left-radius: 0 !important; border-top-left-radius: 0 !important; }
+.leftRounded { border-top-left-radius: 300rem !important; border-bottom-left-radius: 300rem !important; border-top-right-radius: 0 !important; border-bottom-right-radius: 0 !important; }
+
+/* Hover Effects */
+.hoverable { transition: 0.1s linear; }
+.hoverable:hover { background-color: var(--hoverable) !important; }
+.hoverable-border { border: 0.1rem solid transparent; transition: 0.3s ease-in-out; }
+.hoverable-border:hover { border: var(--border); }
+
+/* Cursor */
+.cursor-pointer { cursor: pointer; }
+.cursor-copy { cursor: copy; }
+.cursor-none { cursor: none; }
+.cursor-move { cursor: move; }
+
+/* Containers */
+.container { margin: 0 10%; }
 @media (max-width: 600px) {
-  .container {
-   margin: 0 5%;
-  }
-}
-
-.page{
-  min-height: 80vh;
-  padding: 2rem 0;
+  .container { margin: 0 5%; }
 }
-
-
+.page { min-height: 80vh; padding: 2rem 0; }
 /*buttons*/
 .button {
   border: none;
@@ -1400,20 +1139,26 @@ link:hover {
   cursor: pointer;
   font-size: var(--minifiedFontSize);
   position: relative;
-  overflow: hidden;
+  overflow: visible !important;
   z-index: 1;
   line-height: 1 !important;
   height: var(--inputButtonHeight);
 }
+.button.primary{outline:1px solid var(--primary);}
+.button.primary:active{outline:1px solid var(--primary300);}
+.button.secondary{outline:1px solid var(--secondary);}
+.button.secondary:active{outline:1px solid var(--secondary300);}
+.button.accent{outline:1px solid var(--accent);}
+.button.accent:active{outline:1px solid var(--accent300);}
 
 
 /* Ripple effect */
 .button::after {
   content: '';
   position: absolute;
-  border-radius: 50%;
+  border-radius: var(--radius);
   transform: scale(0);
-  background: rgba(0, 0, 0, 0.1); /* dark ripple with opacity */
+  background: rgba(255, 255, 255, 0.1); /* dark ripple with opacity */
   width: 100%;
   height: 100%;
   top: 0;
@@ -1424,7 +1169,7 @@ link:hover {
 }
 
 .button:active::after {
-  transform: scale(2);
+  transform: scale(1);
   opacity: 1;
   transition: 0s;
 
@@ -1653,6 +1398,176 @@ border-radius: var(--borderRadius);
   cursor: pointer;
 }
 
+/* AppBar Dropdown Styles */
+.nav_item {
+  position: relative;
+}
+
+.nav_item.has-dropdown .nav_link {
+  cursor: pointer;
+}
+
+.nav_link-arrow {
+  transition: transform 0.3s ease;
+  margin-left: 0.25rem;
+}
+
+.nav_item.dropdown-open .nav_link-arrow {
+  transform: rotate(180deg);
+}
+
+/* Dropdown Menu */
+.nav_dropdown-menu {
+  position: absolute;
+  top: 100%;
+  left: 0;
+  background: var(--page-bg);
+  border: var(--border);
+  border-radius: 0.5rem;
+  box-shadow: var(--card);
+  min-width: 200px;
+  z-index: 1000;
+  opacity: 0;
+  transform: translateY(-10px);
+  font-size: var(--minifiedFontSize);
+  visibility: hidden;
+  transition: all 0.3s ease;
+}
+
+.nav_item.dropdown-open .nav_dropdown-menu {
+  opacity: 1;
+  transform: translateY(0);
+  visibility: visible;
+}
+
+/* Dropdown Links */
+.nav_dropdown-menu .nav_item {
+  border-bottom: var(--border);
+}
+
+.nav_dropdown-menu .nav_item:last-child {
+  border-bottom: none;
+}
+
+.nav_dropdown-menu .nav_link {
+  display: block;
+  text-decoration: none;
+  transition: all 0.2s ease;
+  border-radius: 0;
+}
+
+.nav_dropdown-menu .nav_link:hover {
+  background: var(--lighter);
+  color: var(--primary) !important;
+}
+
+.nav_dropdown-menu .nav_link.active {
+  background: var(--primary100);
+  color: var(--primary);
+  font-weight: 500;
+}
+
+/* Nested Dropdowns */
+.nav_dropdown-menu .nav_dropdown-menu {
+  top: 0;
+  left: 100%;
+  margin-left: 0.25rem;
+}
+
+.nav_dropdown-menu .nav_item.has-dropdown .nav_link {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+/* Mobile Dropdown Styles */
+.nav_dropdown-mobile {
+  position: static !important;
+  box-shadow: none !important;
+  border: none !important;
+  background: var(--raiseOpaque) !important;
+  margin-left: 1rem;
+  margin-top: 0.5rem;
+  opacity: 1 !important;
+  transform: none !important;
+  visibility: visible !important;
+  max-height: 0;
+  overflow: hidden;
+  transition:  0.3s ease;
+}
+
+.nav_item.dropdown-open .nav_dropdown-mobile {
+  max-height: 500px;
+}
+
+
+/* Mobile Menu */
+/* .nav_mobile-menu {
+  position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: var(--raiseOpaque);
+  z-index: 999;
+  overflow-y: auto;
+  padding: 1rem;
+  border-top: var(--border);
+} */
+
+.nav_mobile-menu .nav_links {
+  align-items: flex-start !important;
+}
+
+.nav_mobile-menu .nav_item {
+  width: 100%;
+}
+
+.nav_mobile-menu .nav_link {
+  width: 100%;
+  justify-content: space-between;
+  padding: 1rem !important;
+  border-bottom: var(--border);
+}
+
+/* Active Link Styles */
+.nav_link.active {
+  color: var(--primary) !important;
+  font-weight: 500;
+}
+
+/* Hover Effects */
+.nav_link:hover {
+  color: var(--primary) !important;
+}
+
+/* Icon Styles */
+.nav_link-icon {
+  display: flex;
+  align-items: center;
+  transition: transform 0.2s ease;
+}
+
+.nav_link:hover .nav_link-icon.prefix {
+  transform: translateX(-2px);
+}
+
+.nav_link:hover .nav_link-icon.suffix {
+  transform: translateX(2px);
+}
+
+/* Smooth Transitions */
+.nav_link,
+.nav_link-content,
+.nav_dropdown-menu {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* Focus States */
+.nav_link:focus {
+  outline-offset: 2px;
+}
+
 
 
 /* video */
@@ -1727,7 +1642,7 @@ border-radius: var(--borderRadius);
   line-height: 0;
   color: var(--text-color);
 }
-
+ 
 
 
 
@@ -5605,6 +5520,7 @@ background-color: rgba(0, 0, 0, 0.2);
 .min-w-vw { min-width: 100vw !important; }
 .min-h-vh { min-height: 100vh !important; }
 .max-h-vh { max-height: 100vh !important; }
+
 .w-100-vw { width: 100vw !important; }
 .w-90-vw { width: 90vw !important; }
 .w-80-vw { width: 80vw !important; }
@@ -5651,26 +5567,57 @@ background-color: rgba(0, 0, 0, 0.2);
 .w-90-p { width: 90% !important; }
 .w-100-p , .w-full { width: 100% !important; }
 
-
-.w-10 { width: 0.625rem !important; }
-.w-20 { width: 1.25rem !important; }
-.w-30 { width: 1.875rem !important; }
-.w-40 { width: 2.5rem !important; }
-.w-50 { width: 3.125rem !important; }
-.w-60 { width: 3.75rem !important; }
-.w-70 { width: 4.375rem !important; }
-.w-80 { width: 5rem !important; }
-.w-90 { width: 5.625rem !important; }
-.w-100 { width: 6.25rem !important; }
-.w-200 { width: 12.5rem !important; }
-.w-300 { width: 18.75rem !important; }
-.w-400 { width: 25rem !important; }
-.w-500 { width: 31.25rem !important; }
-.w-600 { width: 37.5rem !important; }
-.w-700 { width: 43.75rem !important; }
-.w-800 { width: 50rem !important; }
-.w-900 { width: 56.25rem !important; }
-.w-1000 { width: 62.5rem !important; }
+.w-5 { max-width: 0.3125rem; width: 100% !important; }
+.w-10 { max-width: 0.625rem; width: 100% !important; }
+.w-15 { max-width: 0.9375rem; width: 100% !important; }
+.w-20 { max-width: 1.25rem; width: 100% !important; }
+
+/* Increments of 5 from 25-95 */
+.w-25 { max-width: 1.5625rem; width: 100% !important; }
+.w-30 { max-width: 1.875rem; width: 100% !important; }
+.w-35 { max-width: 2.1875rem; width: 100% !important; }
+.w-40 { max-width: 2.5rem; width: 100% !important; }
+.w-45 { max-width: 2.8125rem; width: 100% !important; }
+.w-50 { max-width: 3.125rem; width: 100% !important; }
+.w-55 { max-width: 3.4375rem; width: 100% !important; }
+.w-60 { max-width: 3.75rem; width: 100% !important; }
+.w-65 { max-width: 4.0625rem; width: 100% !important; }
+.w-70 { max-width: 4.375rem; width: 100% !important; }
+.w-75 { max-width: 4.6875rem; width: 100% !important; }
+.w-80 { max-width: 5rem; width: 100% !important; }
+.w-85 { max-width: 5.3125rem; width: 100% !important; }
+.w-90 { max-width: 5.625rem; width: 100% !important; }
+.w-95 { max-width: 5.9375rem; width: 100% !important; }
+
+.w-100 { max-width: 6.25rem; width: 100% !important; }
+.w-150 { max-width: 9.375rem; width: 100% !important; }
+.w-200 { max-width: 12.5rem; width: 100% !important; }
+.w-250 { max-width: 15.625rem; width: 100% !important; }
+.w-300 { max-width: 18.75rem; width: 100% !important; }
+.w-350 { max-width: 21.875rem; width: 100% !important; }
+.w-400 { max-width: 25rem; width: 100% !important; }
+.w-450 { max-width: 28.125rem; width: 100% !important; }
+.w-500 { max-width: 31.25rem; width: 100% !important; }
+.w-550 { max-width: 34.375rem; width: 100% !important; }
+.w-600 { max-width: 37.5rem; width: 100% !important; }
+.w-650 { max-width: 40.625rem; width: 100% !important; }
+.w-700 { max-width: 43.75rem; width: 100% !important; }
+.w-750 { max-width: 46.875rem; width: 100% !important; }
+.w-800 { max-width: 50rem; width: 100% !important; }
+.w-850 { max-width: 53.125rem; width: 100% !important; }
+.w-900 { max-width: 56.25rem; width: 100% !important; }
+.w-950 { max-width: 59.375rem; width: 100% !important; }
+.w-1000 { max-width: 62.5rem; width: 100% !important; }
+.w-1050 { max-width: 65.625rem; width: 100% !important; }
+.w-1100 { max-width: 68.75rem; width: 100% !important; }
+.w-1150 { max-width: 71.875rem; width: 100% !important; }
+.w-1200 { max-width: 75rem; width: 100% !important; }
+.w-1250 { max-width: 78.125rem; width: 100% !important; }
+.w-1300 { max-width: 81.25rem; width: 100% !important; }
+.w-1350 { max-width: 84.375rem; width: 100% !important; }
+.w-1400 { max-width: 87.5rem; width: 100% !important; }
+.w-1450 { max-width: 90.625rem; width: 100% !important; }
+.w-1500 { max-width: 93.75rem; width: 100% !important; }
 
 
 /* Max-width and Min-width */
@@ -6058,25 +6005,60 @@ background-color: rgba(0, 0, 0, 0.2);
 .min-h-900 { min-height: 56.25rem !important; }
 
 /* height */
-.h-10 { height: 0.625rem !important; }
-.h-20 { height: 1.25rem !important; }
-.h-30 { height: 1.875rem !important; }
-.h-40 { height: 2.5rem !important; }
-.h-50 { height: 3.125rem !important; }
-.h-60 { height: 3.75rem !important; }
-.h-70 { height: 4.375rem !important; }
-.h-80 { height: 5rem !important; }
-.h-90 { height: 5.625rem !important; }
-.h-100 { height: 6.25rem !important; }
-.h-200 { height: 12.5rem !important; }
-.h-300 { height: 18.75rem !important; }
-.h-400 { height: 25rem !important; }
-.h-500 { height: 31.25rem !important; }
-.h-600 { height: 37.5rem !important; }
-.h-700 { height: 43.75rem !important; }
-.h-800 { height: 50rem !important; }
-.h-900 { height: 56.25rem !important; }
-.h-1000 { height: 62.5rem !important; }
+/* Height utilities with Pexels scaling system (1 unit = 0.0625rem) */
+/* Increments of 5 from 5-20 */
+.h-5 { max-height: 0.3125rem; height: 100% !important; }
+.h-10 { max-height: 0.625rem; height: 100% !important; }
+.h-15 { max-height: 0.9375rem; height: 100% !important; }
+.h-20 { max-height: 1.25rem; height: 100% !important; }
+
+/* Increments of 5 from 25-95 */
+.h-25 { max-height: 1.5625rem; height: 100% !important; }
+.h-30 { max-height: 1.875rem; height: 100% !important; }
+.h-35 { max-height: 2.1875rem; height: 100% !important; }
+.h-40 { max-height: 2.5rem; height: 100% !important; }
+.h-45 { max-height: 2.8125rem; height: 100% !important; }
+.h-50 { max-height: 3.125rem; height: 100% !important; }
+.h-55 { max-height: 3.4375rem; height: 100% !important; }
+.h-60 { max-height: 3.75rem; height: 100% !important; }
+.h-65 { max-height: 4.0625rem; height: 100% !important; }
+.h-70 { max-height: 4.375rem; height: 100% !important; }
+.h-75 { max-height: 4.6875rem; height: 100% !important; }
+.h-80 { max-height: 5rem; height: 100% !important; }
+.h-85 { max-height: 5.3125rem; height: 100% !important; }
+.h-90 { max-height: 5.625rem; height: 100% !important; }
+.h-95 { max-height: 5.9375rem; height: 100% !important; }
+
+/* Increments of 50 from 100-1500 */
+.h-100 { max-height: 6.25rem; height: 100% !important; }
+.h-150 { max-height: 9.375rem; height: 100% !important; }
+.h-200 { max-height: 12.5rem; height: 100% !important; }
+.h-250 { max-height: 15.625rem; height: 100% !important; }
+.h-300 { max-height: 18.75rem; height: 100% !important; }
+.h-350 { max-height: 21.875rem; height: 100% !important; }
+.h-400 { max-height: 25rem; height: 100% !important; }
+.h-450 { max-height: 28.125rem; height: 100% !important; }
+.h-500 { max-height: 31.25rem; height: 100% !important; }
+.h-550 { max-height: 34.375rem; height: 100% !important; }
+.h-600 { max-height: 37.5rem; height: 100% !important; }
+.h-650 { max-height: 40.625rem; height: 100% !important; }
+.h-700 { max-height: 43.75rem; height: 100% !important; }
+.h-750 { max-height: 46.875rem; height: 100% !important; }
+.h-800 { max-height: 50rem; height: 100% !important; }
+.h-850 { max-height: 53.125rem; height: 100% !important; }
+.h-900 { max-height: 56.25rem; height: 100% !important; }
+.h-950 { max-height: 59.375rem; height: 100% !important; }
+.h-1000 { max-height: 62.5rem; height: 100% !important; }
+.h-1050 { max-height: 65.625rem; height: 100% !important; }
+.h-1100 { max-height: 68.75rem; height: 100% !important; }
+.h-1150 { max-height: 71.875rem; height: 100% !important; }
+.h-1200 { max-height: 75rem; height: 100% !important; }
+.h-1250 { max-height: 78.125rem; height: 100% !important; }
+.h-1300 { max-height: 81.25rem; height: 100% !important; }
+.h-1350 { max-height: 84.375rem; height: 100% !important; }
+.h-1400 { max-height: 87.5rem; height: 100% !important; }
+.h-1450 { max-height: 90.625rem; height: 100% !important; }
+.h-1500 { max-height: 93.75rem; height: 100% !important; }
 
 /* percentage */
 .h-10-p { height: 10% !important; }
@@ -6328,7 +6310,6 @@ background-color: rgba(0, 0, 0, 0.2);
 .margin-right-60{margin-right:60px!important}.margin-right-70{margin-right:70px!important}
 .margin-right-80{margin-right:80px!important}.margin-right-90{margin-right:90px!important}
 .margin-right-100{margin-bottom:100px}
-
 /* --------- MARGIN --------- */
 .margin , .m{margin: var(--spacingScale) !important;}
 .m-0  { margin: var(--space-0) !important; }
@@ -9889,10 +9870,6 @@ z-index: 10;
 
 
 /* text color */
-
-
-
-
 .text-primary,
 .hover-text-primary:hover {
   color: var(--primary) !important;
@@ -10283,10 +10260,10 @@ z-index: 10;
 .hover-text-info900:hover {
   color: var(--info900) !important;
 }
-.text-white{
+.text-white , .hover-text-white:hover{
   color: var(--white) !important;
 }
-.text-dark{
+.text-dark , .hover-text-dark:hover{
   color: var(--dark) !important;
 }
 .text-default{
@@ -10298,5 +10275,3 @@ z-index: 10;
   -webkit-text-fill-color: transparent;
   -webkit-background-clip: text;
 }
-
-