/* ============================== */
/* TEMA VAPORWAVE LIGHT
/* ============================== */
html.vapor-l {
  /* Fundo geral */
  --bg-color: hsl(260, 100%, 85%);
  --bg-image:
    linear-gradient(to right, #fff8, transparent 1px),
    linear-gradient(to bottom, #fff8, transparent 1px),
    linear-gradient(to bottom, hsl(200, 100%, 80%), hsl(260, 100%, 85%), hsl(300, 100%, 90%));
  --bg-size: 32px 32px, 32px 32px, cover;
  --bg-pos: center;
  --bg-repeat: repeat, repeat, no-repeat;

  /* Texto */
  --text-color: #333;

  /* Links */
  --accent-color: hsl(200, 100%, 40%);
  --accent-color-2: hsl(330, 100%, 60%);

  /* Fonte */
  --font-family: Verdana, sans-serif;
  --font-size: 11pt;

  /* Caixas */
  --div-border: 1px solid rgba(0, 0, 0, 0.5);
  --div-bg: hsla(300, 100%, 100%, 0.5);
  --inner-bg: hsla(180, 100%, 100%, 0.75);

  /* Estética */
  --div-shadow: none;
  --div-corner: 0;

  /* Espaçamento */
  --div-padding: 15px;
  --div-margin: 15px;

  /* Transições */
  --transition-time: 0;

  /* Glow de link */
  --link-glow: none;
}

/* ============================== */
/* TEMA VAPORWAVE DARK
/* ============================== */
html.vapor-d {
  /* Fundo geral */
  --bg-color: black;
  --bg-image: url('/assets/bg/bg-vapor3.jpg');
  --bg-size: cover;
  --bg-pos: center;
  --bg-repeat: no-repeat;

  /* Texto */
  --text-color: hsl(270, 0%, 90%);

  /* Links */
  --accent-color: hsl(330, 100%, 60%);
  --accent-color-2: hsl(190, 100%, 50%);

  /* Fonte */
  --font-family: Verdana, sans-serif;
  --font-size: 11pt;

  /* Caixas */
  --div-border: 1px solid hsla(330, 100%, 50%, 0.3);
  --div-bg: hsla(240, 20%, 0%, 0.5);
  --inner-bg: hsla(270, 0%, 0%, 0.75);

  /* Estética */
  --div-shadow: none;
  --div-corner: 0px;

  /* Espaçamento */
  --div-padding: 15px;
  --div-margin: 15px;

  /* Transições */
  --transition-time: 0.3s;

  /* Glow de link */
  --link-glow: #f00 -1px 0 1px, #0ff 1px 0 1px;
}

html.vapor-d a {
  text-shadow: #f000 -10px 0 4px, #0ff0 10px 0 4px;
  transition: var(--transition-time);
}

html.vapor-d a:hover {
  text-shadow: var(--link-glow);
  transition: var(--transition-time);
}

html.vapor-d #vhs-clock {
  display: block;
}

/* ============================== */
/* TEMA AERO
/* ============================== */
html.aero {
  /* Fundo geral */
  --bg-color: #067;
  --bg-image:
    url('/assets/bg/bg-vista.jpg');
  --bg-size: cover;
  --bg-pos: center;
  --bg-repeat: no-repeat;

  /* Texto */
  --text-color: black;

  /* Links */
  --accent-color: hsl(220, 100%, 30%);
  --accent-color-2: hsl(220, 100%, 30%);

  /* Fonte */
  --font-family: 'Segoe UI', Tahoma, Verdana, sans-serif;
  --font-size: 11pt;

  /* Caixas */
  --div-border: 1px solid rgba(255, 255, 255, 0.7);
  --div-bg: linear-gradient(to bottom right, hsla(210, 50%, 95%, 0.5), hsla(210, 25%, 80%, 0.5));
  --inner-bg: linear-gradient(to bottom right, hsla(210, 50%, 95%, 0.8), hsla(210, 25%, 80%, 0.8));

  /* Estética */
  --div-shadow:
    hsla(0, 0%, 100%, 0.25) inset 0 0 5px,
    hsla(210, 50%, 10%, 0.8) 0 0 10px;
  --div-corner: 7px;

  /* Espaçamento */
  --div-padding: 15px;
  --div-margin: 20px;

  /* Transições */
  --transition-time: 0s;

  /* Glow de link */
  --link-glow: none;
}

html.aero .inner-box,
html.aero .status,
html.aero select,
html.aero textarea,
html.aero .chars-inner-box,
html.aero .stages-inner-box {
  border-radius: 7px;
}

html.aero hr {
  box-shadow: none;
}

html.aero button {
  color: white;
  text-shadow: rgba(0, 0, 0, 0.8) 1px 1px 1px;
  border: 1px solid black;
  border-radius: 5px;
  background:
    linear-gradient(
      hsla(0, 0%, 100%, 0.2) 0%,
      hsla(0, 0%, 100%, 0.1) 50%,
      hsla(0, 0%, 0%, 0.75) 50%,
      hsla(0, 0%, 0%, 0) 90%
    ),
    hsl(210, 100%, 30%);
  box-shadow:
    inset 0 0 1px hsl(210, 100%, 100%);
}

html.aero button:active {
  background:
    linear-gradient(
      hsla(0, 0%, 0%, 0.5),
      transparent,
      hsla(0, 0%, 100%, 0.2)
    ),
    hsl(210, 100%, 30%);
  box-shadow: none;
}

html.aero .site-footer {
  color: white;
  text-shadow: black 1px 1px 1px;
}

/* ============================== */
/* TEMA MIKU
/* ============================== */
html.miku {
  /* Fundo geral */
  --bg-color: black;
  --bg-image: linear-gradient(hsl(220,100%,5%) 0%, hsl(210,100%,10%) 75%, hsl(200,100%,20%) 100%);
  --bg-size: cover;
  --bg-pos: center;
  --bg-repeat: no-repeat;

  /* Texto */
  --text-color: #fff;

  /* Links */
  --accent-color: hsl(330, 100%, 60%);
  --accent-color-2: hsl(190, 100%, 50%);

  /* Fonte */
  --font-family: Verdana, sans-serif;
  --font-size: 11pt;

  /* Caixas */
  --div-border: 1px solid hsla(190, 100%, 50%, 1);
  --div-bg: hsla(200, 100%, 5%, 0.75);
  --inner-bg: hsla(200, 100%, 10%, 0.75);

  /* Estética */
  --div-shadow: hsla(190, 100%, 50%, 0.5) 0 0 10px;
  --div-corner: 0;

  /* Espaçamento */
  --div-padding: 15px;
  --div-margin: 15px;

  /* Transições */
  --transition-time: 0.3s;

  /* Glow de link */
  --link-glow: hsl(190, 100%, 50%) 0 0 10px;
}

html.miku button {
  background:
    linear-gradient(
      hsl(195, 100%, 25%) 0%,
      hsl(200, 100%, 20%) 50%,
      hsl(205, 100%, 15%) 50%,
      hsl(210, 100%, 10%) 100%
    );
  color: white;
  text-shadow: hsl(190, 100%, 50%) 0 0 5px;
  border: 1px solid black;
  border-radius: 3px;
  box-shadow: inset hsla(190, 100%, 50%, 0.5) 0 0 3px;
}

html.miku button:active {
  box-shadow: none;
  background:
    linear-gradient(
      to top,
      hsl(195, 100%, 25%),
      hsl(200, 100%, 20%),
      hsl(205, 100%, 15%),
      hsl(210, 100%, 10%)
    );
}

/* ============================== */
/* TEMA CYBERPUNK
/* ============================== */
html.cyber {
  /* Fundo geral */
  --bg-color: black;
  --bg-image: linear-gradient(hsl(350,50%,15%) 0%, hsl(300,50%,5%) 50%, hsl(200,50%,4%) 100%);
  --bg-size: cover;
  --bg-pos: center;
  --bg-repeat: no-repeat;

  /* Texto */
  --text-color: hsl(182, 80%, 55%);

  /* Links */
  --accent-color: hsl(1, 100%, 65%);
  --accent-color-2: hsl(1, 100%, 65%);

  /* Fonte */
  --font-family: "Rajdhani", Helvetica, sans-serif;
  --font-size: 19px;

  /* Caixas */
  --div-border: 1px solid hsl(1, 100%, 65%);
  --div-bg: hsla(210, 50%, 7%, 0.5);
  --inner-bg: hsla(210, 50%, 7%, 0.5);

  /* Estética */
  --div-shadow: none;
  --div-corner: 0;

  /* Espaçamento */
  --div-padding: 15px;
  --div-margin: 15px;

  /* Transições */
  --transition-time: 0s;

  /* Glow de link */
  --link-glow: hsl(0, 100%, 65%) 0 0 5px, hsl(0, 100%, 65%) 0 0 10px;

  font-weight: 600;
  line-height: 1.1;
}

html.cyber h1,
html.cyber h2,
html.cyber h3,
html.cyber h4,
html.cyber h5,
html.cyber h6 {
  color: white;
  font-weight: 600;
}

html.cyber a,
html.cyber a:hover {
  text-decoration: none;
}

html.cyber hr {
  border-top: 1px solid hsl(185, 100%, 70%);
}

html.cyber select {
  background: hsl(210, 50%, 6%);
  font-weight: 600;
}

html.cyber .nav-list li+li {
  margin-top: 8px;
}

/* ============================== */
/* TEMA CYBERPUNK 2
/* ============================== */
html.cyber2 {
  /* Fundo geral */
  --bg-color: black;
  --bg-image:
    linear-gradient(rgba(0,0,0,.8), rgba(0,0,0,.8)),
    url('/assets/bg/bg-cyber.jpg');
  --bg-size: cover;
  --bg-pos: center;
  --bg-repeat: no-repeat;

  /* Texto */
  --text-color: white;

  /* Links */
  --accent-color: yellow;
  --accent-color-2: cyan;

  /* Fonte */
  --font-family: "Play", Helvetica, sans-serif;
  --font-size: 13pt;

  /* Caixas */
  --div-border: 1px solid yellow;
  --div-bg: hsla(0, 0%, 0%, 0.5);
  --inner-bg: hsla(0, 0%, 0%, 0.5);

  /* Estética */
  --div-shadow: none;
  --div-corner: 0;

  /* Espaçamento */
  --div-padding: 15px;
  --div-margin: 15px;

  /* Transições */
  --transition-time: 0s;

  /* Glow de link */
  --link-glow: inherit;

  font-weight: 300;
}

html.cyber2 h1,
html.cyber2 h2,
html.cyber2 h3,
html.cyber2 h4,
html.cyber2 h5,
html.cyber2 h6 {
  font-family: "Chakra Petch", Helvetica, sans-serif;
  color: cyan;
  font-weight: 500;
}

html.cyber2 select {
  background: black;
}

/* ============================== */
/* TEMA RPG
/* ============================== */
html.rpg {
  --bg-color: black;
  --bg-image: linear-gradient(#0008), var(--div-bg);
  --bg-size: auto;
  --bg-pos: auto;
  --bg-repeat: repeat;
  --text-color: white;
  --accent-color: hsl(190, 100%, 50%);
  --accent-color-2: hsl(190, 100%, 70%);
  --font-family: MS Gothic, Verdana, sans-serif;
  --font-size: 12pt;
  --div-border: double 3px white;
  --div-bg: linear-gradient(to bottom right, hsl(225, 80%, 30%), hsl(240, 80%, 10%));
  --div-shadow: none;
  --div-corner: 5px;
  --div-padding: 15px;
  --div-margin: 15px;
  --inner-bg: hsl(240, 80%, 10%);
  --transition-time: 0;
  --link-glow: inherit;

  line-height: 1.3;
  text-shadow: 1px 1px 0 black;
}