:root {
  --b1: #05285b;
  --b2: #073984;
  --b3: #094bac;
  --b4: #0b5cd5;
  --b5: #0d6efd;
  --b6: #3485fd;
  --b7: #5a9cfe;
  --b8: #81b4fe;
  --b9: #a8cbfe;

  --v1: #281845;
  --v2: #3a2264;
  --v3: #4b2d83;
  --v4: #5d37a2;
  --v5: #6f42c1;
  --v6: #8660cb;
  --v7: #9d7ed5;
  --v8: #b49ddf;
  --v9: #cbbbe9;

  --p1: #4d1230;
  --p2: #6f1b45;
  --p3: #92235a;
  --p4: #b42b6f;
  --p5: #d63384;
  --p6: #dd5498;
  --p7: #e374ab;
  --p8: #ea95bf;
  --p9: #f0b6d3;

  --r1: #4f1319;
  --r2: #721c24;
  --r3: #96242f;
  --r4: #b92d3a;
  --r5: #dc3545;
  --r6: #e25563;
  --r7: #e77681;
  --r8: #ed969e;
  --r9: #f2b6bc;

  --o1: #5b2d07;
  --o2: #84420a;
  --o3: #ac560e;
  --o4: #d56a11;
  --o5: #fd7e14;
  --o6: #fd933a;
  --o7: #fea75f;
  --o8: #febc85;
  --o9: #fed1aa;

  --y1: #5c4503;
  --y2: #856404;
  --y3: #ad8305;
  --y4: #d6a206;
  --y5: #ffc107;
  --y6: #ffcb2f;
  --y7: #ffd556;
  --y8: #ffdf7e;
  --y9: #ffe9a6;

  --g1: #0e3c19;
  --g2: #155724;
  --g3: #1b722f;
  --g4: #228c3a;
  --g5: #28a745;
  --g6: #4ab563;
  --g7: #6dc381;
  --g8: #8fd19e;
  --g9: #b2dfbc;

  --t1: #0c4836;
  --t2: #11694f;
  --t3: #168967;
  --t4: #1ba97f;
  --t5: #20c997;
  --t6: #44d2a8;
  --t7: #67dab8;
  --t8: #8be3c9;
  --t9: #afecda;

  --c1: #083a42;
  --c2: #0c5460;
  --c3: #106e7d;
  --c4: #13889b;
  --c5: #17a2b8;
  --c6: #3cb1c3;
  --c7: #61c0cf;
  --c8: #86cfda;
  --c9: #abdee5;

  --a1: #444444;
  --a2: #555555;
  --a3: #666666;
  --a4: #777777;
  --a5: #888888;
  --a6: #999999;
  --a7: #aaaaaa;
  --a8: #bbbbbb;
  --a9: #cccccc;

  --k1: #000000;
  --k2: #111111;
  --k3: #222222;
  --k4: #333333;
  --k5: #444444;
  --k6: #555555;
  --k7: #666666;
  --k8: #777777;
  --k9: #888888;
  
  --w1: #cccccc;
  --w9: #ffffff;

}

* {
  font-family: 'Maven Pro';
}

/* Standard Body styles */
body {
  background-color: var(--b1);
  background-image: url("data:image/svg+xml,%3Csvg width='6' height='6' viewBox='0 0 6 6' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%230b5cd5' fill-opacity='0.7' fill-rule='evenodd'%3E%3Cpath d='M5 0h1L0 6V5zM6 5v1H5z'/%3E%3C/g%3E%3C/svg%3E");  /* Fill is b4 */
  background-attachment: fixed;
  padding: 0px;
  margin: 0px; /* Removes automatic margin */
  overflow: auto;
  height: 100vh;
}

/* Loading Icon */
.loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: var(--b1);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
}

.spinner {
  width: 50px;
  height: 50px;
  border: 5px solid var(--b9);
  border-top-color: transparent;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

/* Spinner animation */
@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

/* Styles for the div containing all of the content */

.page-content {
  padding: clamp(10px, 2vw, 20px) clamp(10px, 2vw, 20px) 0; /* Responsive padding */
  height: calc(100% - clamp(10px, 2vw, 20px)); /* Responsive height with padding */
}