:root {
  --bodyft: 'Space Mono', monospace;
  --headerft: Wilhelm, Georgia, serif;
  --pkmnft: Pokemon DP Pro, serif;

  --background-image: url('./img/black-orchid.png'), linear-gradient(#222, #96241a);
  --header-image: url('./img/headertest.png');
  --footer-image: url('./img/footertest.png');

  --lightergrey: #e3d8e5;
  --lightgrey: #AAA;
  --grey: #796e70;
  --darkgrey: #333;
  --darkergrey: #222;

  --darkred: #b90618;
  --brightred: #ff2c00;
  --orange: #fa763f;
  --beige: #fed4cc;
}

@font-face {
  font-family: Pokemon DP Pro;
  src: url(./fonts/pokemon-dp-pro.ttf);
}

.space-mono-regular {
  font-family: "Space Mono", monospace;
  font-weight: 400;
  font-style: normal;
}

.space-mono-bold {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-style: normal;
}

.space-mono-regular-italic {
  font-family: "Space Mono", monospace;
  font-weight: 400;
  font-style: italic;
}

.space-mono-bold-italic {
  font-family: "Space Mono", monospace;
  font-weight: 700;
  font-style: italic;
}

* {
  margin: 0;
  padding: 0;
}

body {
  background-color: var(--darkred);
  background-image: var(--background-image);
  background-attachment: fixed;
  font: 1rem var(--bodyft);
  color: var(--lightergrey);
}

main section,
#main-footer,
#main-header {
  border-style: inset;
  border-width: 2px;
  border-color: var(--darkergrey);
}

#main-menu {
  font: 1.5em var(--pkmnft);
  font-weight: bold;
  width: 100%;
}

#main-menu ul {
  list-style: none;
  margin: 0;
  padding: 0;
  text-align: center;
}

#main-menu li a {
  padding: 5px;
  margin: 3px;
  background: var(--darkergrey);
  color: var(--darkred);
  text-align: center;
  text-decoration: none;
  transition: 0.5s ease;
  border-radius: 10px;

}

#main-menu li a:hover,
#main-menu li a:focus {
  background: var(--lightergrey);
  color: var(--grey);
  transition: 0.5s ease;
}

div.menu {
  background: var(--darkergrey);
  color: var(--darkred);
  border-style: inset;
  border-width: 2px;
  border-color: var(--darkergrey);
  width: 200px;
  height: 200px;
  overflow: auto;
  scrollbar-color: var(--darkred) var(--darkergrey);
  scrollbar-width: thin;
  font: 1rem var(--bodyft);
  margin: auto;
  box-sizing: border-box;
  padding: 10px;
}

main {
  margin-top: 10px;
}

main section {
  padding: 15px;
  background: var(--darkgrey);
  margin-bottom: 10px;
}

main h1 {
  font: 3em var(--headerft);
  color: var(--darkred);
  margin: 0;
  text-shadow: 2px 1px var(--darkergrey);
  text-transform: uppercase;
}

main h1 a {
  color: var(--darkred);
  text-decoration: none;
}

main h1 a:hover,
main a:focus {
  color: var(--lightergrey);
  text-decoration: none;
}

main h2 {
  font: 1.8em var(--headerft);
  color: var(--darkred);
  text-shadow: 2px 1px var(--darkergrey);
  text-align: center;
  text-transform: uppercase;
  margin: 5px;
}

main h3 {
  font: 2em var(--pkmnft);
  font-weight: bold;
  color: var(--darkred);
  text-shadow: 2px 1px var(--darkergrey);
  text-align: center;
  margin: auto;
}

main h4 {
  font: 3em var(--pkmnft);
  font-weight: bold;
  color: var(--darkred);
  text-shadow: 2px 1px var(--darkergrey);
  text-transform: uppercase;
  margin: 5px;
}

main h4:before {
  content: url(./img/flaresticker.png);
  display: inline-block;
  padding-right: 8px;
  vertical-align: middle;
}

main h5 {
  color: var(--darkred);
}

main h6 {
  color: var(--darkred);
}

