@font-face {
    font-family: 'Asap Bold';
    src: url('fonts/asap_bold.otf') format('opentype');
}

@font-face {
    font-family: 'Asap Italic';
    src: url('fonts/asap_italic.otf') format('opentype');
}

@font-face {
    font-family: 'Asap Medium';
    src: url('fonts/asap_medium.otf') format('opentype');
}

@font-face {
    font-family: 'Asap Regular';
    src: url('fonts/asap_regular.otf') format('opentype');
}

@font-face {
    font-family: 'Days Sans Black';
    src: url('fonts/days_sans_black.otf') format('opentype');
}

body
{
  background-image: url("images/background.png");
  background-position: center;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  align-items: flex-start;
  color: white;
}

#canvasContainer
{
  max-width: 1024px; /* Set max-width to maintain aspect ratio */
  width: 100%; /* Allow container to take full width */
  display: flex;
  flex-direction: row; /* Arrange elements side by side */
}

#canvas
{
  max-width: 512px; /* Set max-width for canvas */
  max-height: 512px; /* Set max-height for canvas */
}

#formContainer
{
  flex: 1;
}

#formContainer form
{
  display: flex;
  flex-direction: column;
  width: 100%;
}

#formContainer label
{
  margin-bottom: 10px;
}

#formContainer .row
{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}


#formContainer .row input,
#formContainer .row select
{
  flex: 1;
  background-color: gray;
  color: white;
}

#formContainer textarea
{
  background-color: gray;
  color: white;
  margin-bottom: 10px;
  padding: 5px;
  width: 100%;
  height: 50px;
}

#formContainer button
{
  padding: 10px;
  background-color: #007bff;
  color: white;
  border: none;
  cursor: pointer;
}

#formContainer .row input[type="number"]
{
  width: 40px;
}

.hide
{
  display: none !important;
}

#formContainer .attributes,
#formContainer .factions,
#formContainer .statuses
{
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

#formContainer .attributes label,
#formContainer .factions label,
#formContainer .statuses label
{
  flex: 0 0 auto;
}

#formContainer .attributes input,
#formContainer .factions input,
#formContainer .statuses input
{
  flex: 0 0 auto;
}

#cardName
{
  background-color: gray;
  color: white;
}

#customSubField
{
  display: flex;
  margin-top: 10px;
}