@font-face {
  font-family: "gohu";
  src: url("/assets/fonts/gohufont-uni-14.woff2") format("woff2");
}

@font-face {
  font-family: "monapo";
  src: url("/assets/fonts/monapo.woff2") format("woff2");
}

@font-face {
  font-family: "dotgothic";
  src: url("/assets/fonts/DotGothic16-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "pressstart";
  src: url("/assets/fonts/PressStart2P-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "mplusone";
  src: url("/assets/fonts/MPLUS1Code-Light.woff2") format("woff2");
}

@font-face {
  font-family: "sazanami";
  src: url("/assets/fonts/sazanami-gothic_web.woff2") format("woff2");
}

@font-face {
  font-family: "runic";
  src: url("/assets/fonts/NotoSansRunic-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "gentium";
  src: url("/assets/fonts/Gentium-Regular.woff2") format("woff2");
}

@font-face {
  font-family: "noto-serif";
  src: url("/assets/fonts/NotoSerif-Regular.woff2") format("woff2");
}

/***********
* Themes
***********/
:root[data-theme='bramble-day'] {
  color-scheme: light;
  background-image: url("/assets/tablecloth/bramble_day.png");
  animation: movebg 333s linear infinite;

  --primaryColor: #394229;

  --primaryBg: #6085b7;
  --darkerBg: #366d9f;

  --titleBg: var(--darkerBg);

  --textColor: #283028;
  --linkColor: var(--textColor);

  --headerOne: var(--textColor);
  --headerTwo: var(--textColor);
  --headerThree: var(--textColor);

  --borderColor: var(--primaryColor);

  --buttonBorder: var(--borderColor);

  --buttonBg: var(--darkerBg);
  --buttonText: var(--primaryBg);

  --buttonHoverBg: var(--primaryColor);
  --buttonHoverText: var(--darkerBg);
}

:root[data-theme='bramble-night'] {
  color-scheme: dark;
  background-image: url("/assets/tablecloth/bramble_night.png");
  animation: movebg 333s linear infinite;

  --primaryColor: #576864;

  --primaryBg: #15374d;
  --darkerBg: #081838;

  --titleBg: var(--darkerBg);

  --textColor: #7a8475;
  --linkColor: var(--primaryColor);

  --headerOne: var(--textColor);
  --headerTwo: var(--textColor);
  --headerThree: var(--textColor);

  --borderColor: var(--primaryColor);

  --buttonBorder: var(--borderColor);

  --buttonBg: #141c11;
  --buttonHoverBg: #254b19;

  --buttonText: var(--textColor);
}

:root[data-theme='bramble-dusk'] {
  color-scheme: dark;
  background-image: url("/assets/tablecloth/bramble_dusk.png");
  animation: movebg 333s linear infinite;

  --primaryColor: #403028;

  --primaryBg: #f8d0e8;
  --darkerBg: #c08bcd;

  --titleBg: var(--darkerBg);

  --textColor: #65472b;
  --linkColor: var(--primaryColor);

  --headerOne: var(--textColor);
  --headerTwo: var(--textColor);
  --headerThree: var(--textColor);

  --borderColor: var(--primaryColor);

  --buttonBorder: var(--borderColor);

  --buttonBg: var(--darkerBg);
  --buttonText: var(--primaryBg);

  --buttonHoverBg: #8048b8;
  --buttonHoverText: var(--darkerBg);
}

:root[data-theme='indigo'] {
  color-scheme: dark;

  --primaryColor: #264348;

  --primaryBg: #03050588;
  --darkerBg: #01020288;

  --titleBg: #030505CC;

  --textColor: #49818b;
  --linkColor: var(--textColor);

  --headerOne: var(--textColor);
  --headerTwo: var(--textColor);
  --headerThree: var(--textColor);

  --borderColor: var(--primaryColor);

  --buttonBorder: var(--borderColor);

  --buttonBg: var(--primaryBg);
  --buttonHoverBg: var(--darkerBg);

  --buttonText: var(--primaryColor);
}

:root[data-theme='futaba'] {
  background-image: url("/assets/tablecloth/brick.gif");
  animation: movebg 333s linear infinite;
  color-scheme: light;

  --primaryColor: #006421;

  --primaryBg: #efefef;
  --darkerBg: #d6d6d6;

  --titleBg: #ccffcc;

  --textColor: #000000;
  --linkColor: #0000ff;

  --headerOne: var(--textColor);
  --headerTwo: #cc1105;
  --headerThree: #117743;

  --borderColor: #808080;

  --buttonBorder: var(--borderColor);

  --buttonBg: var(--primaryBg);
  --buttonHoverBg: var(--darkerBg);

  --buttonText: var(--textColor);
}

:root[data-theme='space'] {
  background-image: url("/assets/tablecloth/sa-gccx.png");
  /* background-image: url("https://i7.glitter-graphics.org/pub/2160/2160877q1r3wnyq03.gif"); */
  /* background-image: url("https://i.redd.it/h06kxz4llgq41.gif"); */
  animation: movebg 333s linear infinite;

  color-scheme: dark;

  --primaryColor: #ca0088;

  --primaryBg: #64004388;
  --darkerBg: #5a003c88;

  --titleBg: #970065BB;

  --textColor: #fd00a9;
  --linkColor: var(--textColor);

  --headerOne: var(--textColor);
  --headerTwo: var(--textColor);
  --headerThree: var(--textColor);
  --borderColor: var(--primaryColor);

  --buttonBorder: var(--borderColor);

  --buttonBg: var(--primaryBg);
  --buttonHoverBg: var(--darkerBg);

  --buttonText: var(--textColor);
}

:root[data-theme='orange'] {
  background-image: url("/assets/tablecloth/sa-gccx.png");
  /* background-image: url("https://i7.glitter-graphics.org/pub/2160/2160877q1r3wnyq03.gif"); */
  /* background-image: url("https://i.redd.it/h06kxz4llgq41.gif"); */
  animation: movebg 333s linear infinite;

  color-scheme: dark;

  --primaryColor: #ff8000;

  --primaryBg: #994d0099;
  --darkerBg: #66330099;

  --titleBg: #ff8d1a77;

  --textColor: #000000;
  /* --textColor: var(--primaryColor); */
  /* --linkColor: #1a8cff; */

  --headerOne: var(--textColor);
  --headerTwo: var(--textColor);
  --headerThree: var(--textColor);
  --borderColor: var(--primaryColor);

  --buttonBorder: var(--borderColor);

  --buttonBg: var(--primaryBg);
  --buttonHoverBg: var(--darkerBg);

  --buttonText: var(--textColor);
}

:root[data-theme='chrome'] {
  background-image: url("/assets/tablecloth/sa-gccx.png");
  /* background-image: url("/assets/tablecloth/static.gif"); */
  animation: movebg 111s linear infinite;

  --void-steel: #1A2030;
  --dark-steel: #4A5568;
  --gunmetal: #8090A8;
  --steel: #C0C8D8;
  --chrome-white: #E8E8F0;

  color-scheme: dark;

  --primaryColor: var(--gunmetal);

  --primaryBg: var(--dark-steel);
  --darkerBg: var(--void-steel);

  --titleBg: var(--gun-metal);

  --textColor: var(--chrome-white);
  /* --textColor: var(--primaryColor); */
  /* --linkColor: #1a8cff; */

  --headerOne: var(--textColor);
  --headerTwo: var(--textColor);
  --headerThree: var(--textColor);
  --borderColor: var(--primaryColor);

  --buttonBorder: var(--borderColor);

  --buttonBg: var(--primaryBg);
  --buttonHoverBg: var(--darkerBg);

  --buttonText: var(--textColor);
}

/********************
* Functional classes
********************/
.center {
  text-align: center;
}

.blue {
  border-color: blue;
}

.red {
  border-color: red;
}

.underdash {
  text-decoration-line: underline;
  text-decoration-style: dashed;
  text-decoration-thickness: 1px;
}

.broken {
  cursor: not-allowed;
}

/*********
* Funsies
*********/
#mascot {
  position: fixed;
  right: 1rem;
  bottom: 1rem;
}

#mascot:hover {
  cursor: pointer;
}

#mascot img {
  display: block;
  height: 7rem;
  width: auto;

  transform-origin: bottom center;
  animation: mascot-bob 3.3s ease-in-out infinite;
}

