@keyframes grow {
  0% {
    transform: scale(1);
  }
  10% {
    transform: scale(1.05);
  }
  30% {
    transform: scale(1.1);
  }
  100% {
    transform: scale(1.05);
  }
}
.animate-hover {
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, box-shadow;
}
.animate-hover:hover {
  animation: grow 2s ease-out forwards;
  transform: scale(1.1);
}
.link {
  padding: 0 0.25em 0 0.25em;
}
.link:hover {
  animation: grow 2s ease-out forwards;
}
#navigation {
  display: flex;
  flex-direction: row;
  padding: 0 4.5em;
  max-width: 100vw;
  justify-content: space-between;
}
#navigation .nav-elements {
  display: flex;
  justify-content: space-evenly;
  align-items: center;
  flex-wrap: wrap;
}
@media only screen and (max-width: 500px) {
  #navigation .nav-elements {
    flex-direction: column;
    height: auto;
  }
  #navigation .dividers {
    display: none;
  }
}
@font-face {
  font-family: "Knewave-Regular";
  src: url(../Fonts/Knewave-Regular.ttf) format("truetype");
}
/* Inter - Regular */
@font-face {
  font-family: 'Inter';
  src: url('../Fonts/Inter/Inter_24pt-Regular.ttf') format('truetype');
  font-weight: 400;
  font-style: normal;
}
/* Inter - Italic */
@font-face {
  font-family: 'Inter';
  src: url('../Fonts/Inter/Inter_24pt-Italic.ttf') format('truetype');
  font-weight: 400;
  font-style: italic;
}
/* Inter - Bold */
@font-face {
  font-family: 'Inter';
  src: url('../Fonts/Inter/Inter_24pt-Bold.ttf') format('truetype');
  font-weight: 700;
  font-style: normal;
}
/* Inter - Light */
@font-face {
  font-family: 'Inter';
  src: url('../Fonts/Inter/Inter_24pt-Light.ttf') format('truetype');
  font-weight: 300;
  font-style: normal;
}
/* Inter - ExtraBold */
@font-face {
  font-family: 'Inter';
  src: url('../Fonts/Inter/Inter_24pt-ExtraBold.ttf') format('truetype');
  font-weight: 800;
  font-style: normal;
}
#custom-article {
  min-height: 90vh;
}
.article {
  flex-grow: 1;
}
.info-card {
  flex: 0 0 25%;
}
#Game {
  background-color: #d2c297;
  overflow: hidden;
  color: #000000;
  letter-spacing: calc(var(--game-width)/50 - 1ch);
  font-size: calc(var(--game-height) / 50);
  line-height: 1;
  font-family: "DejaVuSansMono", monospace;
  text-wrap: nowrap;
  white-space: pre;
}
/* Background : {red: 0, green: 0, blue: 0},
        Player : {red: 255, green: 0, blue: 0},
        Villages : {red: 0, green: 255, blue: 0},
        NPC : {red: 100, green: 255, blue: 100} */
