main {
	padding: 15px; padding-top: 10px;
	flex: 1 1 auto;
}

.note {
	margin: 10px auto; padding: 10px 15px;
  width: 100%;
  box-sizing: border-box;
	max-width: 500px;
	border: 1px solid var(--note-border-color);
	border-radius: 10px;
  transition: all 100ms ease-out;
  transform-style: preserve-3d;
}

.note[style]::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: var(--thumbnail);
  background-position: center;
  background-size: cover;
  z-index: -5;
}

.note[style]::after {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  background-image: linear-gradient(to right, var(--background), transparent);
  background-position: center;
  background-size: cover;
  backdrop-filter: blur(3px);
  z-index: -4;
  transition: all 100ms;
}
.note[style]:hover::after {
  backdrop-filter: blur(0px);
  transition: all 500ms;
}

.note:first-child {
	margin-top: 0;
}

.note > a {
  position: absolute;
  left: 0; right: 0;
  top: 0; bottom: 0;
  z-index: 1;
}

.note--title {
	font-size: 1.1rem;
  font-weight: 500;
  filter: drop-shadow(1px 1px var(--background));
}

.note--description {
	font-size: 0.9rem;
	opacity: 90%;
}

.note--information {
  display: flex;
  flex-wrap: wrap;
}

.note--information,
.note--information * {
	font-size: 0.8rem;
	opacity: 70%;
  vertical-align: baseline;
}

.note--information > *:not(:first-of-type)::before {
  content: "•";
  margin-inline: 4px;
}

.note--information--author {
  font-weight: 700;
}
.note--information--author:hover {
  opacity: 100%;
}
.note--information--created, .note--information--views {
  font-style: italic;
}

.note--keywords {
  position: relative;
  z-index: 2;
  padding-block: 5px;
	transform: translateX(-3px);
  text-wrap: nowrap;
  overflow: auto;
}

.note--keywords:not(:has(*)) {
  display: none;
}

.note--keywords a {
	display: inline-block;
	font-size: 0.9rem;
  font-style: italic;
	margin: 0 3px;
	padding: 0 10px;
	background: var(--keyword-background);
	color: var(--keyword-text-color);
	border-radius: 4px;
  transition: all 100ms ease;
}

/* HOVER EFFECTS */
@media (hover: hover) { 
/* 	.note:hover {
    box-shadow: 3px 3px var(--note-hover-border-color);
    border: 1px solid var(--note-hover-border-color);
    transform: translate(-3px, -3px);
    transition: all 100ms ease, border 0;
	}
  .note:has(.note--keywords > a:hover) {
    background: transparent;
    border: 1px solid var(--note-border-color);
    box-shadow: 3px 3px var(--note-border-color);
    transform: translate(-3px, -3px);
  }
  
	.note:hover .note--keywords a:hover {
    background: var(--background);
    transform: translate(-1px, -1px);
    outline: 1px solid var(--note-hover-border-color);
    box-shadow: 1px 1px 0px 1px var(--note-hover-border-color);
	} */
  
  .note:hover {
    box-shadow: 0px 0px 0px 2px var(--note-hover-border-color);
    border: 1px solid var(--note-hover-border-color);
    transition: none;
    --ripple-color: var(--note-active-background);
  }
  
  /* ACTIVES */
  .note:not(.note:has(.note--keywords a:active)):active {
    background: var(--note-active-background);

    box-shadow: 0px 0px 0px 1px var(--note-hover-border-color);
    border: 1px solid transparent;
    transform: translate(0, 0);
    transition: all 50ms ease-out;
  }
  
  .note .note--keywords a:active,
  .note:hover .note--keywords a:active {
    box-shadow: 0px 0px 0px 0px var(--note-hover-border-color);
    background: transparent;
    transform: translate(0, 0);
    transition: all 50ms ease;
  }
}

@media (hover: none) {
  .note {
    transition: all 100ms;
    --ripple-color: var(--note-active-background);
  }
  
  .note:not(:has(.note--keywords > a:active)):active {
    border: 1px solid royalblue;
    transition: all 0ms;
  }
  
  .note .note--keywords a:active {
    background: var(--background);
    box-shadow: 0px 0px 0px 1px var(--note-hover-border-color);
    transition: all 0ms;
  }
}