blockquote {
  font: 1rem var(--bodyft);
  margin-top: 10px;
  margin-bottom: 10px;
  margin-left: 20px;
  padding-left: 15px;
  border-left: 3px solid var(--darkred);
}

p {
  line-height: 1.5;
  margin: 10px 0 10px 0;
}

hr {
  border: 2px dashed var(--darkergrey);
  width: 30% padding:10px;
  margin: 20px 0 20px 0;
}

main a {
  color: var(--brightred);
  transition: 0.5s ease;
  text-decoration: underline dotted;
  font-weight: bold;
}

main a:hover,
main a:focus {
  color: var(--grey);
  transition: 0.5s ease;
  text-decoration: none;
}

b.emp {
  color: var(--brightred);
}

b.title {
  color: var(--brightred);
  font: 1.5rem var(--pkmnft);
  font-weight: bold;
}

main ul {
  list-style: square;
}

main ul,
ol {
  list-style-position: outside;
  margin-left: 25px;
}

main ul,
ol,
li {
  line-height: 1.5;
  margin-bottom: 5px;
}

main img {
  max-width: 100%;
}

main input,
textarea,
select,
button {
  background: var(--darkgrey);
  color: var(--lightergrey);
  font: 1rem var(--bodyft);
  border: 1px solid;
  padding: 8px;
  margin: 2px;
}

main {
  counter-reset: footnotes;
}

[aria-describedby="footnote-label"],
[aria-describedby="footnote-label"]:hover,
[aria-describedby="footnote-label"]:focus {
  counter-increment: footnotes;
  text-decoration: none;
  font-weight: normal;
  color: inherit;
  cursor: default;
  outline: none;
}

[aria-describedby="footnote-label"]::after {
  content: '[' counter(footnotes) ']';
  vertical-align: super;
  font-size: 0.5em;
  margin-left: 1px;
  color: var(--brightred);
  cursor: pointer;
}

[aria-describedby="footnote-label"]:focus::after {
  outline: thin dotted;
  outline-offset: 2px;
}

[aria-label="Back to content"] {
  font-size: 1rem;
}

ol.small {
  font-size: 0.8rem;
  line-height: 1rem;
  list-style-position: inside;
}

#update {
  background: var(--darkergrey);
  color: var(--lightgrey);
  border-style: inset;
  border-width: 2px;
  border-color: var(--darkergrey);
  overflow: auto;
  scrollbar-color: var(--darkred) var(--darkergrey);
  scrollbar-width: thin;
  font: 1rem var(--bodyft);
  margin: auto;
  box-sizing: border-box;
  padding: 5px;
}

div.update {
  width: 40vw;
  height: 40vh;
}

#update p {
  font: 1.4rem var(--pkmnft);
}

#update ul {
  font: 1.4rem var(--pkmnft);
}

#update li {
  line-height: 1;
  margin-bottom: 3px;
}

#update hr {
  border-color: var(--darkgrey);
}

a.log {
  font-family: var(--pkmnft);
  font-size: 1.5rem;
  font-weight: bold;
  letter-spacing: 0.2rem;
  text-decoration: none;
  text-transform: uppercase;
  line-height: 1rem;
}

#siteinfo {
  background: var(--darkergrey);
  color: var(--menucolor);
  border-style: inset;
  border-width: 2px;
  border-color: var(--darkergrey);
  overflow: auto;
  scrollbar-color: var(--darkred) var(--darkergrey);
  scrollbar-width: thin;
  font: 1rem var(--bodyft);
  margin: auto;
  box-sizing: border-box;
  padding: 5px;
}

div.siteinfo {
  width: 30vw;
  height: 16vh;
}

#siteinfo p {
  font: 1.4rem var(--pkmnft);
}

div.splash {
  background: var(--darkgrey);
  color: var(--lightergrey);
  border-style: inset;
  border-width: 2px;
  border-color: var(--darkergrey);
  overflow: auto;
  font: 1rem var(--bodyft);
  margin: auto;
  box-sizing: border-box;
  padding: 15px;
  width: 40vw;
}