.color-0-0-0 {
  color: #000000;
}
.color-255-0-0 {
  color: #ff0000;
}
.color-0-255-0 {
  color: #00ff00;
}
.color-28-92-28 {
  color: #1c5c1c;
}
@font-face {
  font-family: "DejaVuSansMono";
  src: url("../Fonts/DejaVuSansMono/DejaVuSansMono.ttf") format('truetype');
}
.carousel {
  display: flex;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  flex-direction: row;
  justify-content: space-around;
  padding: 0.75em 0;
  scrollbar-color: transparent transparent;
}
.carousel *::-webkit-scrollbar {
  width: 0;
}
.carousel *::-webkit-scrollbar-track {
  background: transparent;
}
.carousel *::-webkit-scrollbar-thumb {
  background: transparent;
  border: none;
}
.carousel * {
  -ms-overflow-style: none;
}
.carousel-item {
  scroll-snap-align: start;
  flex: 0 0 100%;
  transform: translateX(0%);
  transition: transform 1s;
  transform-origin: center center;
}
.toolTip {
  position: absolute;
  padding: 0.75em 0.75em;
  background-color: rgba(99, 76, 158, 0.685);
  z-index: 999;
  max-width: 20em;
  display: inline-block;
}
#footer {
  background-color: #262626;
  color: #7E7E81;
}
#footer .centered {
  display: inline-flex;
}
#footer #sections {
  display: flex;
  flex-direction: row;
}
#footer #design-section {
  display: flex;
  flex-direction: row;
  align-items: center;
  flex-grow: 2;
}
#footer #design-section img {
  max-height: 10em;
}
#footer #contacts-section {
  flex-grow: 1;
}
.modal {
  position: fixed;
  /* Stay in place */
  z-index: 1;
  /* Sit on top */
  padding-top: 2em;
  /* Location of the box */
  left: 0;
  top: 0;
  width: 100%;
  /* Full width */
  height: 100%;
  /* Full height */
  overflow: auto;
  /* Enable scroll if needed */
  background-color: #000000;
  /* Fallback color */
  background-color: rgba(0, 0, 0, 0.4);
  /* Black w/ opacity */
  display: flex;
  align-content: center;
  justify-content: center;
}
.modal .modal-contents {
  margin: 10em;
  width: 50vw;
  max-height: 60em;
  background-color: #1A1A1A;
  padding: 1em;
  overflow: scroll;
  display: flex;
  flex-direction: column;
}
@media (width <= 500px) {
  .modal .modal-contents {
    width: 75vw;
    margin: 7em;
    margin-top: 15em;
  }
}
.modal .modal-done-button {
  margin-top: 1em;
}
.modal .modal-display {
  flex-grow: 1;
}
.modal .header {
  display: flex;
  justify-content: space-between;
  padding: 1em;
  font-weight: bold;
  font-size: 18px;
}
.button-basic {
  padding: 0.75em 0.75em;
  outline: none;
  border-radius: 0.2em;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  border-radius: 0.5em;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, box-shadow;
}
.button-basic:hover {
  animation: grow 2s ease-out forwards;
  transform: scale(1.1);
}
.button-basic:hover {
  cursor: pointer;
}
.button-text {
  background: transparent;
  color: #7E7E81;
  padding: 0.75em 0.75em;
  outline: none;
  border-radius: 0.2em;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  border-radius: 0.5em;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, box-shadow;
}
.button-text:hover {
  animation: grow 2s ease-out forwards;
  transform: scale(1.1);
}
.button-text:hover {
  cursor: pointer;
}
.button-text:hover {
  text-decoration: underline;
}
.button-hover:hover {
  cursor: pointer;
}
.card-button {
  flex: 0 0 30%;
  border: solid 1px #262626;
  border-radius: 1em;
  padding: 0.75em 0.75em;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, box-shadow;
}
.card-button:hover {
  animation: grow 2s ease-out forwards;
  transform: scale(1.1);
}
.card-button:hover {
  cursor: pointer;
}
.card-button:hover {
  border: solid 2px #262626;
  outline: #ffffff;
  box-shadow: 0.2em 0.2em 1.2em rgba(99, 76, 158, 0.685), -0.2em -0.2em 1.2em rgba(99, 76, 158, 0.685);
}
.button-primary {
  background: rgba(99, 76, 158, 0.685);
  padding: 0.75em 0.75em;
  outline: none;
  border-radius: 0.2em;
  -webkit-appearance: none;
  appearance: none;
  border: none;
  border-radius: 0.5em;
  transition: all 0.18s cubic-bezier(0.4, 0, 0.2, 1);
  will-change: transform, box-shadow;
}
.button-primary:hover {
  background-color: transparent;
  color: rgba(99, 76, 158, 0.685);
  outline: rgba(99, 76, 158, 0.685);
  border: solid 2px rgba(99, 76, 158, 0.685);
}
.button-primary:hover {
  animation: grow 2s ease-out forwards;
  transform: scale(1.1);
}
.button-primary:hover {
  cursor: pointer;
}
.image-small {
  max-width: 1.5em;
}
.image-medium {
  max-width: 6.5em;
}
.image-logo {
  aspect-ratio: 1;
  max-width: 6.5em;
}
.image-large {
  max-width: 25em;
}
@media (width <= 500px) {
  .image-large {
    max-width: 60vw !important;
  }
}
.image-icon {
  aspect-ratio: 1;
  max-width: 1.5em;
}
.change-image-to-large-viewport-on-iphone {
  max-width: 60vw !important;
}
.article-image {
  width: 100vw;
  height: 40vh;
  display: flex;
  flex-shrink: 0;
  object-fit: cover;
  overflow: hidden;
}
.image-container {
  display: flex;
  align-items: center;
  justify-items: center;
}
.link {
  text-decoration: none;
  color: #7E7E81;
}
.unimportant-link {
  padding: 0 0.25em 0 0.25em;
  text-decoration: none;
  color: #7E7E81;
}
.fading-image-to-bottom {
  /* bottom fading */
  mask-image: linear-gradient(to bottom, #000000 70%, rgba(0, 0, 0, 0) 100%);
  -webkit-mask-image: linear-gradient(to bottom, #000000 70%, rgba(0, 0, 0, 0) 100%);
}
.bordered {
  border: solid 1px #262626;
}
.bordered-heavy {
  border: solid 2px #262626;
}
.bordered-heavy-pop {
  border: solid 2px rgba(99, 76, 158, 0.685);
}
.bordered-heavy-emphasize {
  border: solid 2px #ffffff;
}
.neon-light-box-shadow-pop {
  box-shadow: 0.2em 0.2em 1.2em rgba(99, 76, 158, 0.685), -0.2em -0.2em 1.2em rgba(99, 76, 158, 0.685);
}
.outlined {
  outline: #262626;
}
.outlined-highlight {
  outline: #ffffff;
}
.centered {
  display: flex;
  align-items: center;
  align-content: center;
  justify-content: center;
  justify-items: center;
}
.wrappable {
  flex-wrap: wrap;
}
.padded {
  padding: 0.75em 0.75em;
}
.padded-large {
  padding: 1.5em 1.5em;
}
.padded-x-large {
  padding: 3em 3em !important;
}
@media (width <= 500px) {
  .turn-to-column-with-phone {
    flex-direction: column !important;
  }
}
.spaced-evenly-row {
  justify-content: space-evenly;
  display: flex;
  flex-direction: row;
}
.space-around-row {
  justify-content: space-evenly;
  display: flex;
  flex-direction: row;
}
.flex-row {
  display: flex;
  flex-direction: row;
}
@media (width <= 500px) {
  .change-flex-direction-to-column {
    flex-direction: column !important;
  }
}
@media (width <= 500px) {
  .change-flex-direction-to-column-reverse {
    flex-direction: column-reverse !important;
  }
}
.title-text {
  font-size: 40px;
  font-weight: bolder;
  text-align: center;
}
.emphasized-text {
  color: #ffffff;
  font-size: 1.05em;
}
.small-separation {
  margin-bottom: 0.5em;
}
.list {
  background-color: #1A1A1A;
  list-style-type: disc;
  padding-left: 1.5rem;
  /* Ensures the bullet isn't cut off */
  margin-bottom: 1rem;
}
.list-item {
  margin-left: 1.5em;
  margin-bottom: 0.5rem;
  /* Adds space between individual points */
  line-height: 1.6;
}
.regular-text {
  color: #7E7E81;
}
.emphasized-card {
  background-color: rgba(99, 76, 158, 0.685);
  border-radius: 1em;
  padding: 0.75em 0.75em;
}
.card {
  border-radius: 1em;
  padding: 0.75em 0.75em;
}
body {
  background-color: #1A1A1A;
  color: #ffffff;
  font-size: 1.05em;
  font-size: 12px;
  min-height: 100vh;
  width: 100vw;
  display: flex;
  flex-direction: column;
}
.icon {
  aspect-ratio: 1;
  max-height: 1.5em;
  transition: transform 0.3s ease-in-out;
}
.button-icon {
  aspect-ratio: 1;
  max-height: 1.5em;
  transition: transform 0.3s ease-in-out;
}
.button-link {
  display: flex;
  align-content: center;
  justify-content: center;
}
.image-container {
  display: flex;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}
* {
  padding: 0;
  margin: 0;
  font-family: Inter, 'Lucida Sans Regular', 'Lucida Grande', 'Lucida Sans Unicode', Geneva, Verdana, sans-serif;
  font-size: inherit;
}
@media print {
  #footer,
  #nav-bar,
  .remove-when-print {
    display: none !important;
  }
  .print-remove-padding {
    padding: 0em !important;
  }
  .print-reduce-margin {
    margin: 0.3em !important;
  }
}
#main-website-container {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
  background-color: #0d0d0d;
}
#main-website-container nav {
  flex-grow: 1;
}
#main-website-container main {
  flex-grow: 3;
}
#main-website-container footer {
  flex-grow: 1;
}
#main-view {
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}
.standard-padding {
  padding: 0.75em 0.75em;
}