body {
  background: linear-gradient(135deg, var(--gradient-color-start), var(--gradient-color-end));
  background-size: 200% 200%;
  animation: backgroundMove 15s ease infinite;
  font-family: var(--font-family-paragraph);
  color: var(--text-color);
  margin: 0;
  overflow-x: hidden;
}
@keyframes backgroundMove {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Estilos para evitar el parpadeo entre vistas --------------- */
.preload #gridView,
.preload #listView { visibility: hidden !important; }

/* Mostrar según clase puesta en HTML o BODY ------------------- */
html.grid-view #gridView,
body.grid-view #gridView { 
  display: block !important; 
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

html.grid-view #listView,
body.grid-view #listView { 
  display: none !important; 
  opacity: 0;
  transform: translateY(10px);
}

html.list-view #listView,
body.list-view #listView { 
  display: flex !important; 
  opacity: 1;
  transform: translateY(0);
  transition: opacity 0.3s ease-in-out, transform 0.3s ease-in-out;
}

html.list-view #gridView,
body.list-view #gridView { 
  display: none !important; 
  opacity: 0;
  transform: translateY(10px);
}

a {
  overflow-wrap: break-word;
  text-decoration: none;
}

blockquote {
  margin: 20px 0;
  padding: 15px 20px;
  font-size: 18px;
  line-height: 1.3;
  position: relative;
  color: #afafaf;
  background-color: #000000;
  border-left: 5px solid #c8c8c8;
}

blockquote p {
  margin: 0;
}

code {
  font-size: 0.9rem !important;
  color: #d9d9d9 !important;
  font-weight: 900;
}

.unselectable {
  user-select: none;
}

.text-border {
  text-shadow:
    -1px -1px 0 #000,
    1px -1px 0 #000,
    -1px 1px 0 #000,
    1px 1px 0 #000;
}

.bg-dark {
  --bs-bg-opacity: .5;
}