@font-face {
  font-family: 'Autumn';
  src: url('Fonts/Autumn/Autumn.eot');
  src: url('Fonts/Autumn/Autumn.eot?#iefix') format('embedded-opentype'),
      url('Fonts/Autumn/Autumn.woff') format('woff'),
      url('Fonts/Autumn/Autumn.ttf') format('truetype'),
      url('Fonts/Autumn/Autumn.svg#Autumn') format('svg');
  font-weight: 0;
  font-style: normal;
}

@keyframes building-fade-in
{
  0%
  {
    opacity: 0;
    transform: scale(1, 0);
  }
  100%
  {
    opacity: 1;
    transform: scale(1, 1);
  }
}

@keyframes prestige-upgrade-button-x{
  0%{
    background-position-x: -150px;
  }
  50%{
    background-position-x: 150px;
  }
  100%{
    background-position-x: -150px;
  }
}

@keyframes prestige-upgrade-button-y{
  0%{
    background-position-y: -150px;
  }
  50%{
    background-position-y: 150px;
  }
  100%{
    background-position-y: -150px;
  }
}

*
{
  outline: 0;
  margin: 0;
}

*, html, div
{
  touch-action: pan-y;
}

body
{
  background: linear-gradient(0deg, #e1bcff, rgb(143, 219, 255), rgb(121, 112, 255));
  font-family: "Autumn";

  font-size: 24px;
  overflow-x: hidden;
}

button
{
  background: linear-gradient(0deg, #bbbbff, #ffffff);
  color: black;

  font-weight: bold;

  border: 4px solid black;
  border-radius: 16px;

  transition: 0.5s;

  margin: 16px;
}

button:hover:enabled
{
  filter: hue-rotate(45deg) saturate(1.5);
  transform: scale(1.1);
}

button:active:enabled
{
  filter: hue-rotate(60deg) saturate(5);
  transform: scale(1.1);
}

button:disabled
{
  filter: brightness(0.5);
}

input[type="checkbox"]{
  background: linear-gradient(0deg, rgb(199, 199, 255), white);
  border: 3px solid black;
  border-radius: 0.5em;
  width: 2em;
  height: 2em;
  margin: 0.5em;
}

input{
  background: linear-gradient(0deg, rgb(199, 199, 255), white);
  border: 3px solid black;
  border-radius: 0.5em;
  height: 2em;
  margin: 0.5em;
}

.textoutlinewhite{
  text-shadow: 2px 2px 0px white, -2px 2px 0px white, 2px -2px 0px white, -2px -2px 0px white;
}

.title{
  font-size: 3em;
}

.titleglow{
  font-size: 3em;
  text-shadow: 0px 0px 2px white, 0px 0px 4px white, 0px 0px 6px rgb(121, 235, 255), 0px 0px 8px rgb(233, 126, 255);
}

.text-big{
  font-size: 2em;
}

.text-huge{
  font-size: 3em;
}

.center
{
  text-align: center;
}

.autumn{
  font-family: "Autumn";
}

.inlineimage
{
  width: 0.8em;
  height: 0.8em;
}

.tabButton
{
  background: linear-gradient(0deg, #c9ffc4, #ffffff);
  width: 15%;
  height: 36px;
  font-size: 24px;
  margin: 1%;
}

#game-headbar
{
  background: linear-gradient(0deg, rgb(128, 107, 219), rgb(255, 112, 183));
  border-bottom: 6px solid black;

  position: sticky;
  top: 0;
  left: 0;

  z-index: 1;
}

#game-headbar .displaystat
{
  margin-right: 12%;
}

.bigbutton
{
  width: 20%;
  height: 2.5em;
  font-size: 1.25em;
}

.upgradeavailable{
  background: transparent;
}

.upgradebought{
  background: linear-gradient(0deg, rgb(218, 255, 216), rgb(220, 255, 228));
}

.prestigeupgrade 
{
  background: repeating-linear-gradient(45deg, navy, #1900ff, navy);
  background-size: 15%;
  animation: prestige-upgrade-button-x 6s infinite, prestige-upgrade-button-y 8s infinite;
  animation-timing-function: ease-in-out;
  color: white;
  border: 4px solid rgb(106, 133, 255);
}

.prestigeupgrade:disabled
{
  background: repeating-linear-gradient(45deg, black, rgb(3, 3, 99), black);
  background-size: 15%;
  color: #a8a8a8;
  filter: opacity(0.9);
  border: none;
}

.bigtable
{
  width: 100%;
  font-size: 36px;
  border-spacing: 0;
}

.bigtable tr
{
  transition: background-color 1s;
}

.bigtable td
{
  width: 20%;
  border-bottom: 3px solid black;
  padding-top: 16px;
  padding-bottom: 16px;
  margin: 0;
  transform-origin: center top;
  animation: building-fade-in 0.7s;
}

.automatorbutton{
  width: 75%;
  height: 100%;
  border: 5px solid black;
  background: linear-gradient(0deg, #8d63ff, #e3e0ff, #ffadff);
}

.automationtable{
  width: 100%;
  border-spacing: 0;
  font-size: 30px;
  border: 6px solid black;
  background: linear-gradient(0deg, rgb(175, 255, 255), rgb(255, 255, 255));
}

.automationtable td{
  text-align: center;
  width: 33%;
}

.automatortoggle{
  width: 2.5em;
  height: 2em;
  font-size: 1.25em;
}

.automatortoggle.on{
  background: linear-gradient(180deg, springgreen, white);
}

.automatortoggle.off{
  background: linear-gradient(180deg, rgb(255, 149, 149), white);
}

.bigtext
{
  font-size: 1.5em;
  font-weight: bold;
}

.bigtable button
{
  width: 35%;
  height: 100%;
  font-size: 32px;
}

#table_prestigeupgrades
{
  font-size: 16px;
}

#table_prestigeupgrades td
{
  padding: 0;
  width: 20%;
}

#table_prestigeupgrades td button
{
  width: 100%;
  height: 100%;
}

.milestone
{
  font-size: 1.5em;
  font-weight: bold;
  text-align: center;
  background: linear-gradient(0deg, #e1aeff, #ffffff);

  border: 4px solid black;
  border-radius: 8px;
  width: 100%;
  margin-top: 16px;
  margin-bottom: 16px;
  height: 4em;
}