@import url(components/header/header.css);
@import url(components/footer/footer.css);

@import url(features/chat/chat.css);
@import url(features/pixel-canvas/pixel-canvas.css);

@font-face {
  font-family: "Roboto Slab";
  src: url("fonts/Roboto_Slab/RobotoSlab-VariableFont_wght.ttf")
    format("truetype");
}

html {
  cursor: url("img/cursor.png"), auto;
  min-height: 100%;
}

* {
  font-family: "Roboto Slab", Arial, Helvetica, sans-serif;
  padding: 0;
  margin: 0;
}

body {
  background-color: #041a04;
  background-image:
    linear-gradient(45deg, #062906 25%, transparent 25%),
    linear-gradient(-45deg, #062906 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, #062906 75%),
    linear-gradient(-45deg, transparent 75%, #062906 75%);
  background-size: 60px 60px;
  background-position:
    0 0,
    0 30px,
    30px -30px,
    -30px 0;
  animation: chess-move 3s linear infinite;
}

@keyframes chess-move {
  to {
    background-position:
      60px 60px,
      60px 90px,
      90px 30px,
      30px 60px;
  }
}

.content {
  width: 800px;
  margin: 0 auto;
  background-color: white;
  padding: 1em;
  -moz-box-sizing: border-box;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
}

.input {
  border-radius: 0.5em;
}

.button {
  border-radius: 0.5em;
  background-color: white;
}