@import url("[https://fonts.googleapis.com/css2?family=DotGothic16&display=swap](https://fonts.googleapis.com/css2?family=DotGothic16&display=swap)");
@import url("[https://fonts.googleapis.com/css2?family=Satisfy&display=swap](https://fonts.googleapis.com/css2?family=Satisfy&display=swap)");

@font-face {
  font-family: "rainyhearts";
  src: url("/assets/fonts/rainyhearts.ttf") format("truetype");
}

@font-face {
  font-family: "Spirit";
  src: url("/assets/fonts/Spirit.ttf") format("truetype");
}

@font-face {
  font-family: "Satisfy";
  src: url("/assets/fonts/satisfy.ttf") format("truetype");
}

@font-face {
  font-family: "EmojiFont";
  src: url("/assets/fonts/EmojiFont.ttf") format("truetype");
}

@font-face {
  font-family: "DOSGothic";
  src: url("/assets/fonts/DOSGothic.ttf") format("truetype");
}

@font-face {
  font-family: "yurumoji";
  src: url("/assets/fonts/yurumoji.ttf") format("truetype");
}

:root {
  --border-radius: 7px;

  --color-lightpink: #ffddea;
  --color-pink: #ffbed9;
  --color-darkpink: #da709c;
  --color-darkestpink: #924f63;
  --color-blue: #a3c5ec;
  --color-lightblue: #e4f3ff;
  --color-darkblue: #6b8cad;
  --color-green: #96ca8f;
  --color-lightgreen: #c3e4bf;
  --color-darkgreen: #79a073;

  --color-lightpurple: #eadff9;
  --color-purple: #c6afed;
  --color-darkpurple: #907cb2;

  --color-yellow: #f3e385;
  --color-lightyellow: #fdf5a7;
  --bg-gradientlight: linear-gradient(180deg, #f5f5f5 0%, #d8e2d1 100%);

  --text-shadow:
    -1px -1px 0 var(--color-darkestpink), 1px -1px 0 var(--color-darkestpink),
    -1px 1px 0 var(--color-darkestpink), 1px 1px 0 var(--color-darkestpink),
    2px 2px 3px var(--color-purple);

  --ridge-border-1:
    inset -1px -1px var(--color-purple), inset 1px 1px var(--color-pink),
    inset -2px -2px var(--color-purple), inset 2px 0px var(--color-pink);

  --ridge-border-2:
    inset -1px -1px var(--color-purple), inset 1px 1px var(--color-lightpurple),
    inset -2px -2px var(--color-purple), inset 2px 0px var(--color-lightpurple);
}
body {
  color: var(--color-darkpurple);
  font-family: "rainyhearts";
  background-image: url("/assets/img/tiled/tiles-purple.gif");
  background-repeat: repeat;
}
/* text */

h1 {
  font-family: "Spirit";
  filter: drop-shadow(0px 1px var(--color-purple))
    drop-shadow(0 -1px var(--color-purple))
    drop-shadow(1px 0 var(--color-purple))
    drop-shadow(-1px 0 var(--color-purple))
    drop-shadow(2px 2px 2px var(--color-purple));
  color: var(--color-lightyellow);
}
h2 {
  font-family: "Spirit";
  filter: drop-shadow(0px 1px var(--color-purple))
    drop-shadow(0 -1px var(--color-purple))
    drop-shadow(1px 0 var(--color-purple))
    drop-shadow(-1px 0 var(--color-purple))
    drop-shadow(2px 2px 2px var(--color-purple));
  color: var(--color-lightyellow);
}
h3 {
  font-family: "Spirit";
  filter: drop-shadow(0px 1px var(--color-purple))
    drop-shadow(0 -1px var(--color-purple))
    drop-shadow(1px 0 var(--color-purple))
    drop-shadow(-1px 0 var(--color-purple))
    drop-shadow(2px 2px 2px var(--color-purple));
  color: var(--color-lightyellow);
}
h4 {
  font-family: "Spirit";
  filter: drop-shadow(0px 1px var(--color-purple))
    drop-shadow(0 -1px var(--color-purple))
    drop-shadow(1px 0 var(--color-purple))
    drop-shadow(-1px 0 var(--color-purple))
    drop-shadow(2px 2px 2px var(--color-purple));
  color: var(--color-lightyellow);
}
h5 {
  font-family: "Spirit";
  filter: drop-shadow(0px 1px var(--color-purple))
    drop-shadow(0 -1px var(--color-purple))
    drop-shadow(1px 0 var(--color-purple))
    drop-shadow(-1px 0 var(--color-purple))
    drop-shadow(2px 2px 2px var(--color-purple));
  color: var(--color-lightyellow);
}
h6 {
  font-family: "Spirit";
  filter: drop-shadow(0px 1px var(--color-purple))
    drop-shadow(0 -1px var(--color-purple))
    drop-shadow(1px 0 var(--color-purple))
    drop-shadow(-1px 0 var(--color-purple))
    drop-shadow(2px 2px 2px var(--color-purple));
  color: var(--color-lightyellow);
}

a {
  text-decoration: dashed;
  color: var(--color-purple);
}
a:visited {
  color: var(--color-pink);
}
::selection {
  background: var(--color-yellow);
  color: var(--color-darkpurple);
}
mark {
  background: var(--color-yellow);
  color: var(--color-darkpurple);
}
/* scrollbar */

::-webkit-scrollbar {
  width: 14px;
}

::-webkit-scrollbar:horizontal {
  height: 14px;
}

::-webkit-scrollbar-corner {
  background: var(--color-lightpurple);
}

::-webkit-scrollbar-track:vertical {
  background: linear-gradient(90deg, #dac8f8, #f1eafc 20%);
  border-radius: 5px;
}

::-webkit-scrollbar-track:horizontal {
  background: linear-gradient(180deg, #dac8f8, #f1eafc 20%);
  border-radius: 5px;
}

::-webkit-scrollbar-thumb {
  border: 1.5px solid var(--color-purple);
  border-radius: 5px;
  box-shadow:
    inset 0 -1px 1px #fff,
    inset 0 1px 1px #fff;
}

::-webkit-scrollbar-thumb:vertical {
  background: linear-gradient(
    90deg,
    var(--color-lightpurple) 45%,
    #dac8f8 0,
    var(--color-purple)
  );
}

::-webkit-scrollbar-thumb:horizontal {
  background: linear-gradient(
    180deg,
    var(--color-lightpurple) 45%,
    #dac8f8 0,
    var(--color-purple)
  );
}

::-webkit-scrollbar-button:horizontal:end:increment,
::-webkit-scrollbar-button:horizontal:start:decrement,
::-webkit-scrollbar-button:vertical:end:increment,
::-webkit-scrollbar-button:vertical:start:decrement {
  display: block;
}

::-webkit-scrollbar-button:vertical {
  height: 15px;
}

::-webkit-scrollbar-button:vertical:start:decrement {
  background: white;
  background: url("/assets/img/layout/scroll3.png"), var(--color-lightpurple);
  background-repeat: no-repeat;
  background-position: center;
  -moz-background-size:
    100% auto,
    cover;
  -webkit-background-size:
    100% auto,
    cover;
  -o-background-size:
    100% auto,
    cover;
  background-size:
    100% auto,
    cover;
  border: 1.5px solid var(--color-purple);
  border-radius: 5px;
}

::-webkit-scrollbar-button:vertical:start:increment {
  display: none;
}

::-webkit-scrollbar-button:vertical:end:decrement {
  display: none;
}

::-webkit-scrollbar-button:vertical:end:increment {
  background: white;
  background: url("/assets/img/layout/scroll4.png"), var(--color-lightpurple);
  background-repeat: no-repeat;
  background-position: center;
  -moz-background-size:
    100% auto,
    cover;
  -webkit-background-size:
    100% auto,
    cover;
  -o-background-size:
    100% auto,
    cover;
  background-size:
    100% auto,
    cover;
  border: 1.5px solid var(--color-purple);
  border-radius: 5px;
}

::-webkit-scrollbar-button:horizontal {
  width: 14px;
}
::-webkit-scrollbar-button:horizontal:start:increment {
  display: none;
}
::-webkit-scrollbar-button:horizontal:end:decrement {
  display: none;
}

::-webkit-scrollbar-button:horizontal:start:decrement {
  background: white;
  background:
    url("/assets/img/layout/scroll5.png"),
    linear-gradient(180deg, #e5e5e5, #f0f0f0 20%);
  background-repeat: no-repeat;
  background-position: center;
  -moz-background-size:
    100% auto,
    cover;
  -webkit-background-size:
    100% auto,
    cover;
  -o-background-size:
    100% auto,
    cover;
  background-size:
    100% auto,
    cover;
  background-position: center;
  border-radius: 5px;
  border: 1.5px solid var(--color-purple);
}

::-webkit-scrollbar-button:horizontal:end:increment {
  background: white;
  background:
    url("/assets/img/layout/scroll6.png"),
    linear-gradient(180deg, #e5e5e5, #f0f0f0 20%);
  background-repeat: no-repeat;
  background-position: center;
  -moz-background-size:
    100% auto,
    cover;
  -webkit-background-size:
    100% auto,
    cover;
  -o-background-size:
    100% auto,
    cover;
  background-size:
    100% auto,
    cover;
  background-position: center;
  border-radius: 5px;
  border: 1.5px solid var(--color-purple);
}
table {
  padding: 1rem;
  gap: 1rem;
  margin: 1rem;
  height: auto;
  background: #fffbec;
  border-radius: 20px;
  position: relative;
  box-shadow: inset 5px 0px 15px 10px #ebdfb173;
  border-radius: 10px;
  border: 1px solid var(--color-blue);
  border-collapse: separate;
  border-spacing: 0;
  font-family: "rainyhearts", "DOSGothic", monospace;
  font-size: 1.125rem;
  padding: 1rem;
  filter: drop-shadow(0px 1px var(--color-purple))
    drop-shadow(0 -1px var(--color-purple))
    drop-shadow(1px 0 var(--color-purple))
    drop-shadow(-1px 0 var(--color-purple))
    drop-shadow(2px 2px 2px var(--color-purple));
}

th,
td {
  padding: 0.5em;
  text-align: left;
}

th {
  color: var(--color-lightpink);
  font-family: "rainyhearts", serif;
  font-size: 1.3rem;
  filter: drop-shadow(0px 1px var(--color-darkpurple))
    drop-shadow(0 -1px var(--color-darkpurple))
    drop-shadow(1px 0 var(--color-darkpurple))
    drop-shadow(-1px 0 var(--color-darkpurple))
    drop-shadow(2px 2px 2px var(--color-purple));
}

td {
  font-family: "rainyhearts", "DotGothic16";
}

tr:last-child td {
  border-bottom: none;
}