img.splash {
  display: block;
  margin: auto;
  width: 90%;
  padding-bottom: 10px;
  --a: 2deg;
  /* control the angle of rotation (the smaller, the better) */
  aspect-ratio: 1;
  transform: perspective(400px) rotate3d(var(--i, 1, -1), 0, var(--a));
  mask:
    linear-gradient(135deg, #000c 40%, #000, #000c 60%) 100% 100%/240% 240%;
  transition: .4s;
}

img.splash:hover {
  --i: -1, 1;
  mask-position: 0 0;
}

p.splash {
  font: 1.5rem var(--pkmnft);
  text-align: center;
}

img.stamp {
  filter: drop-shadow(0 0 0.70rem var(--brightred));
}

img.stamp2 {
  margin-bottom: 0;
}

#holoCaster {
  text-align: center;
  font: 1.8rem var(--pkmnft);
  color: var(--darkergrey);
}

div.holoCaster {
  background: salmon;
  border-radius: 20px;
  border: 0.5rem double indianred;
  overflow: auto;
  margin: 0 auto 0;
  box-sizing: border-box;
  padding: 10px;
  width: 45vw;
  box-shadow: inset 0.3rem 0.3rem 3rem 1rem indianred;
}

span.holoCaster {
  filter: drop-shadow(0 0.3rem 0 black);
}

img.holoCaster {
  display: block;
  margin: 0 auto 0;
  width: 25vw;
  filter: drop-shadow(0 0 0.5rem dodgerblue);
}

p.holoCaster {
  font: 3.3rem var(--pkmnft) !important;
  color: var(--lightergrey);
  font-weight: bold;
  text-align: center;
  margin: 0 auto 0;
  line-height: 1rem;
}

a.holoCaster {
  font: 1.5rem var(--pkmnft) !important;
}

p.backarrow {
  font: 1.5rem var(--pkmnft) !important;
  color: var(--darkred) !important;
  text-align: right;
  margin: 0;
}

#sitemap {
  background: var(--darkergrey);
  color: var(--beige);
  border-style: inset;
  border-width: 2px;
  border-color: var(--darkergrey);
  overflow: auto;
  scrollbar-color: var(--darkred) var(--darkergrey);
  scrollbar-width: thin;
  font: 1rem var(--bodyft);
  margin: auto;
  padding: 10px;
  box-sizing: border-box;
}

#sitemap ul {
  list-style-type: none;
  display: inline-block;
  border-left: 0.1rem solid var(--darkred);
}

#sitemap li {
  margin-bottom: -1px;
  border-bottom: 0.1rem solid var(--darkred);
  padding: 0.5rem;
}

#sitemap a {
  color: var(--lightgrey);
  text-decoration: none;
}

#sitemap a:hover {
  color: var(--brightred);
}

div.sitemap {
  width: 30vw;
}

#changelog {
  background: var(--darkergrey);
  color: var(--lightgrey);
  border-style: inset;
  border-width: 2px;
  border-color: var(--darkergrey);
  overflow: auto;
  scrollbar-color: var(--darkred) var(--darkergrey);
  scrollbar-width: thin;
  font: 1rem var(--bodyft);
  margin: auto;
  box-sizing: border-box;
  padding: 5px;
}

div.changelog {
  width: 40vw;
  height: 70vh;
}

#changelog p {
  font: 1.4rem var(--pkmnft);
}

#changelog ul {
  font: 1.4rem var(--pkmnft);
}

#changelog li {
  line-height: 1;
  margin-bottom: 3px;
}

#changelog hr {
  border-color: var(--darkgrey);
}

#webring {
  background: var(--darkergrey);
  border-style: inset;
  border-width: 2px;
  border-color: var(--darkergrey);
  overflow: auto;
  scrollbar-color: var(--darkred) var(--darkergrey);
  scrollbar-width: thin;
  font: 1rem var(--bodyft);
  margin: auto;
  box-sizing: border-box;
  padding: 5px;
  text-align: center;
}

div.webring {
  width: 30vw;
  height: 20vh;
}

#webring a {
  color: var(--brightred);
}

