:root {
  --yellow: #f3dd93;
  --yellow-50: #f3dd9382;
  --orange: #ff9d62;
  --orange-25: #ff9e6242;
  --pink: #f999ba;
  --green: #b3d084;
  --blue: #7ac2eb;
  --purple: #d6beea;
  --purple-med: #a061d3;
  --orange-med: #cc5200;
  --pink-med: #d62261;
  --green-med: #466e17;
  --blue-med: #1a75ab;
  --text-yo: #2c2543;
  --text-gp: #1b3b32;
  --text-by: #4a2834;
  --background: #fffdf6;
  --bgblue: #f4f7f6;
}
@font-face {
  font-family: "Mondwest";
  src: url(../fonts/PPMondwest-Regular.woff2);
}
@font-face {
  font-family: "NeueBit";
  src: url(../fonts/PPNeueBit-Bold.woff2);
}
@font-face {
  font-family: "VT";
  src: url(../fonts/VT323-Regular.woff2);
}
@font-face {
  font-family: "Dreamer";
  src: url(../fonts/DreamerTM-Regular.woff2);
}
body {
  background-color: var(--background);
  background-image: url("../images/bgs/grid.png");
  background-size: 400px;
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 100vh;
}
header {
  margin-top: 0px;
  font-family: "Dreamer";
  font-size: 110px;
  color: var(--blue);
  text-shadow: var(--orange-25) 3px 3px;
  letter-spacing: 3px;
}
header * {
  margin: 0;
}
h1 {
  font-family: "Mondwest";
  text-align: center;
  font-size: larger;
  margin: 0;
}
h2 {
  font-family: "VT";
  text-align: center;
  margin: -3px 0 5px 0;
}
.section {
  background-color: var(--yellow-50);
  padding: 10px;
  color: var(--text-by);
  font-family: "VT";
  position: relative;
  margin: 5px;
}
nav {
  margin-top: 7px;
  padding: 1px;
  display: flex;
  align-items: center;
  justify-content: center;
}
nav a {
  color: var(--text-gp);
  background-color: var(--green);
  padding: 2px 5px 2px 5px;
  font-family: "VT";
  font-size: large;
  text-decoration: none;
}
nav a:hover {
  background-color: var(--purple);
  padding: 2px 5px 2px 5px;
}
th {
  background-color: var(--purple);
  padding: 0px 5px 0px 5px;
}
td {
  background-color: var(--orange-25);
  padding: 2px 5px 2px 7px;
  overflow-wrap: break-all;
  hyphens: auto;
  width: 66%;
}
main {
  display: flex;
  position: relative;
  width: 60vw;
  min-height: 675px;
  height: auto;
}
#ocloc {
  position: absolute;
  top: 5vh;
  left: 25%;
}
#dcloc {
  position: absolute;
  top: 20vh;
  right: 25%;
}
#dndloc {
  position: absolute;
  top: 43vh;
  left: 30%;
}
#msg {
  position: absolute;
  right: 20px;
  top: 20px;
}
#welcome {
  width: 200px;
  height: fit-content;
  z-index: 2;
  overflow: visible;
}
.decor {
  position: relative;
  margin: 0;
  padding: 0;
  height: fit-content;
}
#star {
  position: absolute;
  bottom: -30px;
  right: -20px;
  max-width: 100px;
  z-index: 3;
}
#heart {
  position: absolute;
  top: -25px;
  left: -30px;
  max-width: 100px;
  z-index: 3;
}
#clover {
  position: absolute;
  max-width: 100px;
  z-index: 3;
  bottom: -23px;
  left: -25px;
}
#links {
  position: absolute;
  right: -100px;
  top: 70px;
}
#links ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}
#links li {
  padding: 5px;
}
#updates {
  position: absolute;
  top: 50px;
  left: 0px;
}
#rings {
  position: absolute;
  right: 20px;
  top: 390px;
}
#webrings {
  height: fit-content;
  width: 200px;
  text-align: center;
}
#buttons {
  position: absolute;
  left: 0px;
  top: 470px;
  width: 10vw;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}
.buttons {
  display: grid;
  grid-template-columns: 88px 88px;
  grid-auto-rows: 31px;
  gap: 5px;
}
.buttons * {
  border: 3px var(--orange-25) solid;
}
#mecore {
  display: grid;
  grid-template-columns: repeat(2, 150px);
  grid-template-rows: repeat(2, 150px);
  row-gap: 5px;
  column-gap: 5px;
}
#mecore img {
  max-width: 150px;
  height: auto;
}
.imgtxt {
  width: fit-content;
  height: fit-content;
  display: inline-block;
  position: relative;
}
.imgtxt span {
  opacity: 0;
  position: absolute;
  top: 45%;
  left: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font-size: 5rem;
  color: #fff;
  font-family: "Dreamer";
}
.imgtxt:hover span,
.imgtxt:focus span {
  opacity: 1;
}
.imgtxt:hover img,
.imgtxt:focus img {
  transform: scale(1.05) rotate(30deg);
}
#DND {
  filter: drop-shadow(1px 1px 0 #ff9d62) drop-shadow(-1px 1px 0 #ff9d62)
    drop-shadow(1px -1px 0 #ff9d62) drop-shadow(-1px -1px 0 #ff9d62);
}
#OCs {
  filter: drop-shadow(1px 1px 0 #d6beea) drop-shadow(-1px 1px 0 #d6beea)
    drop-shadow(1px -1px 0 #d6beea) drop-shadow(-1px -1px 0 #d6beea);
}
.updates {
  width: 10vw;
  height: 30vh;
}
.outlink {
  font-size: x-large;
  text-decoration: dashed;
  color: var(--blue);
}
.outlink:visited {
  color: var(--purple);
}