@keyframes mascot-bob {

  0%,
  100% {
    transform: translateY(0) rotate(-1deg);
  }

  50% {
    transform: translateY(-8px) rotate(1deg);
  }
}

/**********
* Document
**********/
/* Keep all pixel measurements predictable. */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  /* Prevent mobile browsers from enlarging the bitmap font. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  font-family: "sazanami";
  line-height: 1.3;

  margin: 5.8vw;
}

/* fixed border */
html:before {
  content: "";
  position: fixed;
  box-sizing: border-box;
  border: solid var(--borderColor) 2px;
  width: 100vw;
  height: 100vh;
  pointer-events: none;
}

* {
  scrollbar-width: 2px;
  scrollbar-color: var(--borderColor);
}

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

::-webkit-scrollbar-track {
  background: var(--primaryBg);
}

::-webkit-scrollbar-thumb {
  background: var(--borderColor);
}

::-webkit-scrollbar-thumb:hover {
  background: var(--borderColor);
}


@keyframes movebg {

  0%,
  100% {
    background-position: bottom left;
  }

  50% {
    background-position: top right;
  }

}

* {
  font-synthesis: none;

  font-smooth: never;
  -webkit-font-smoothing: none;
  -mos-osx-font-font-smoothing: none;
}

/******************
* Horizontal lines
*******************/
/* thin */
.headerLine {
  border: none;
  border-top: 1px solid var(--borderColor);
}

/* dashed */
.dashedLine {
  border: none;
  border-top: 1px dashed var(--borderColor);
}