#webring p {
  font: 1.4rem var(--pkmnft);
}

#faq {
  background: var(--darkergrey);
  color: var(--lightgrey);
  border-style: inset;
  border-width: 2px;
  border-color: var(--darkergrey);
  overflow: auto;
  scrollbar-color: var(--darkred) var(--darkergrey);
  scrollbar-width: thin;
  font: 0.9rem var(--bodyft);
  margin: auto;
  box-sizing: border-box;
  padding: 5px;
}

div.faq {
  width: 40vw;
  height: 30vh;
}

#faq hr {
  border-color: var(--darkgrey);
}

#lines {
  border-collapse: collapse;
  width: 100%;
  table-layout: fixed;
}

#lines td,
#lines th {
  border: 1px solid var(--darkergrey);
  padding: 5px;
  text-align: center;
}

#lines th {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: var(--darkred);
  color: var(--darkergrey);
}

img.profile {
  float: left;
  display: flex;
  justify-content: center;
  margin: 15px 15px auto 15px;
}

img.profile:hover {
  filter: drop-shadow(0px 0px 4px rgba(255, 255, 255, 0.80));
  -webkit-filter: drop-shadow(0px 0px 4px rgba(255, 255, 255, 0.80));
  -webkit-transition: all 0.5s linear;
  -o-transition: all 0.5s linear;
  transition: all 0.5s linear;
}

div.profile {
  background: var(--darkgrey);
  color: var(--lightergrey);
  border-style: inset;
  border-width: 2px;
  border-color: var(--darkergrey);
  border-radius: 30px;
  font: 1rem var(--bodyft);
  margin: 10px;
  box-sizing: border-box;
  padding: 15px;
  display: block;
  overflow: hidden;
}

b.profile {
  color: grey;
}

a.profile {
  color: grey;
}

p.profile {
  font: 1.4rem var(--pkmnft);
}

p.small {
  font: 1rem var(--pkmnft);
}

p.small2 {
  font-size: 0.8rem;
}

span.small2 {
  font-size: 0.7rem;
}

b.x {
  color: dodgerblue;
  font: 1.5rem var(--pkmnft);
  font-weight: bolder;
}

b.y {
  color: red;
  font: 1.5rem var(--pkmnft);
  font-weight: bolder;
}

span.x {
  color: dodgerblue;
}

span.y {
  color: red;
}

p.aside {
  font-size: 0.8rem;
}

h4.smaller {
  font-size: 2.5em;
}

h4.smaller2 {
  font-size: 1.8em;
}

p.now {
  text-align: center;
  line-height: 1.8rem;
}

div.card {
  display: flex;
  align-items: center;
  overflow: auto;
}

img.card1 {
  float: left;
  display: flex;
  padding: 1em 1em 0 0;
}

img.card2 {
  float: right;
  display: flex;
  padding: 1em 0 0 1em;
}

img.ball {
  padding-left: 0.1rem;
  padding-right: 0.1rem;
}

img.ball2 {
  padding-left: 0.1rem;
  padding-right: 0.1rem;
}

blockquote.aside {
  font: 0.5rem var(--bodyft);
  background-color: var(--darkergrey);
  border-top: 2px solid var(--darkred);
  border-bottom: 2px solid var(--darkred);
  border-left: none;
  margin: auto;
  padding: 10px;
}

h3.aside {
  font: 1.7rem var(--pkmnft);
  font-weight: bold;
  color: var(--lightgrey);
}

a.mro {
  background-color: var(--darkergrey);
  border: 5px solid var(--darkergrey);
  text-decoration: none;
}

li.mro {
  list-style: none;
  line-height: 2;
}

h3.profile {
  font-size: 2.2em;
  font-weight: bold;
}

h2.holo {
  color: dodgerblue;
}

#main-footer {
  text-align: center;
  font-size: 1rem;
  color: var(--beige);
  background-image: var(--footer-image);
  background-size: 100%;
  background-position: center;
  padding: 10px;
  margin-bottom: 10px;
}

#main-footer img {
  float: right;
  display: flex;
  justify-content: center;
}

