body {
  background-color: #f0f0f0;
  opacity: 1;
  transition: opacity 0.2s ease;
}
body.fade-out {
  opacity: 0;
}

h1,
h2,
h3,
h4 {
  font-weight: bold;
}

input {
  font-size: 1rem;
  padding: 0.5rem;
  border: 1px solid #ccc;
  border-radius: 4px;
  margin-bottom: 1rem;
}

/* Nuxt Page transition */
.page-enter-active,
.page-leave-active {
  transition: all 0.3s;
}
.page-enter-from,
.page-leave-to {
  opacity: 0;
  filter: blur(0.3rem);
}

* {
  scrollbar-width: thin;
}
/* CSS for a discrete and 4px width scrollbar */
::-webkit-scrollbar {
  width: 4px; /* Width of the scrollbar */
}

::-webkit-scrollbar-thumb {
  background-color: rgba(0, 0, 0, 0.5); /* Color of the scrollbar thumb */
  border-radius: 2px; /* Rounded edges for the thumb */
}

::-webkit-scrollbar-thumb:hover {
  background-color: rgba(0, 0, 0, 0.7); /* Darker color when hovered */
}

::-webkit-scrollbar-track {
  background: rgba(0, 0, 0, 0.1); /* Background color of the scrollbar track */
  border-radius: 2px; /* Rounded edges for the track */
}

/* Loading spinner */
/* HTML: <div class="loader"></div> */
.loader {
  width: 30px;
  margin: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  background: radial-gradient(farthest-side, blue, 94%, #0000) top/8px 8px
      no-repeat,
    conic-gradient(#0000 30%, blue);
  -webkit-mask: radial-gradient(farthest-side, #0000 calc(100% - 8px), #000 0);
  animation: l13 1s infinite linear;
}
@keyframes l13 {
  100% {
    transform: rotate(1turn);
  }
}

/* Block editor css */
.block-editor h1,
.block-editor h2,
.block-editor h3,
.block-editor h4,
.block-editor h5,
.block-editor h6 {
  font-weight: bold;
}
.block-editor h1 {
  font-size: 2em;
}
.block-editor h2 {
  font-size: 1.7em;
}
.block-editor h3 {
  font-size: 1.4em;
}
.block-editor h4 {
  font-size: 1.1em;
}

.block-editor blockquote {
  border-left: 4px solid #ccc;
  padding-left: 10px;
  margin-left: 0;
  color: #555;
  font-style: italic;
  background-color: #f9f9f9;
}
.block-editor blockquote footer {
  text-align: right;
  padding-right: 4px;
}

/* model-viewer hotspot */
.hotspot {
  opacity: 1;
}
.hotspot:not([data-visible]) {
  opacity: 0.2;
}