/* home */
body.theme-index {
  --hot-pink: #5ad1ff;
  --red: #5ad1ff;
  --soft-pink: black;
  --soft-yellow: #201f1f;
  --soft-green: #ff5ec4;

  --main-bg: transparent;
  --main-border: #ff5ec4;

  background-color: #000;
  background-image: url("../../images/backgrounds/background-013.webp");
}

body.theme-index::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.6);
}

body.theme-index .Header__Gif {
  background-image: url("../../images/icons/blood-space.gif");
}

body.theme-index .Header__Nav a.is-active,
body.theme-index .Header__Nav a:hover {
  color: #39ff14;
}

/* borda arco-íris girando no main e .container (parada sem @property) */
@property --border-angle {
  syntax: "<angle>";
  inherits: false;
  initial-value: 0deg;
}

body.theme-index main {
  color: #39ff14;
  text-shadow:
    0 0 4px #39ff14,
    0 0 14px #39ff14,
    0 0 24px #39ff14;
  border: 1px solid transparent;
  background:
    url("../../images/backgrounds/background-013.webp") padding-box,
    conic-gradient(
        from var(--border-angle),
        rgba(255, 94, 196, 0.5),
        rgba(185, 115, 255, 0.5),
        rgba(90, 209, 255, 0.5),
        rgba(57, 255, 20, 0.5),
        rgba(255, 244, 92, 0.5),
        rgba(255, 138, 61, 0.5),
        rgba(255, 94, 196, 0.5)
      )
      border-box;
  box-shadow: 0 0 3px rgba(255, 94, 196, 0.5);
  animation: containerBorderRainbow 6s linear infinite;
}

body.theme-index .container {
  border: 1px solid transparent;
  background:
    linear-gradient(black, black) padding-box,
    conic-gradient(
        from var(--border-angle),
        rgba(255, 94, 196, 0.3),
        rgba(185, 115, 255, 0.3),
        rgba(90, 209, 255, 0.3),
        rgba(57, 255, 20, 0.3),
        rgba(255, 244, 92, 0.3),
        rgba(255, 138, 61, 0.3),
        rgba(255, 94, 196, 0.3)
      )
      border-box;
  animation: containerBorderRainbow 6s linear infinite;
}

@keyframes containerBorderRainbow {
  to {
    --border-angle: 360deg;
  }
}

body.theme-index main p {
  margin-bottom: 6px;
}

body.theme-index main p:last-child {
  margin-bottom: 0;
}

body.theme-index .container::before {
  background-image: none;
}

/* brilho do logo trocando de cor (a @property faz a transição suave) */
@property --logo-glow {
  syntax: "<color>";
  inherits: true;
  initial-value: #ff00e6;
}

body.theme-index .Header__Logo {
  text-shadow:
    0 0 5px var(--logo-glow),
    0 0 15px var(--logo-glow),
    0 0 25px var(--logo-glow);
  animation: logo-glow-cycle 8s linear infinite;
}

body.theme-index .Header__Logo:hover {
  text-shadow:
    0 0 5px #39ff14,
    0 0 15px #39ff14,
    0 0 25px #39ff14;
}

