.fa-spin {
  animation: spin 2s linear infinite;
  font-size:150%;
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}


body {
  margin: 0;
  font-family: var(--base-font);
  font-family:var(--base-font, 'Verdana');
  font-size: var(--base-font-size, 20px);
  font-weight: var(--base-font-w, normal);
  line-height: 1.5;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  background-color: var(--secondary);
}

@media (prefers-color-scheme: dark) {
  body {
    background-color: var(--primary);
  }
}

b,
strong {
    font-family:var(--base-font-strong, 'Verdana');
    font-weight:var(--base-font-strong-w, bold);
}

h1, h2, h3, h4, h5, h6 {
  margin-top: .5rem;
  margin-bottom: 1rem;
  font-family: var(--accent-font, 'Garamond');
  font-weight: var(--accent-font-w, normal);
  line-height: 1.2;
  color: inherit;
}

h1 strong, h2 strong, h3 strong, h4 strong, h5 strong, h6 strong {
  font-family:var(--accent-font-strong, 'Garamond');
  font-weight:var(--accent-font-strong-w, bold);
}

h1 {
  font-size: 2.0rem;
}

h2 {
  font-size: 1.75rem;
}

h3 {
  font-size: 1.50rem;
}

h4 {
  font-size: 1.25rem;
}

h5 {
  font-size: 1rem;
}

h6 {
  font-size: 1rem;
}

code {
  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
    monospace;
}

/* Track */
::-webkit-scrollbar {
  width: 12px;  /* Width of the vertical scrollbar */
  height: 12px; /* Height of the horizontal scrollbar */
  background-color: transparent; /* bg-gray-100 */
}

/* Handle */
::-webkit-scrollbar-thumb {
  background-color: var(--accent, #9CA3AF); /* bg-gray-400 */
  border-radius: 8px;
  border: 4px solid #F3F4F6; /* bg-gray-100 */
}

/* Handle on hover */
::-webkit-scrollbar-thumb:hover {
  background-color: var(--accent, #6B7280); /* bg-gray-600 */
}

/* Handle on active */
::-webkit-scrollbar-thumb:active {
  background-color: var(--accent, #4B5563); /* bg-gray-700 */
}

/* Button at the top and bottom of the scrollbar (not widely supported) */
::-webkit-scrollbar-button {
  display: none; /* Hide scrollbar buttons */
}

/* Track background */
::-webkit-scrollbar-track {
  background-color: #F3F4F6; /* bg-gray-100 */
  border-radius: 8px;
}

/* Track background on hover */
::-webkit-scrollbar-track:hover {
  background-color: #E5E7EB; /* bg-gray-200 */
}

.github-colors {
  background-color:#2b3137;
}
.github-colors:hover {
  background-color: #24292e;
}

.google-colors {
  background-color: #4285F4;
}
.google-colors:hover {
  background-color: #3367D6;
}