@font-face {
  font-family: "Poppins";
  src: url('../assets/Poppins-Regular.ttf')
}

@font-face {
  font-family: "Sergio Trendy";
  src: url('../assets/Sergio-Trendy.ttf') format('truetype');
}

:root {
  --contour: black;
  --darker: #05BE70;
  --darkest: #049A5B;
  --hl: #12EB90;
  --hl-light: #08D57F;
  --lightest: #32FCA7;
  --font: var(--contour);
  --background: white;
  --light-grey: #ededed;
}

green {
  color: var(--hl)
}

body, html {
  margin: 0px;
  background: var(--background);
  background-size: 100% 100vh;
  background-repeat: repeat;
  font-family: "Poppins";
  font-size: 0.9em;
  width: 100%;
  height: 100%;
  overflow-y: hidden;
}

* {
  font-family: 'Itim', cursive;
}

*:focus {
  outline: none;
}

button {
  margin: 0px;
  padding: 0px;
}

#main {
  width: 100%;
  height: calc(100% - 130px);
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: 100%;
  align-items: start;
}

#universe {
  background: black;
  aspect-ratio: 1;
  height: 100%;
  max-height: 100%;
  object-fit: contain;
}

canvas {
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  cursor: cell;
}

.entity {
  width: 5px;
  height: 5px;
  background: red;
  margin: 2px;
}

.alive {
  background-color: var(--hl);
  cursor: no-drop;
}

.hidden {
  display: none;
}