/* kinda templates thing you just need to wrap it to use it <body class="gridbackground"> 
should be the default and in case dotted bg looks better on the context you can use <body class="dottedbackground">
*/
html,
body {
   margin: 0;
   padding: 0;
   height: 100%;
   background: #000;
}

.gridbackground *,
.gridbackground *::before,
.gridbackground *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

body.gridbackground {
   background: #000;
   font-family: 'Geist', 'Plus Jakarta Sans', sans-serif;
   color: #fff;
   overflow-x: hidden;
   height: 100%;
}

.gridbackground .grid {
   position: relative;
   width: 100%;
   min-height: 100vh;
   overflow: hidden;
}

.gridbackground .gridbg {
   position: absolute;
   inset: 0;
   z-index: 10;
   background:
      linear-gradient(to right, #262626 1px, transparent 1px),
      linear-gradient(to bottom, #262626 1px, transparent 1px);
   background-size: 35px 35px;
}

.gridbackground .gridbg::after {
   content: '';
   position: absolute;
   inset: 0;
   pointer-events: none;
   background: radial-gradient(circle at center, rgba(0, 0, 0, 0) 60%, rgb(0, 0, 0) 100%);
   z-index: 11;
}

.gridbackground .rays {
   position: absolute;
   top: 50%;
   left: 50%;
   width: min(1400px, 120vw);
   height: 100vh;
   transform: translate(-50%, -50%) scale(1.04);
   z-index: 1;
   pointer-events: none;
   user-select: none;
   opacity: 0.58;
}

.gridbackground .navbar {
   z-index: 30;
   position: fixed;
   top: 1rem;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   gap: 1.2rem;
   align-items: center;
   padding: 0.56rem 1.47rem;
   background: #000;
   border: 1.11px solid #3b3b3b;
   border-radius: 20px;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
   backdrop-filter: blur(10px);
   animation: fadeInUp 0.6s ease-out both;
   transition: background 0.3s ease;
}

.gridbackground .nvitem {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0.2rem;
   border-radius: 14px;
   color: #fff;
   cursor: pointer;
   scale: 1.07;
   transition:
      background 0.2s ease,
      transform 0.2s ease;
}

.gridbackground .nvitem a {
   color: #dddddc;
   display: grid;
   place-items: center;
   inline-size: 44px;
   block-size: 44px;
   border-radius: inherit;
   text-decoration: none;
}

.gridbackground .nvitem:hover {
   background: #222;
   transform: scale(1.1);
}

.gridbackground .nvitem svg {
   width: 22px;
   height: 22px;
}

.gridbackground .nvitem.active {
   background: #222;
}

.gridbackground .nvitem[data-label] {
   position: relative;
}

.gridbackground .nvitem[data-label]::after {
   content: attr(data-label);
   position: absolute;
   left: 50%;
   top: calc(100% + 10px);
   transform: translateX(-50%) translateY(-4px);
   background: #111;
   color: #f3f3f3;
   font-size: 12px;
   line-height: 1;
   padding: 6px 8px;
   border-radius: 8px;
   white-space: nowrap;
   opacity: 0;
   pointer-events: none;
   transition:
      opacity 120ms ease,
      transform 120ms ease;
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

.gridbackground .nvitem[data-label]::before {
   content: '';
   position: absolute;
   left: 50%;
   top: calc(100% + 3px);
   transform: translateX(-50%) translateY(-4px);
   border: 6px solid transparent;
   border-bottom-color: #111;
   opacity: 0;
   transition:
      opacity 120ms ease,
      transform 120ms ease;
   pointer-events: none;
}

.gridbackground .nvitem[data-label]:hover::after,
.gridbackground .nvitem[data-label]:hover::before,
.gridbackground .nvitem[data-label]:focus-visible::after,
.gridbackground .nvitem[data-label]:focus-visible::before {
   opacity: 1;
   transform: translateX(-50%) translateY(0);
}

@keyframes fadeInUp {
   from {
      opacity: 0;
      transform: translate(-50%, -10px);
   }
   to {
      opacity: 1;
      transform: translate(-50%, 0);
   }
}
@media (max-width: 500px) {
   .gridbackground .navbar {
      gap: 1rem;
      padding: 0.4rem 0.8rem;
   }
}
/* loader */
.gridbackground #loverlay {
   position: fixed;
   inset: 0;
   background: #0a0a0a;
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 9999;
   transition:
      opacity 0.4s ease,
      visibility 0.4s ease;
   opacity: 1;
   visibility: visible;
   pointer-events: all;
}

.gridbackground #loverlay.hidden {
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
}

.gridbackground .lcontainer {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1rem;
   font-family: 'Plus Jakarta Sans', sans-serif;
   user-select: none;
   min-width: 280px;
}

@keyframes spin {
   to {
      transform: rotate(360deg);
   }
}
.gridbackground .ldicon {
   width: 56px;
   height: 56px;
   stroke: #c9cacb;
   animation: spin 1.2s linear infinite;
}

.gridbackground .ldtext {
   font-weight: 600;
   font-size: 1.2rem;
   color: #b6b6b6;
   font-family: 'Plus Jakarta Sans', sans-serif;
   user-select: none;
   margin: 0;
   text-align: center;
}

.gridbackground .pbg {
   width: 100%;
   height: 12px;
   background: #2a2a2a;
   border-radius: 10px;
   overflow: hidden;
   outline: 1px solid #1c1c1c;
}

.gridbackground .pfill {
   height: 100%;
   width: 0;
   background: #bec0c0;
   border-radius: 10px 0 0 10px;
   transition: width 0.25s ease;
}

.gridbackground .ppercent {
   font-family: 'Plus Jakarta Sans', sans-serif;
   font-weight: 700;
   font-size: 1.1rem;
   color: #e5e5e5;
   text-align: center;
   user-select: none;
   letter-spacing: 0.04em;
   margin-top: 0.3rem;
}

/* end of loader*/
/* in case the page looks better with a dotted bg you use this */
.dottedbackground *,
.dottedbackground *::before,
.dottedbackground *::after {
   box-sizing: border-box;
   margin: 0;
   padding: 0;
}

body.dottedbackground {
   background-color: #070707;
   background-image: radial-gradient(circle, rgba(255, 255, 255, 0.07) 3px, transparent 3px);
   background-size: 25px 25px;
   font-family: 'Geist', 'Plus Jakarta Sans', sans-serif;
   color: #a0b0c8;
   overflow-x: hidden;
   position: relative;
}

body.dottedbackground::before {
   content: '';
   position: fixed;
   inset: 0;
   pointer-events: none;
   background: radial-gradient(ellipse at center, rgba(0, 0, 0, 0) 70%, rgba(0, 0, 0, 0.85) 100%);
   z-index: 0;
}

body.dottedbackground::after {
   content: '';
   position: fixed;
   inset: 0;
   pointer-events: none;
   background-image: radial-gradient(circle, rgba(255, 255, 255, 0.04) 2px, transparent 2px);
   background-size: 18px 18px;
   mix-blend-mode: overlay;
   filter: blur(0.4px);
   opacity: 0.65;
   z-index: 0;
}

body.dottedbackground .navbar {
   z-index: 30;
   position: fixed;
   top: 1rem;
   left: 50%;
   transform: translateX(-50%);
   display: flex;
   gap: 1.2rem;
   align-items: center;
   padding: 0.56rem 1.47rem;
   background: #000;
   border: 1.11px solid #3b3b3b;
   border-radius: 20px;
   box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
   backdrop-filter: blur(10px);
   animation: fadeInUp 0.6s ease-out both;
   transition: background 0.3s ease;
}

body.dottedbackground .nvitem {
   display: flex;
   align-items: center;
   justify-content: center;
   padding: 0.2rem;
   border-radius: 14px;
   color: #fff;
   cursor: pointer;
   scale: 1.07;
   transition:
      background 0.2s ease,
      transform 0.2s ease;
}

body.dottedbackground .nvitem a {
   color: #dddddc;
   display: grid;
   place-items: center;
   inline-size: 44px;
   block-size: 44px;
   border-radius: inherit;
   text-decoration: none;
}

body.dottedbackground .nvitem:hover {
   background: #222;
   transform: scale(1.1);
}

body.dottedbackground .nvitem svg {
   width: 22px;
   height: 22px;
}

body.dottedbackground .nvitem.active {
   background: #222;
}

body.dottedbackground .nvitem[data-label] {
   position: relative;
}

body.dottedbackground .nvitem[data-label]::after {
   content: attr(data-label);
   position: absolute;
   left: 50%;
   top: calc(100% + 10px);
   transform: translateX(-50%) translateY(-4px);
   background: #111;
   color: #f3f3f3;
   font-size: 12px;
   line-height: 1;
   padding: 6px 8px;
   border-radius: 8px;
   white-space: nowrap;
   opacity: 0;
   pointer-events: none;
   transition:
      opacity 120ms ease,
      transform 120ms ease;
   box-shadow: 0 6px 18px rgba(0, 0, 0, 0.5);
}

body.dottedbackground .nvitem[data-label]::before {
   content: '';
   position: absolute;
   left: 50%;
   top: calc(100% + 3px);
   transform: translateX(-50%) translateY(-4px);
   border: 6px solid transparent;
   border-bottom-color: #111;
   opacity: 0;
   transition:
      opacity 120ms ease,
      transform 120ms ease;
   pointer-events: none;
}

body.dottedbackground .nvitem[data-label]:hover::after,
body.dottedbackground .nvitem[data-label]:hover::before,
body.dottedbackground .nvitem[data-label]:focus-visible::after,
body.dottedbackground .nvitem[data-label]:focus-visible::before {
   opacity: 1;
   transform: translateX(-50%) translateY(0);
}

@media (max-width: 500px) {
   body.dottedbackground .navbar {
      gap: 1rem;
      padding: 0.4rem 0.8rem;
   }
}
/* loader */
body.dottedbackground #loverlay {
   position: fixed;
   inset: 0;
   background: #0a0a0a;
   display: flex;
   justify-content: center;
   align-items: center;
   z-index: 9999;
   transition:
      opacity 0.4s ease,
      visibility 0.4s ease;
   opacity: 1;
   visibility: visible;
   pointer-events: all;
}