@keyframes logo-glow-cycle {
  0%, 100% { --logo-glow: #ff00e6; }
  17%      { --logo-glow: #00f0ff; }
  33%      { --logo-glow: #ff2e88; }
  50%      { --logo-glow: #fff200; }
  67%      { --logo-glow: #ff6a00; }
  83%      { --logo-glow: #8a2bff; }
}

/*
⠀⣠⡶⠶⣦⡀⠀⠀⢠⣤⡄⠀⠀⠀⠀⢀⣤⡴⠶⠶⠶⣦⣄⡀⠀⠀⢀⣴⣤⢀⣤⡶⠶⢦⡄⠀⠀⣠⣤⡀⠀⠀⠀⠀⣀⣤⠶⠒⠒⠶⣤⡀⠀
⣼⠏⠀⣿⣶⡷⠀⠀⢺⣎⣋⣀⣠⣤⠾⣿⠋⠀⠀⠀⠀⠀⠈⠛⢷⣄⢺⡱⠟⣽⠏⠀⣾⣦⣿⠀⠀⠻⣭⣋⣠⣤⣴⣾⠋⠀⠀⠀⠀⠀⠈⢻⡆
⢹⡆⠀⠉⠉⠁⠀⠀⠀⢈⣩⡿⡿⠡⡐⣯⠀⢰⣿⣿⣆⠀⣠⡶⠶⠾⠿⣷⣄⣹⡄⠀⠉⠙⠁⠀⠀⠀⣀⣴⠟⠋⢹⠁⣄⠀⠀⣼⣿⣳⠀⢈⡿
⠀⠛⢶⣤⣀⣀⣠⣴⠶⠛⠁⠀⢳⣾⠇⠻⣧⣄⣉⣼⠏⠀⢿⡶⠃⠀⠀⠀⠉⠛⢿⣦⣤⣤⣤⣴⠶⠛⠉⠀⠀⠀⠘⠷⠾⠃⠀⠹⢦⣥⣴⠾⠁
*/

/* myself */
body.theme-myself {
  --hot-pink: #b973ff;
  --red: #a32727;
  --soft-pink: rgba(243, 179, 179, 0.9);
  --soft-yellow: #ffefbf;
  --soft-green: #70f0d0;

  --main-bg: rgba(255, 255, 255, 0.55);
  --main-border: #fca7c3;

  background-image: url("../../images/backgrounds/background-007.jpg");
  background-repeat: no-repeat;
  background-size: cover;
}

body.theme-myself main {
  border: 1px solid #70f0d0;
  box-shadow: 0 0 6px #70f0d0;
}

/*
⠀⣠⡶⠶⣦⡀⠀⠀⢠⣤⡄⠀⠀⠀⠀⢀⣤⡴⠶⠶⠶⣦⣄⡀⠀⠀⢀⣴⣤⢀⣤⡶⠶⢦⡄⠀⠀⣠⣤⡀⠀⠀⠀⠀⣀⣤⠶⠒⠒⠶⣤⡀⠀
⣼⠏⠀⣿⣶⡷⠀⠀⢺⣎⣋⣀⣠⣤⠾⣿⠋⠀⠀⠀⠀⠀⠈⠛⢷⣄⢺⡱⠟⣽⠏⠀⣾⣦⣿⠀⠀⠻⣭⣋⣠⣤⣴⣾⠋⠀⠀⠀⠀⠀⠈⢻⡆
⢹⡆⠀⠉⠉⠁⠀⠀⠀⢈⣩⡿⡿⠡⡐⣯⠀⢰⣿⣿⣆⠀⣠⡶⠶⠾⠿⣷⣄⣹⡄⠀⠉⠙⠁⠀⠀⠀⣀⣴⠟⠋⢹⠁⣄⠀⠀⣼⣿⣳⠀⢈⡿
⠀⠛⢶⣤⣀⣀⣠⣴⠶⠛⠁⠀⢳⣾⠇⠻⣧⣄⣉⣼⠏⠀⢿⡶⠃⠀⠀⠀⠉⠛⢿⣦⣤⣤⣤⣴⠶⠛⠉⠀⠀⠀⠘⠷⠾⠃⠀⠹⢦⣥⣴⠾⠁
*/

/* my art */
body.theme-my-art {
  --hot-pink: rgba(245, 174, 155, 0.979);
  --red: #706970;
  --soft-pink: rgb(246, 249, 255);
  --soft-yellow: #f7f1f1;
  --soft-green: rgb(245, 174, 155);

  --main-bg: rgba(240, 240, 240, 0.1);
  --main-border: #dadada;

  background-image: url("../../images/backgrounds/background-014.jpg");
}

body.theme-my-art .Header__Gif {
  background-image: url("../../images/icons/blood-angelcore.gif");
}

:where(body.theme-my-art) .Header__Nav a {
  color: #8b9dc2;
}

body.theme-my-art main {
  color: #8b9dc2;
  border: 12px solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cg fill='%23dadada'%3E%3Cpath d='M18 1 Q18.75 5.25 23 6 Q18.75 6.75 18 11 Q17.25 6.75 13 6 Q17.25 5.25 18 1 Z'/%3E%3Cpath d='M6 13 Q6.75 17.25 11 18 Q6.75 18.75 6 23 Q5.25 18.75 1 18 Q5.25 17.25 6 13 Z'/%3E%3Cpath d='M30 13 Q30.75 17.25 35 18 Q30.75 18.75 30 23 Q29.25 18.75 25 18 Q29.25 17.25 30 13 Z'/%3E%3Cpath d='M18 25 Q18.75 29.25 23 30 Q18.75 30.75 18 35 Q17.25 30.75 13 30 Q17.25 29.25 18 25 Z'/%3E%3Cpath d='M6 0.5 Q6.825 5.175 11.5 6 Q6.825 6.825 6 11.5 Q5.175 6.825 0.5 6 Q5.175 5.175 6 0.5 Z'/%3E%3Cpath d='M30 0.5 Q30.825 5.175 35.5 6 Q30.825 6.825 30 11.5 Q29.175 6.825 24.5 6 Q29.175 5.175 30 0.5 Z'/%3E%3Cpath d='M6 24.5 Q6.825 29.175 11.5 30 Q6.825 30.825 6 35.5 Q5.175 30.825 0.5 30 Q5.175 29.175 6 24.5 Z'/%3E%3Cpath d='M30 24.5 Q30.825 29.175 35.5 30 Q30.825 30.825 30 35.5 Q29.175 30.825 24.5 30 Q29.175 29.175 30 24.5 Z'/%3E%3C/g%3E%3C/svg%3E")
    12 round;
}

body.theme-my-art main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: #f3c9bb;
  background-image: url("../../images/backgrounds/background-022.webp");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.3;
}

.MyArt__Artstation {
  display: block;
  margin-top: 14px;
  color: #8b9dc2;
  transition: color 0.2s;
}

.MyArt__Artstation:hover {
  color: rgb(245, 174, 155);
}

.MyArt__Artstation svg {
  display: block;
  width: 20px;
  height: 20px;
  fill: currentColor;
}

/*
⠀⣠⡶⠶⣦⡀⠀⠀⢠⣤⡄⠀⠀⠀⠀⢀⣤⡴⠶⠶⠶⣦⣄⡀⠀⠀⢀⣴⣤⢀⣤⡶⠶⢦⡄⠀⠀⣠⣤⡀⠀⠀⠀⠀⣀⣤⠶⠒⠒⠶⣤⡀⠀
⣼⠏⠀⣿⣶⡷⠀⠀⢺⣎⣋⣀⣠⣤⠾⣿⠋⠀⠀⠀⠀⠀⠈⠛⢷⣄⢺⡱⠟⣽⠏⠀⣾⣦⣿⠀⠀⠻⣭⣋⣠⣤⣴⣾⠋⠀⠀⠀⠀⠀⠈⢻⡆
⢹⡆⠀⠉⠉⠁⠀⠀⠀⢈⣩⡿⡿⠡⡐⣯⠀⢰⣿⣿⣆⠀⣠⡶⠶⠾⠿⣷⣄⣹⡄⠀⠉⠙⠁⠀⠀⠀⣀⣴⠟⠋⢹⠁⣄⠀⠀⣼⣿⣳⠀⢈⡿
⠀⠛⢶⣤⣀⣀⣠⣴⠶⠛⠁⠀⢳⣾⠇⠻⣧⣄⣉⣼⠏⠀⢿⡶⠃⠀⠀⠀⠉⠛⢿⣦⣤⣤⣤⣴⠶⠛⠉⠀⠀⠀⠘⠷⠾⠃⠀⠹⢦⣥⣴⠾⠁
*/

/* cool stuff */
body.theme-cool-stuff {
  --hot-pink: #2bbac4;
  --red: #63c1f2;
  --soft-pink: rgb(255, 250, 186);
  --soft-yellow: rgba(199, 154, 102, 0.9);
  --soft-green: #21b1ff;

  --main-bg: rgba(20, 110, 130, 0.35);
  --main-border: rgba(238, 219, 176, 0.85);
}

body.theme-cool-stuff::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("../../images/backgrounds/background-008.webp");
  background-repeat: repeat;
  z-index: 0;
  pointer-events: none;
}

body.theme-cool-stuff main {
  color: #9d5cff;
}

body.theme-cool-stuff main::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-image: url("../../images/backgrounds/background-018.webp");
  background-position: bottom center;
  background-repeat: no-repeat;
  background-size: cover;
  opacity: 0.7;
}

body.theme-cool-stuff .Header__Gif {
  background-image: url("../../images/icons/blood-ocean.gif");
}

:where(body.theme-cool-stuff) .Header__Nav a {
  color: #ff7a59;
}

:where(body.theme-cool-stuff) .Header__Nav a:hover,
:where(body.theme-cool-stuff) .Header__Nav a.is-active {
  color: rgba(0, 204, 3, 0.981);
}

body.theme-cool-stuff .container::before {
  background-image: url("../../images/backgrounds/background-019.webp");
  opacity: 0.4;
}

body.theme-cool-stuff .container::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: rgba(217, 184, 171, 0.35);
}

/*
⠀⣠⡶⠶⣦⡀⠀⠀⢠⣤⡄⠀⠀⠀⠀⢀⣤⡴⠶⠶⠶⣦⣄⡀⠀⠀⢀⣴⣤⢀⣤⡶⠶⢦⡄⠀⠀⣠⣤⡀⠀⠀⠀⠀⣀⣤⠶⠒⠒⠶⣤⡀⠀
⣼⠏⠀⣿⣶⡷⠀⠀⢺⣎⣋⣀⣠⣤⠾⣿⠋⠀⠀⠀⠀⠀⠈⠛⢷⣄⢺⡱⠟⣽⠏⠀⣾⣦⣿⠀⠀⠻⣭⣋⣠⣤⣴⣾⠋⠀⠀⠀⠀⠀⠈⢻⡆
⢹⡆⠀⠉⠉⠁⠀⠀⠀⢈⣩⡿⡿⠡⡐⣯⠀⢰⣿⣿⣆⠀⣠⡶⠶⠾⠿⣷⣄⣹⡄⠀⠉⠙⠁⠀⠀⠀⣀⣴⠟⠋⢹⠁⣄⠀⠀⣼⣿⣳⠀⢈⡿
⠀⠛⢶⣤⣀⣀⣠⣴⠶⠛⠁⠀⢳⣾⠇⠻⣧⣄⣉⣼⠏⠀⢿⡶⠃⠀⠀⠀⠉⠛⢿⣦⣤⣤⣤⣴⠶⠛⠉⠀⠀⠀⠘⠷⠾⠃⠀⠹⢦⣥⣴⠾⠁
*/

/* contact */
body.theme-contact {
  --hot-pink: #ee6904;
  --red: #48332a;
  --soft-pink: rgba(255, 224, 145, 0.9);
  --soft-yellow: #fff3b0;
  --soft-green: #db4c00;

  --main-bg: rgba(255, 252, 235, 0.4);
  --main-border: #ffcc4d;

  background-image: url("../../images/backgrounds/background-009.webp");
}

body.theme-contact .Header__Gif {
  background-image: url("../../images/icons/blood-contact.gif");
}

body.theme-contact main {
  border: 12px solid transparent;
  border-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='36' height='36'%3E%3Cg fill='%23e0263f' fill-opacity='0.3'%3E%3Cpath d='M18 9.5 C18 9.5 14.5 6.7 14.5 4.5 C14.5 3 15.8 2.3 17 3.1 C17.4 3.4 17.8 4 18 4.3 C18.2 4 18.6 3.4 19 3.1 C20.2 2.3 21.5 3 21.5 4.5 C21.5 6.7 18 9.5 18 9.5 Z'/%3E%3Cpath d='M6 21.5 C6 21.5 2.5 18.7 2.5 16.5 C2.5 15 3.8 14.3 5 15.1 C5.4 15.4 5.8 16 6 16.3 C6.2 16 6.6 15.4 7 15.1 C8.2 14.3 9.5 15 9.5 16.5 C9.5 18.7 6 21.5 6 21.5 Z'/%3E%3Cpath d='M30 21.5 C30 21.5 26.5 18.7 26.5 16.5 C26.5 15 27.8 14.3 29 15.1 C29.4 15.4 29.8 16 30 16.3 C30.2 16 30.6 15.4 31 15.1 C32.2 14.3 33.5 15 33.5 16.5 C33.5 18.7 30 21.5 30 21.5 Z'/%3E%3Cpath d='M18 33.5 C18 33.5 14.5 30.7 14.5 28.5 C14.5 27 15.8 26.3 17 27.1 C17.4 27.4 17.8 28 18 28.3 C18.2 28 18.6 27.4 19 27.1 C20.2 26.3 21.5 27 21.5 28.5 C21.5 30.7 18 33.5 18 33.5 Z'/%3E%3Cpath d='M6 10.9 C6 10.9 1.1 6.98 1.1 3.9 C1.1 1.8 2.92 0.82 4.6 1.94 C5.16 2.36 5.72 3.2 6 3.62 C6.28 3.2 6.84 2.36 7.4 1.94 C9.08 0.82 10.9 1.8 10.9 3.9 C10.9 6.98 6 10.9 6 10.9 Z'/%3E%3Cpath d='M30 10.9 C30 10.9 25.1 6.98 25.1 3.9 C25.1 1.8 26.92 0.82 28.6 1.94 C29.16 2.36 29.72 3.2 30 3.62 C30.28 3.2 30.84 2.36 31.4 1.94 C33.08 0.82 34.9 1.8 34.9 3.9 C34.9 6.98 30 10.9 30 10.9 Z'/%3E%3Cpath d='M6 34.9 C6 34.9 1.1 30.98 1.1 27.9 C1.1 25.8 2.92 24.82 4.6 25.94 C5.16 26.36 5.72 27.2 6 27.62 C6.28 27.2 6.84 26.36 7.4 25.94 C9.08 24.82 10.9 25.8 10.9 27.9 C10.9 30.98 6 34.9 6 34.9 Z'/%3E%3Cpath d='M30 34.9 C30 34.9 25.1 30.98 25.1 27.9 C25.1 25.8 26.92 24.82 28.6 25.94 C29.16 26.36 29.72 27.2 30 27.62 C30.28 27.2 30.84 26.36 31.4 25.94 C33.08 24.82 34.9 25.8 34.9 27.9 C34.9 30.98 30 34.9 30 34.9 Z'/%3E%3C/g%3E%3C/svg%3E")
    12 round;
}

body.theme-contact .container {
  border: 1px solid rgb(255, 255, 255);
  box-shadow: 0 0 6px rgba(255, 255, 255, 0.579);
}

/*
⠀⣠⡶⠶⣦⡀⠀⠀⢠⣤⡄⠀⠀⠀⠀⢀⣤⡴⠶⠶⠶⣦⣄⡀⠀⠀⢀⣴⣤⢀⣤⡶⠶⢦⡄⠀⠀⣠⣤⡀⠀⠀⠀⠀⣀⣤⠶⠒⠒⠶⣤⡀⠀
⣼⠏⠀⣿⣶⡷⠀⠀⢺⣎⣋⣀⣠⣤⠾⣿⠋⠀⠀⠀⠀⠀⠈⠛⢷⣄⢺⡱⠟⣽⠏⠀⣾⣦⣿⠀⠀⠻⣭⣋⣠⣤⣴⣾⠋⠀⠀⠀⠀⠀⠈⢻⡆
⢹⡆⠀⠉⠉⠁⠀⠀⠀⢈⣩⡿⡿⠡⡐⣯⠀⢰⣿⣿⣆⠀⣠⡶⠶⠾⠿⣷⣄⣹⡄⠀⠉⠙⠁⠀⠀⠀⣀⣴⠟⠋⢹⠁⣄⠀⠀⣼⣿⣳⠀⢈⡿
⠀⠛⢶⣤⣀⣀⣠⣴⠶⠛⠁⠀⢳⣾⠇⠻⣧⣄⣉⣼⠏⠀⢿⡶⠃⠀⠀⠀⠉⠛⢿⣦⣤⣤⣤⣴⠶⠛⠉⠀⠀⠀⠘⠷⠾⠃⠀⠹⢦⣥⣴⠾⠁
*/

/* journal */
body.theme-journal {
  --hot-pink: rgb(250, 202, 30);
  --red: rgb(250, 202, 30);
  --soft-pink: rgba(6, 18, 2, 0.9);
  --soft-yellow: #8d1919ad;
  --soft-green: rgb(250, 202, 30);

  --main-bg: #000000;
  --main-border: rgb(250, 202, 30);

  background-image: url("../../images/backgrounds/background-010.png");
}

body.theme-journal::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: url("../../images/backgrounds/background-015.webp");
  background-repeat: repeat;
  z-index: 0;
  opacity: 0.5;
  pointer-events: none;
}

:where(body.theme-journal) .Header__Nav a {
  color: #64acd9e6;
}

body.theme-journal .container::before {
  background-image: url("../../images/backgrounds/background-010.png");
  opacity: 0.2;
}

body.theme-journal .container {
  border: 1px solid rgba(255, 255, 255, 0.452);
  border-left: none;
  border-right: none;
  --side-border-image: url("../../images/dividers/833104ipiqb4d5wk-vertical.png");
  --side-border-ratio: 34 / 325;
  --side-border-fill: linear-gradient(#c25046, #103316);
}

/* deixa o blood.gif vermelho verde-claro */
body.theme-journal .Header__Gif {
  filter: hue-rotate(100deg) saturate(0.9) brightness(1.35);
}

/*
⠀⣠⡶⠶⣦⡀⠀⠀⢠⣤⡄⠀⠀⠀⠀⢀⣤⡴⠶⠶⠶⣦⣄⡀⠀⠀⢀⣴⣤⢀⣤⡶⠶⢦⡄⠀⠀⣠⣤⡀⠀⠀⠀⠀⣀⣤⠶⠒⠒⠶⣤⡀⠀
⣼⠏⠀⣿⣶⡷⠀⠀⢺⣎⣋⣀⣠⣤⠾⣿⠋⠀⠀⠀⠀⠀⠈⠛⢷⣄⢺⡱⠟⣽⠏⠀⣾⣦⣿⠀⠀⠻⣭⣋⣠⣤⣴⣾⠋⠀⠀⠀⠀⠀⠈⢻⡆
⢹⡆⠀⠉⠉⠁⠀⠀⠀⢈⣩⡿⡿⠡⡐⣯⠀⢰⣿⣿⣆⠀⣠⡶⠶⠾⠿⣷⣄⣹⡄⠀⠉⠙⠁⠀⠀⠀⣀⣴⠟⠋⢹⠁⣄⠀⠀⣼⣿⣳⠀⢈⡿
⠀⠛⢶⣤⣀⣀⣠⣴⠶⠛⠁⠀⢳⣾⠇⠻⣧⣄⣉⣼⠏⠀⢿⡶⠃⠀⠀⠀⠉⠛⢿⣦⣤⣤⣤⣴⠶⠛⠉⠀⠀⠀⠘⠷⠾⠃⠀⠹⢦⣥⣴⠾⠁
*/

/* dance party */
body.theme-dance-party {
  --hot-pink: #ff2fd6;
  --red: #2fe6ff;
  --soft-pink: #000;
  --soft-yellow: rgba(255, 255, 255, 0.5);
  --soft-green: rgba(255, 255, 255, 0.5);

  --main-bg: rgba(10, 0, 20, 0.6);
  --main-border: #ff2fd6;

  background-color: #000;
}

body.theme-dance-party::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background-color: rgba(0, 0, 0, 0.9);
}

body.theme-dance-party .Header__Gif {
  background-image: url("../../images/icons/blood-disco.gif");
}

body.theme-dance-party .Header__Logo {
  text-shadow:
    0 0 5px var(--hot-pink),
    0 0 15px var(--hot-pink),
    0 0 25px var(--hot-pink);
}

body.theme-dance-party .Header__Logo:hover {
  text-shadow:
    0 0 5px var(--red),
    0 0 15px var(--red),
    0 0 25px var(--red);
}

body.theme-dance-party .container {
  border-color: rgba(255, 255, 255, 0.5);
}

/* no celular a bandeja some, então o main precisa de espaço embaixo */
@media (max-width: 599px) {
  body.theme-dance-party .container {
    padding-bottom: 24px;
  }
}

body.theme-dance-party .container::before {
  background-image: none;
}

body.theme-dance-party main {
  color: #fff;
  text-shadow:
    0 0 6px var(--hot-pink),
    0 0 16px var(--hot-pink);
}

/* aqui o cursor JS se esconde (dance-party.js) e aparece o nativo (mãozinha "grab") */
body.theme-dance-party main,
body.theme-dance-party .DanceTray {
  cursor: auto;
}

/*
⠀⣠⡶⠶⣦⡀⠀⠀⢠⣤⡄⠀⠀⠀⠀⢀⣤⡴⠶⠶⠶⣦⣄⡀⠀⠀⢀⣴⣤⢀⣤⡶⠶⢦⡄⠀⠀⣠⣤⡀⠀⠀⠀⠀⣀⣤⠶⠒⠒⠶⣤⡀⠀
⣼⠏⠀⣿⣶⡷⠀⠀⢺⣎⣋⣀⣠⣤⠾⣿⠋⠀⠀⠀⠀⠀⠈⠛⢷⣄⢺⡱⠟⣽⠏⠀⣾⣦⣿⠀⠀⠻⣭⣋⣠⣤⣴⣾⠋⠀⠀⠀⠀⠀⠈⢻⡆
⢹⡆⠀⠉⠉⠁⠀⠀⠀⢈⣩⡿⡿⠡⡐⣯⠀⢰⣿⣿⣆⠀⣠⡶⠶⠾⠿⣷⣄⣹⡄⠀⠉⠙⠁⠀⠀⠀⣀⣴⠟⠋⢹⠁⣄⠀⠀⣼⣿⣳⠀⢈⡿
⠀⠛⢶⣤⣀⣀⣠⣴⠶⠛⠁⠀⢳⣾⠇⠻⣧⣄⣉⣼⠏⠀⢿⡶⠃⠀⠀⠀⠉⠛⢿⣦⣤⣤⣤⣴⠶⠛⠉⠀⠀⠀⠘⠷⠾⠃⠀⠹⢦⣥⣴⠾⠁
*/

/* rastros do cursor (src/js/*-cursor.js) */
.space-cursor-star,
.bubble-cursor-bubble,
.heart-cursor-heart,
.spore-cursor-spore {
  position: fixed;
  top: 0;
  left: 0;
  pointer-events: none;
  z-index: 9999;
  will-change: transform, opacity;
}

.space-cursor-star svg,
.heart-cursor-heart svg {
  display: block;
  fill: currentColor;
}

/* fica parada onde nasce; o rastro é a fileira de estrelas piscando */
.space-cursor-star {
  animation: starTwinkle ease-out forwards;
}

@keyframes starTwinkle {
  0% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }

  25% {
    transform: translate(-50%, -50%) scale(1.1);
    opacity: 1;
  }

  60% {
    transform: translate(-50%, -50%) scale(0.85);
    opacity: 0.9;
  }

  100% {
    transform: translate(-50%, -50%) scale(0);
    opacity: 0;
  }
}

