@import url(colors.css);
@font-face {
  font-family: "CarroisGothic";
  src: url("../assets/fonts/CarroisGothic-Regular.ttf") format("truetype");
}

@font-face {
  font-family: "CarroisGothicSC";
  src: url("../assets/fonts/CarroisGothicSC-Regular.ttf") format("truetype");
}

:root {
  background-color: black;
  color: var(--tht_purple2);
  font-family: "CarroisGothic";
}

header, article {
  border-style: groove;
  border-color: var(--tht_purple3);

  margin-top: 4px;
  margin-bottom: 4px;
  padding: 8px;
}

table {
  width: 100%;
}

table, th, td {
  border: 1px groove;
}

td {
  text-align: center;
  min-width: 10vw;
}

td img {
  max-width: 20vw;
  height: auto;
}

h1, h2, h3, h4 {
  font-family: "CarroisGothicSC";
  color: var(--tht_purple1);
}

hr {
  color: var(--tht_purple1);
}

div.identity {
  display: flex;
  justify-content: center;
  align-items: center;
  margin-top: 16px;
  margin-bottom: 16px;
}

div.id_img {
  height: auto;
  width: auto;

  position: sticky; 
  margin-right: 2px;

  border-style: double;
  border-width: 4px;
  border-color: var(--tht_purple2);
}

div.identity img {
  width: auto;
  height: 110px;

}

table.identity {
  width: 75%
}

table.identity th {
  width: 20%;
}

table.identity td {
  text-align: left;
}