.gridSeparator {
  border: none;
  border-top: 1px dashed var(--borderColor);

  margin: 25px auto;
}

/***************************
* The Grid and its elements
***************************/
/* flickers on mobile; too intensive */
@keyframes pulsingGlow {

  0%,
  100% {
    box-shadow: 0 0 50px var(--borderColor);
  }

  50% {
    box-shadow: 0 0 60px var(--borderColor);
  }
}

.grid {
  background-color: color-mix(in srgb, var(--primaryBg) 77%, transparent);

  padding: 25px;
  outline: 1px var(--borderColor) solid;

  /* animation: pulsingGlow 3s ease-in infinite; */
}

html[data-theme='space'] .grid {
  box-shadow: 0 0 60px var(--borderColor);
}

html[data-theme='space'] .gridTitle {
  text-shadow: 0 0 7px black;
}

html[data-theme='chrome'] .grid {
  box-shadow: 0 0 60px var(--borderColor);
}

html[data-theme='chrome'] .gridTitle {
  text-shadow: 0 0 7px black;
}

.gridTitle {
  /* margin-bottom: 25px; */

  padding: 5px;

  background-color: var(--primaryBg);

  border: 1px solid var(--borderColor);

  text-align: center;
}

.gridTitleInner {
  border: 1px solid var(--borderColor);

  background-color: var(--titleBg);
}

.gridTitleInner>* {
  color: var(--headerOne);

  font-size: 24px;

  font-family: "monapo";
}

.gridSubtitle {
  background-color: var(--darkerBg);
  padding: 10px;
  font-size: 14px;
  border: 1px var(--borderColor);
  border-style: solid none;
}

.gridMembers {
  display: flex;
  flex-wrap: wrap;

  gap: 25px;
  margin-top: 25px;
}

.gridMember {
  color: var(--textColor);
  padding: 25px;
  border: solid var(--borderColor) 1px;
  outline: solid var(--borderColor) 1px;
  outline-offset: -7px;
  background-color: var(--primaryBg);

  flex: 1;
  max-width: 100%;
  min-width: fit-content;

  /* overflow-wrap: anywhere; */
}

.gridMemberTitle {
  margin: 0;
  margin-bottom: 20px;
  padding: 10px;

  outline: 1px solid var(--borderColor);

  background-color: var(--darkerBg);

  color: var(--headerTwo);

  font-family: "monapo";
  font-size: 20px;
}

/********
* Basics
********/
a {
  color: var(--linkColor);
  text-decoration-style: dotted;
  text-decoration-thickness: 1px;
}

ul {
  list-style: "* ";
  list-style-position: inside;
  padding-left: 0;
}

.footnotes {
  list-style-position: outside;
}

li>ul {
  list-style: "> ";
  list-style-position: inside;
  padding-left: 25px;
}

.jis {
  font-family: "dotgothic";
  font-size: inherit;
}

.rune {
  font-family: "runic";
  font-size: inherit;
}

.greek {
  font-family: "gentium";
  font-size: inherit;
}

.ipa {
  font-family: "noto-serif";
  font-size: inherit;
}

.footnotes {
  font-size: smaller;
}

.spin {
  display: inline-block;
  animation: spin 7s linear infinite;
}

@keyframes blinker {
  50% {
    opacity: 0;
  }
}

@keyframes spin {
  from {
    transform: rotate(0deg);
  }

  to {
    transform: rotate(360deg);
  }
}

.blink {
  animation: blinker 1.5s linear infinite;
}

/*********
* Buttons
*********/
button {
  color: var(--buttonText);
  border: 1px solid var(--buttonBorder);
  background: var(--buttonBg);
  margin: 5px;
}

button:hover {}

/**************
* Progress bar
**************/
progress {
  appearance: none;
  margin: 5px;
  border: 1px solid var(--borderColor);
  background-color: transparent;
  color: var(--primaryColor);
}

progress::-moz-progress-bar {
  background-color: var(--primaryColor);
}

progress::-webkit-progress-bar {
  background-color: transparent;
}

progress::-webkit-progress-value {
  background-color: var(--primaryColor);
}

/*****
* FAQ
******/
.answer {
  display: flex;
  text-align: right;
  /* margin-left: auto; */
  /* width: fit-content; */
}

.answer p {
  margin-left: auto;
  text-align: right;
}

/*******
* Audio
*******/
.radio {
  /* border: red 1px solid; */
  margin: auto;

  display: flex;
  align-items: center;
}

.audioControl {
  /* border: green 1px solid; */

  flex: 1;

  display: flex;
  align-items: center;
}

.radioButton {
  font-family: "pressstart";
  font-size: 16px;
  flex: 1;
  height: 50px;
}

button:hover {
  cursor: pointer;
  border-style: inset;
  background-color: var(--buttonHoverBg);
  color: var(--buttonHoverText)
}

/* Stop media and controls from forcing the page wider. */
img,
video,
canvas,
audio,
progress {
  max-width: 100%;
}