@import url("vars.css");
@import url("animations.css");
@import url("statistics.css");

body {
  background-color: var(--background-color);
  color: var(--text-color);
  font-family: Cambria, "Hoefler Text", "Liberation Serif", Times,
    "Times New Roman", serif;
  font-size: 14pt;
  margin: 0;
  padding: 0;
  width: 100vw;
  height: 100vh;
  overflow: hidden;
}

#phaser-game {
  width: 100%;
  height: 100%;
}

.fade-in {
  opacity: 0;
  animation: fade-in 0.5s ease-in-out forwards;
}

h1 {
  font-size: 28pt;
  color: var(--main-color);
  text-align: center;
}

h2 {
  color: var(--secondary-color);
  text-decoration: underline;
}

h2 svg {
  width: 32px;
  height: 32px;
  margin-right: 10px;
  vertical-align: bottom;
  overflow: visible;
}

h2 .history_text p {
  position: absolute;
  z-index: 0;
  color: var(--secondary-text-color);
  word-wrap: break-word;
  font-size: 2pt;
  margin: 4pt 4pt 4pt 4pt;
  padding: 0 1pt 0 1pt;
  height: 21px;
  overflow-y: auto;
  color: black;
}

#products h2 {
  text-align: center;
  color: var(--secondary-text-color);
  margin: 0;
  font-size: 16pt;
  font-weight: bold;
  text-decoration: none;
}

::-webkit-scrollbar {
  width: 0px;
  background: transparent;
}

.popout:hover {
  transform: scale(6) translateX(10px);
  transition: all 0.3s ease-in-out;
  cursor: pointer;
}

a {
  color: var(--secondary-color);
  text-decoration: none;
}

a:is(:hover, :focus) {
  color: var(--text-color);
  text-decoration: underline;
}

a:focus {
  outline: thin dotted;
  outline: 5px auto -webkit-focus-ring-color;
  outline-offset: -2px;
}

img {
  vertical-align: middle;
}

.wrapper {
  position: relative;
  display: block;
  margin: 0 auto;
  height: auto;
  max-width: 960px;
  min-width: 320px;
  padding: 0 15px;
}

#icon {
  width: 16px;
  height: 16px;
  margin: 0 3px 0 5px;
  cursor: pointer;
}

.icon {
  display: inline-flex;
}

.icon img:hover {
  transform: scale(1.2);
}

.hide {
  animation: hide 1s ease-in-out;
}

.reverse_spin {
  animation: reverse_spin 0.1s linear 9;
}

.spin_infinite {
  animation: spin 0.5s linear infinite;
}

.throw_to_middle {
  animation: throw_to_middle 1s ease-in-out;
}

.throw_to_body {
  animation: throw_to_body 1s ease-in-out;
}

.grow {
  animation: grow 1s ease-in-out;
}

.growIcon {
  animation: growIcon 1s ease-in-out;
}

.fade-out {
  opacity: 1;
  animation: fade-out 0.5s ease-in-out forwards;
}

.contact-section {
  padding: 30px;
  text-align: center;
}

footer {
  text-align: center;
  font-size: 12pt;
  padding: 20px;
}

footer span {
  display: inline-block;
  height: 100%;
}

.flame {
  animation: flame 1.2s ease-in-out infinite;
}

.fly {
  animation: fly 10s linear;
}