.bubble-cursor-bubble {
  border-radius: 50%;
  background: radial-gradient(
    circle at 30% 30%,
    rgba(255, 255, 255, 1),
    rgba(150, 220, 255, 0.8) 55%,
    rgba(80, 170, 230, 0.45) 100%
  );
  border: 1.5px solid rgba(255, 255, 255, 0.95);
  animation: bubbleFloat ease-out forwards;
}

@keyframes bubbleFloat {
  0% {
    transform: translate(-50%, -50%) translate(0, 0) scale(0.4);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) translate(var(--dx), var(--dy)) scale(1);
    opacity: 0;
  }
}

.heart-cursor-heart {
  color: #e0263f;
  animation: heartFloat ease-out forwards;
}

.heart-cursor-heart svg,
.spore-cursor-spore {
  image-rendering: pixelated;
  image-rendering: crisp-edges;
}

@keyframes heartFloat {
  0% {
    transform: translate(-50%, -50%) translate(0, 0) rotate(0deg) scale(0.5);
    opacity: 0.9;
  }

  50% {
    transform: translate(-50%, -50%)
      translate(var(--wobble), calc(var(--rise) * 0.5))
      rotate(calc(var(--rotate) * 0.5)) scale(1);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) translate(var(--drift), var(--rise))
      rotate(var(--rotate)) scale(0.85);
    opacity: 0;
  }
}

.spore-cursor-spore {
  animation: sporeFloat ease-out forwards;
}

@keyframes sporeFloat {
  0% {
    transform: translate(-50%, -50%) translate(0, 0) scale(0.6);
    opacity: 0.9;
  }

  50% {
    transform: translate(-50%, -50%)
      translate(var(--wobble), calc(var(--rise) * 0.5)) scale(1);
    opacity: 1;
  }

  100% {
    transform: translate(-50%, -50%) translate(var(--drift), var(--rise))
      scale(0.7);
    opacity: 0;
  }
}