@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-VariableFont_wght.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");
  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);
}

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

@keyframes movebg {

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

  50% {
    background-position: top right;
  }

}

* {
  font-synthesis: none;

  font-smooth: never;
  -webkit-font-smoothing: antialiased;
  -mos-osx-font-font-smoothing: grayscale;
}

body {
  font-family: "gohu";
  font-size: 14px;

  margin: 111px;
}

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

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

/***************************
* The Grid and its elements
***************************/
.grid {
  display: flex;
  flex-wrap: wrap;

  gap: 25px;

  margin: 50px auto;

  align-content: space-evenly;
}

.gridTitle {
  flex-basis: 100%;

  padding: 5px;

  background-color: var(--primaryBg);

  border: 1px solid var(--borderColor);
  outline-offset: -10px;

  text-align: center;
}

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

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

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

  font-size: 28px;

  font-family: "monopa";
}

.gridSubtitle {
  background-color: var(--darkerBg);
  font-size: 14px;
}

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

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

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

  background-color: var(--darkerBg);

  color: var(--headerTwo);

  font-family: "monopa";
  font-size: 28px;
}

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

h3 {}

/*********
* 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)
}