/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */

@font-face {
  font-family: "Magic Cards";
  src: url("/fonts/MAGIC_CA.woff") format("woff");
  font-weight: normal;
  font-style: normal;
}

body {
  background-color: #0F0B00;
  color: #8F7539;
  font-family: Consolas, "Courier New", monospace, sans-serif;
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 1vh 1vh;
  box-sizing: border-box;
}

.content_box {
  text-align: center;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  border: 0.2vh solid transparent;
  background-image:
    linear-gradient(#0F0B00, #0F0B00),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' seed='3'/%3E%3CfeColorMatrix type='matrix' values='0.56 0 0 0 0.12  0 0.46 0 0 0.12  0 0 0.28 0 0.10  0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.6' numOctaves='1' seed='9'/%3E%3CfeColorMatrix type='matrix' values='0.62 0 0 0 0.08  0 0.52 0 0 0.08  0 0 0.30 0 0.06  0 0 0 0.35 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: auto, 140px 140px, 90px 90px;
  background-repeat: no-repeat, repeat, repeat;
  background-clip: padding-box, border-box, border-box;
  background-origin: padding-box, border-box, border-box;
  border-radius: 0;
  padding: 1vh 1vh;
  width: 100%;
  max-width: calc((100vh - 40px) * 4 / 3);
  max-height: calc(100vh - 40px);
  aspect-ratio: 4 / 3;
  box-sizing: border-box;
}

h1 {
  color: #8F7539;
  font-family: "Magic Cards", monospace, sans-serif;
}


.content_table {
  width: 100%;
  table-layout: fixed;
}

.row {
  width: 100%;
}

.column {
  width: 33%;
}

p {
  color: #FBE0A8;
}