body.dottedbackground #loverlay.hidden {
   opacity: 0;
   visibility: hidden;
   pointer-events: none;
}

body.dottedbackground .lcontainer {
   display: flex;
   flex-direction: column;
   align-items: center;
   gap: 1rem;
   font-family: 'Plus Jakarta Sans', sans-serif;
   user-select: none;
   min-width: 280px;
}

body.dottedbackground .ldicon {
   width: 56px;
   height: 56px;
   stroke: #c9cacb;
   animation: spin 1.2s linear infinite;
}

body.dottedbackground .ldtext {
   font-weight: 600;
   font-size: 1.2rem;
   color: #b6b6b6;
   font-family: 'Plus Jakarta Sans', sans-serif;
   user-select: none;
   margin: 0;
   text-align: center;
}

body.dottedbackground .pbg {
   width: 100%;
   height: 12px;
   background: #2a2a2a;
   border-radius: 10px;
   overflow: hidden;
   outline: 1px solid #1c1c1c;
}

body.dottedbackground .pfill {
   height: 100%;
   width: 0;
   background: #bec0c0;
   border-radius: 10px 0 0 10px;
   transition: width 0.25s ease;
}

body.dottedbackground .ppercent {
   font-family: 'Plus Jakarta Sans', sans-serif;
   font-weight: 700;
   font-size: 1.1rem;
   color: #e5e5e5;
   text-align: center;
   user-select: none;
   letter-spacing: 0.04em;
   margin-top: 0.3rem;
}

/* end of loader */