@font-face {
  font-family: "Pixelify Sans";
  src: url("/frontend/fonts/PixelifySans-Regular.ttf") format("truetype");
  font-weight: 400;
}
@font-face {
  font-family: "Pixelify Sans";
  src: url("/frontend/fonts/PixelifySans-Medium.ttf") format("truetype");
  font-weight: 600;
}
@font-face {
  font-family: "Pixelify Sans";
  src: url("/frontend/fonts/PixelifySans-SemiBold.ttf") format("truetype");
  font-weight: 700;
}
@font-face {
  font-family: "Pixelify Sans";
  src: url("/frontend/fonts/PixelifySans-Bold.ttf") format("truetype");
  font-weight: 900;
}

* {
  font-family: "Pixelify Sans";
}

html {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
}

body {
  height: 100%;
  width: 100%;
  margin: 0;
  padding: 0;
  background: radial-gradient(
    ellipse at center,
    var(--felt-light) 0%,
    var(--felt-dark) 70%,
    #042819 100%
  );
  color: var(--bone);
}

:root {
  --felt-dark: #0a4d2e;
  --felt-light: #1a7a4a;
  --rail: #3a1f0e;
  --rail-light: #6b3a18;
  --gold: #d4a23a;
  --gold-light: #f0c75a;
  --ink: #1a1a1a;
  --bone: #f4ecd8;
  --chip-red: #c0392b;
  --chip-blue: #2c6fbb;
  --chip-blue: #2c6fbb;
  --chip-green: #1fd655;
}

.flex-center {
  display: flex;
  align-items: center;
  justify-content: center;
}

.hidden {
  visibility: hidden;
  opacity: 0;
}

.flex-center-col {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.full-sized {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
}

.flex-end-start {
  display: flex;
  justify-content: end;
  align-items: start;
}