#card {
  scale: 1;
  height: 86mm;
  width: 54mm;
  margin: 5rem auto;
  border: 1mm solid green;
  border-radius: 0.5rem;
  box-shadow: 2px 2px 6px;
  background-color: white;
  font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif;
}


#card #bgimage img {
  height: 42.5mm;
  transform: translate(0mm, -135mm);
  width: 54mm;
  z-index: -6;
  mix-blend-mode: multiply;
}

#card h1 {
  padding: 2mm 1mm;
  text-align: center;
  font-size: 0.9rem;
  font-weight: 750;
  mix-blend-mode: multiply;
  color: rgb(3, 90, 3);
  line-height: 0.9;
  text-transform: uppercase;
  margin: 0rem;

}

#card h1 span {
  letter-spacing: -0.28mm;
  padding: 0;

}

#card div:nth-of-type(1) {
  display: flex;
  flex-direction: row;
  justify-content: space-evenly;
  align-content: center;
  align-items: center;
  z-index: 10;
}




#card div:nth-of-type(1) span:nth-of-type(1) {
  min-width: 15mm;
  letter-spacing: 0.1mm;
  z-index: 2;
  display: inline-block;
  font-size: x-small;
  font-weight: 550;
  color: rgb(231, 1, 1);
  transform: translate(5mm, 2mm) rotate(-90deg);
}



#card div:nth-of-type(1) img {

  border: 0.7mm solid rgb(3, 90, 3);
  min-height: 26mm;
  max-height: 26mm;
  max-width: 23mm;
  min-width: 23mm;
  margin: 0 0.1rem;
  mix-blend-mode: normal;
  margin-bottom: 1rem;
  z-index: 5;

}


#card div:nth-of-type(1) span:nth-of-type(2) {

  margin: 0 2mm;
  transform: translateY(-2.5mm);
  font-size: small;
  font-weight: 600;
  min-width: 15mm;
  z-index: 3;
}


#card div:nth-of-type(1) span:nth-of-type(2) sup {
  font-size: xx-small;
}

#card div:nth-of-type(2) {
  color: rgb(231, 1, 1);
  font-size: normal;
  text-align: center;
  margin-top: 0.5mm;
  font-family: "Times New Roman", Times, serif;
  font-weight: 550;
  position: relative;
  transform: translateY(-1rem);
  z-index: 2;


}


#card div:nth-of-type(3) {
  display: flex;
  justify-content: space-between;
  margin: 0.5mm 0.8rem;
  position: relative;
  transform: translateY(-1.2rem);
  z-index: 10;
}

#card div:nth-of-type(3) span:nth-of-type(1) {
  font-size: x-small;
}

#card div:nth-of-type(3) span:nth-of-type(1) span {
  color: green;
}

#card div:nth-of-type(3) span:nth-of-type(2) {
  font-size: x-small;
}

#card div:nth-of-type(3) span:nth-of-type(2) span {
  color: green;
}

#card>table {
  font-size: x-small;
  margin: 0rem 0.5rem;
  margin-bottom: 1rem;
  padding: 0;
  line-height: 1.25;
  height: 25mm;
  position: relative;
  transform: translateY(-1.4rem);
  z-index: 5;
}

#card>table tr {
  display: flex;
  width: 50mm;
}

#card>table tr td:nth-of-type(1) {
  width: 20%;
}

#card>table tr td:nth-of-type(2) {
  width: 70%;
}

#card>table tr:nth-of-type(5) {
  max-height: 7mm;
  overflow: hidden;
}

#card div:nth-of-type(4) {
  display: flex;
  align-items: flex-end;
  flex-direction: column;
  margin: 0rem 1rem;
  position: sticky;
  transform: translateY(-15.4mm);
}

#card div:nth-of-type(4) img {
  max-width: 22mm;
  padding-bottom: 4.5mm;
  mix-blend-mode: multiply;
  z-index: 20;
  float: right;
  transform: translate(0mm, 4.5mm);
}



#card div:nth-of-type(5) {
  font-size: xx-small;
  background-color: rgb(3, 90, 3);
  color: white;
  border-bottom-left-radius: 0.3rem;
  border-bottom-right-radius: 0.3rem;
  display: flex;
  flex-direction: column;
  line-height: 1.1;
  text-align: center;

  transform: translateY(-3.6rem);

  min-height: 6.8mm;
}

#card #logo img {
  position: relative;
  max-width: 75%;
  margin: 0 auto;
  mix-blend-mode: multiply;
  opacity: 0.2;
  transform: translate(8mm, -65mm);
  z-index: 2;
}

#card:hover {
  transition-duration: 2s;

}

button {
  padding: 0.5rem;
  font-size: normal;
  background-color: #ffc928;
  border-top-left-radius: 1rem;
  border-bottom-right-radius: 1rem;
  margin-left: 0.5rem;
}

button:hover {
  transition-duration: 1s;
  scale: 1.1;
  cursor: pointer;

}

button:active {
  box-shadow: 2px 2px 4px black;
  transition-duration: 0.2s;
  background-color: red;

}