#main-footer p {
  line-height: 1.5;
  text-shadow: 1px 1px var(--darkergrey);
}

#main-header {
  text-align: right;
  background-image: var(--header-image);
  background-size: 100%;
  background-position: center;
  padding: 35px;
  margin-bottom: 0px;
}

#main-header p {
  margin: 0;
  color: var(--darkred);
  line-height: 0;
  text-shadow: 1px 1px var(--darkergrey);
}

#main-header a:hover {
  color: var(--darkgrey);
}

/* The following CSS ONLY applies to mobile/small screens */

#container {
  width: calc(100% - 20px);
  padding: 10px;
  margin-top: 10px;
}

#main-menu li {
  margin-bottom: 15px;
  display: inline-block;
}

#skip a {
  position: absolute;
  display: inline-block;
  left: 0px;
  top: -1000px;
  overflow: hidden;
  transition: top 0.5s ease;
  background: var(--darkgrey);
  color: var(--brightred);
  z-index: 1000;
  padding: 5px;
}

#skip a:focus {
  top: 0;
  transition: top 0.5s ease;
}

@media only screen and (max-width: 800px) {
  #main-header {
    background-image: url(./img/mobheader.png);
    background-color: var(--darkergrey);
    background-blend-mode: overlay;
    margin-bottom: 10px;
  }

  main h2 {
    font: 1.8em var(--headerft);
    color: var(--darkred);
    text-shadow: 2px 1px var(--darkergrey);
    text-align: center;
    margin: 10px;
  }

  main h4 {
    font-size: 2.5em;
  }

  h4.smaller {
    font-size: 2em;
  }

  h4.smaller2 {
    font-size: 1.5em;
  }

  #main-menu li a {
    justify-content: center;
    padding: 10px;
  }

  #main-footer {
    font: 0.6em var(--bodyft);
  }

  div.menu {
    width: 300px;
    height: 100px;
  }

  div.update {
    width: 80vw !important;
    height: 50vh;
  }

  div.changelog {
    width: 80vw !important;
    height: 80vh;
  }

  div.webring {
    width: 70vw !important;
    height: 20vh;
  }

  div.faq {
    width: 80vw !important;
    height: 35vh;
  }

  div.siteinfo {
    width: 80vw;
    height: 15vh;
  }

  div.splash {
    justify-content: center;
    align-content: center;
    width: 80vw;
    height: 38vh;
  }

  img.profile {
    width: 40%;
    margin: auto 15px auto 15px;
  }

  p.splash {
    font-size: 1.9rem;
  }

  img.splash {
    width: 100%;
  }

  .pnf {
    border: none !important;
    background: none !important;
  }

  div.holoCaster {
    padding: 10px;
    width: 90vw;
  }

  img.holoCaster {
    display: block;
    margin: auto;
    width: 70vw;
  }

  div.card {
    display: grid;
  }

  img.card1,
  img.card2 {
    margin: auto;
    padding-bottom: 1rem;
  }

  div.sitemap {
    width: 75vw;
  }

  #lines {
    table-layout: auto;
  }

}


/* The following CSS ONLY applies to desktop/big screens */

@media screen and (min-width: 800px) {
  #container {
    max-width: 1000px;
    width: 90%;
    margin: 25px auto;
    display: flex;
    gap: 20px;
  }

  #main-menu li {
    display: block;
    margin: 0;
  }

  #main-menu li a {
    display: block;
    border-bottom: 1px solid;
  }

  main {
    flex: 1 1 calc(75% - 30px);
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
  }

  main section {
    margin: 0;
  }

  #main-footer,
  #main-header {
    flex: 1 1 calc(100% - 40px);
  }


  .full {
    flex: 1 1 calc(100% - 40px);
  }

  .half {
    flex: 1 1 calc(50% - 40px);
  }

  .third {
    flex: 1 1 calc(33% - 40px);
  }

  .twothird {
    flex: 1 1 calc(66% - 40px);
  }

  .quarter {
    flex: 1 1 calc(25% - 40px);
  }

  .threequarter {
    flex: 1 1 calc(75% - 40px);
  }
}