/* CSS files add styling rules to your content */

* {
  -moz-user-select: none;
  -webkit-user-select: none;
  -ms-user-select: none;
  user-select: none;
  
  font-family: var(--default-font);
  color: var(--color-text);
  
  margin: 0px;
}

html {
  --color-bg: #111111;
  --color-text: #FCFCFC;
  
  --color-disabled-bg: #03045e;
  --color-clickable-bg: #023e8a;
  --color-hovered-bg: #0077b6;
  
  --color-error: #FF3243;
  --color-good: #316a01;
  
  --color-campfire: #FFCC00;
  --color-pretty-shard: #11CCFF;
  --color-color: linear-gradient(0deg, #5555FF, #5555FF, #55FF55, #FF5555, #FF5555);
  --color-telescope: #cbf0ee;
  --color-wave: #50b0ff;
  --color-star: #FFFF44;
  --color-satellite: #1faee9;
  --color-traffic-jam: #FF5050;
  --color-prism: 	#408FFF;
  --color-deck: rgb(167, 139, 250);
  --color-persistence: #55CD55;
  --color-reactor: #00FF00;
  --color-dyson-swarm: #46abb3;
  --color-backgrounds: #DDDDDD;
  --color-hamster: #F09030;
  --color-soles: #FCC090;
  
  --default-font: 'Share Tech Mono', monospace;
}

body {
  margin: 0px;
  background-color: var(--color-bg);
}

.main-container {
  min-width: 960px;
  min-height: 640px;
  font-size: 16px;
  padding: 20px;
  display: flex;
  flex-direction: column;
}

.header {
  font-size: 1.5em;
  text-align: center;
}

.rainbow {
  background: linear-gradient(60deg, #9922FF, #9922FF, #3333FF, #2299FF, #33FF33, #FFFF00, #FF9922, #FF3333, #FF3333);
  background-size: 300% 300%;
  background-position: 0 100%;
  animation: rainbow_animation 12s alternate infinite;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

.big-number {
  font-size: 1.5em;
}

@keyframes rainbow_animation {
  50% {
		background-position: 100% 0;
	}
}

button {
  background-color: var(--color-clickable-bg);
  border: 0px;
  padding: 0.5em 1em;
  cursor: pointer;
  position: relative;
  font-size: 0.8em;
}
button:hover {
  background-color: var(--color-hovered-bg);
}
button:disabled {
  background-color: var(--color-disabled-bg);
  cursor: auto;
}
button.notification {
  background-image: linear-gradient(0deg, var(--color-error), var(--color-error));
  background-blend-mode: hue;
}

.photon-emitter {
  width: 100%;
  margin-top: 1em;
  margin-bottom: 2em;
  padding-top: 1em;
  padding-bottom: 1em;
  --photon-position: 120%;
  --charged-color: #FFFF00;
  --cooled-color: var(--color-clickable-bg);
  background: radial-gradient(circle, var(--cooled-color), var(--cooled-color) calc(var(--photon-position) - 4%), var(--charged-color) calc(var(--photon-position)), var(--cooled-color) calc(var(--photon-position) + 4%), var(--cooled-color));
}
.photon-emitter:hover {
  --cooled-color: var(--color-hovered-bg);
}
.photon-emitter:disabled {
  --cooled-color: var(--color-disabled-bg);
}

.navbar {
  display: grid;
  grid-template-columns: repeat(var(--tabs), 1fr);
  grid-template-rows: 1fr;
  grid-gap: 3px;
  margin-bottom: 1em;
}
.navbar-tab:disabled {
  background-color: var(--color-bg);
}

.tab-container {
  flex-grow: 1;
  display: flex;
  flex-direction: column;
}

.choice-desc {
  font-size: 0.8em;
  text-align: center;
}

.upgrade.complete {
  background-color: var(--color-good);
}

.generator {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  align-items: center;
  gap: 10px;
  margin-bottom: 10px;
}

.igj-game {
  padding: 5px; 
  display: grid; 
  grid-template-rows: 1fr 1fr 1fr 1fr; 
  font-size: 0.8em; 
  text-align: center; 
  align-items: center;
}

.upgrade.advanced {
  display: grid; 
  grid-template-columns: 2fr 1fr; 
  align-items: center;
  gap: 5px;
}

#tickspeed, #dimsac {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.color-wheel {
  background: #FF3333;
  animation: huespin_animation 12s alternate infinite;
  color: transparent;
  background-clip: text;
  -webkit-background-clip: text;
}

@keyframes huespin_animation {
  100% {
    filter: hue-rotate(360deg);
  }
}