body, h1, h2, h3, h4, h5, h6,
p, blockquote, pre, hr,
dl, dd, ol, ul, figure {
  margin: 0;
  padding: 0;
}

ul, ol {
  margin-left: 1em;
}

@font-face {
  font-family: "Sour Gummy";
  src: url("/assets/fonts/SourGummy.ttf");
}
body {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  font-family: "Sour Gummy";
}
body main {
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex: 1;
  margin: 20px;
}

a {
  color: white;
  text-decoration: none;
}
a:hover {
  color: darkred;
  text-decoration: blink, underline;
}
a:visited {
  text-decoration: underline;
}

.red-line {
  border: 2px outset darkred;
  background-color: darkred;
}

#site-header {
  position: relative;
  display: flex;
  justify-content: space-between;
  background-color: #1e2727;
  color: white;
  font-size: 30px;
  padding: 3px 3vh 3px 3vw;
}
#site-header img {
  vertical-align: middle;
  width: 1.25em;
  margin-top: -0.25em;
}
#site-header #site-link #site-logo {
  border-radius: 100%;
}
#site-header #site-links {
  display: flex;
  gap: 20px;
}

@keyframes colorChange {
  0% {
    color: rgb(244, 129, 129);
  }
  20% {
    color: rgb(129, 238, 244);
  }
  40% {
    color: rgb(125, 234, 245);
  }
  60% {
    color: rgb(120, 231, 246);
  }
  80% {
    color: rgb(116, 227, 247);
  }
  100% {
    color: rgb(243, 133, 133);
  }
}
.colorCycle span {
  display: inline-block;
  animation: colorChange 3s infinite ease-in-out;
}
.colorCycle span:nth-child(1) {
  animation-delay: 0s;
}
.colorCycle span:nth-child(2) {
  animation-delay: 0.2s;
}
.colorCycle span:nth-child(3) {
  animation-delay: 0.4s;
}
.colorCycle span:nth-child(4) {
  animation-delay: 0.6s;
}
.colorCycle span:nth-child(5) {
  animation-delay: 0.8s;
}
.colorCycle span:nth-child(6) {
  animation-delay: 1s;
}
.colorCycle span:nth-child(7) {
  animation-delay: 1.2s;
}
.colorCycle span:nth-child(8) {
  animation-delay: 1.4s;
}
.colorCycle span:nth-child(9) {
  animation-delay: 1.6s;
}
.colorCycle span:nth-child(10) {
  animation-delay: 1.8s;
}
.colorCycle span:nth-child(11) {
  animation-delay: 2s;
}
.colorCycle span:nth-child(12) {
  animation-delay: 2.2s;
}
.colorCycle span:nth-child(13) {
  animation-delay: 2.4s;
}
.colorCycle span:nth-child(14) {
  animation-delay: 2.6s;
}
.colorCycle span:nth-child(15) {
  animation-delay: 2.8s;
}
.colorCycle span:nth-child(16) {
  animation-delay: 3s;
}
.colorCycle span:nth-child(17) {
  animation-delay: 3.2s;
}
.colorCycle span:nth-child(18) {
  animation-delay: 3.4s;
}
.colorCycle span:nth-child(19) {
  animation-delay: 3.6s;
}
.colorCycle span:nth-child(20) {
  animation-delay: 3.8s;
}
.colorCycle span:nth-child(21) {
  animation-delay: 4s;
}
.colorCycle span:nth-child(22) {
  animation-delay: 4.2s;
}
.colorCycle span:nth-child(23) {
  animation-delay: 4.4s;
}
.colorCycle span:nth-child(24) {
  animation-delay: 4.6s;
}
.colorCycle span:nth-child(25) {
  animation-delay: 4.8s;
}
.colorCycle span:nth-child(26) {
  animation-delay: 5s;
}
.colorCycle span:nth-child(27) {
  animation-delay: 5.2s;
}
.colorCycle span:nth-child(28) {
  animation-delay: 5.4s;
}
.colorCycle span:nth-child(29) {
  animation-delay: 5.6s;
}
.colorCycle span:nth-child(30) {
  animation-delay: 5.8s;
}
.colorCycle span:nth-child(31) {
  animation-delay: 6s;
}
.colorCycle span:nth-child(32) {
  animation-delay: 6.2s;
}
.colorCycle span:nth-child(33) {
  animation-delay: 6.4s;
}
.colorCycle span:nth-child(34) {
  animation-delay: 6.6s;
}
.colorCycle span:nth-child(35) {
  animation-delay: 6.8s;
}
.colorCycle span:nth-child(36) {
  animation-delay: 7s;
}
.colorCycle span:nth-child(37) {
  animation-delay: 7.2s;
}
.colorCycle span:nth-child(38) {
  animation-delay: 7.4s;
}
.colorCycle span:nth-child(39) {
  animation-delay: 7.6s;
}
.colorCycle span:nth-child(40) {
  animation-delay: 7.8s;
}
.colorCycle span:nth-child(41) {
  animation-delay: 8s;
}
.colorCycle span:nth-child(42) {
  animation-delay: 8.2s;
}
.colorCycle span:nth-child(43) {
  animation-delay: 8.4s;
}
.colorCycle span:nth-child(44) {
  animation-delay: 8.6s;
}
.colorCycle span:nth-child(45) {
  animation-delay: 8.8s;
}
.colorCycle span:nth-child(46) {
  animation-delay: 9s;
}
.colorCycle span:nth-child(47) {
  animation-delay: 9.2s;
}
.colorCycle span:nth-child(48) {
  animation-delay: 9.4s;
}
.colorCycle span:nth-child(49) {
  animation-delay: 9.6s;
}
.colorCycle span:nth-child(50) {
  animation-delay: 9.8s;
}

#site-message {
  background-color: #1e2727;
  color: white;
}
#site-message .colorCycle {
  transition: color 0.5 ease;
}

#site-footer {
  display: flex;
  justify-content: center;
  gap: 20px;
  background-color: #1e2727;
  color: white;
}

body {
  background-image: url("/assets/images/ffxivbg.jpg");
  background-size: 100%;
}

#home {
  display: flex;
  justify-content: center;
  gap: 1em;
}
#home #home-side {
  background-color: rgba(30, 39, 39, 0.95);
  width: 8%;
  border-radius: 5px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.25);
}
#home #home-side #side-header {
  background: linear-gradient(to bottom, #003b3b, rgba(30, 39, 39, 0.9));
  text-align: center;
  color: white;
}
#home #home-side .home-section-switch-button {
  margin-left: 10%;
  margin-top: 1em;
  width: 80%;
  height: 2.5em;
  border-radius: 1rem;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.25);
}
#home #home-side .home-section-switch-button:hover {
  cursor: pointer;
}
#home #home-body #home-header {
  border-radius: 5px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.7);
  margin-bottom: 1vh;
}
#home #home-body #home-header h1 {
  background: linear-gradient(to bottom, #003b3b, rgb(30, 39, 39));
  padding-left: 1em;
  color: white;
}
#home #home-body #home-header p {
  padding-left: 1em;
  background-color: rgba(222, 184, 135, 0.85);
  border-style: dashed;
  border-color: #1e2727;
  border-top-width: 0;
}
#home #home-body #home-section {
  border-radius: 5px;
  border-style: solid;
  border-color: rgba(0, 0, 0, 0.7);
  height: 70vh;
}
#home #home-body #home-section iframe {
  width: 100%;
  height: 100%;
  border-style: none;
  scrollbar-color: transparent gray;
}

/*# sourceMappingURL=home.css.map */