@import './base.css';
@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;500;600;700;800;900&family=Lato:wght@300;400;700;900&display=swap');

:root {
  --rpg-gold: #d4af37;
  --rpg-gold-light: #f9e79f;
  --rpg-gold-dark: #8a6e2f;
  --rpg-red: #8b0000;
  --rpg-red-light: #ff1744;
  --rpg-dark: #0a0a0a;
  --rpg-panel: rgba(20, 20, 25, 0.85);
  --font-header: 'Cinzel', serif;
  --font-body: 'Lato', sans-serif;
}

body {
  margin: 0;
  padding: 0;
  font-family: var(--font-body);
  background-color: var(--rpg-dark);
  color: #fff;
  overflow-x: hidden;
}

#app {
  width: 100%;
  margin: 0;
  padding: 0;
  font-weight: normal;
}

a,
.green {
  text-decoration: none;
  color: hsla(160, 100%, 37%, 1);
  transition: 0.4s;
  padding: 3px;
}

@media (min-width: 1024px) {
  body {
    display: flex;
    place-items: center;
  }
}