@font-face {
  font-family: "Abril Fatface";
  src: url("../fonts/AbrilFatface-Regular.ttf");
}
@font-face {
  font-family: "Work Sans";
  src: url("../fonts/WorkSans-Light.ttf");
  src: url("../fonts/WorkSans-Medium.ttf");
}

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  font-family: "Work Sans";
}

h1 {
  margin-top: 2.5%;
  font-family: "Abril Fatface";
  text-align: center;
  letter-spacing: 0.2rem;
  font-size: 300%;
}
table {
  table-layout: fixed;
  width: 80%;
  display: flex-block;
  margin-left: auto;
  margin-right: auto;
  border-spacing: 0.25rem;
}
td {
  margin: 70%;

  text-align: center;
  border-radius: 5%;
}

td p:nth-child(1) {
  font-size: 50%;
  padding-top: 4%;
}
td p:nth-child(2) {
  font-family: "Abril Fatface";
  font-size: 150%;
}
td p:nth-child(3) {
  font-size: 60%;
  font-weight: lighter;
  padding-bottom: 4%;
}
div {
  width: 80%;
  margin-top: 3%;
  display: flex;
  margin-left: auto;
  margin-right: auto;
}
div p {
  display: inline-block;
  margin-left: auto;
  margin-right: auto;
  padding: 1%;
  border-radius: 5%;
}
/* Abstand ausgelagerte Teil */
tr:nth-child(8) {
  margin-top: 300%;
}
/* empty */
td:empty {
  background-color: white;
  border: none;
}
/* star */
.star {
  background-color: white;
  border: none;
  font-family: "Abril Fatface";
  text-align: right;
  font-size: 20pt;
}

/* Nonmetal */

.nonmetal {
  background-color: wheat;
}
.nonmetal:hover {
  background-color: tan;
  transform: scale(2);
}
.nonmetal:active {
  filter: grayscale(100);
}
div p:nth-of-type(1) {
  background-color: wheat;
}
section div p:nth-of-type(1):hover section table tr td .nonmetal:active {
  filter: grayscale(100);
}
/* Alkali Metal */
.alkaliMetal {
  background-color: rgb(191, 223, 143);
}
.alkaliMetal:hover {
  background-color: rgb(166, 196, 122);
  transform: scale(2);
}
div p:nth-of-type(2) {
  background-color: rgb(191, 223, 143);
}
/* Alkaline Earth Metal */
.alkalineEarthMetal {
  background-color: rgb(160, 194, 160);
}
.alkalineEarthMetal:hover {
  background-color: rgb(115, 155, 115);
  transform: scale(2);
}
div p:nth-of-type(3) {
  background-color: rgb(160, 194, 160);
}
/*  Metalloid */
.metalloid {
  background-color: blanchedalmond;
}
.metalloid:hover {
  background-color: peachpuff;
  transform: scale(2);
}
div p:nth-of-type(4) {
  background-color: blanchedalmond;
}
/* Transition Metal */
.transitionMetal {
  background-color: rgb(248, 216, 222);
}
.transitionMetal:hover {
  background-color: rgb(199, 167, 183);
  transform: scale(2);
}
div p:nth-of-type(5) {
  background-color: rgb(248, 216, 222);
}
/* Post-Transition Metal */
.post-TransitionMetal {
  background-color: rgb(236, 186, 168);
}
.post-TransitionMetal:hover {
  background-color: rgb(226, 190, 178);
  transform: scale(2);
}
div p:nth-of-type(6) {
  background-color: rgb(236, 186, 168);
}
/* Halogen */
.halogen {
  background-color: rgb(219, 190, 190);
}
.halogen:hover {
  background-color: rgb(187, 151, 151);
  transform: scale(2);
}
div p:nth-of-type(7) {
  background-color: rgb(219, 190, 190);
}
/* Noble Gas */
.nobleGas {
  background-color: #f5c0b0;
}
.nobleGas:hover {
  background-color: hsl(15, 31%, 72%);
  transform: scale(2);
}
div p:nth-of-type(8) {
  background-color: #f5c0b0;
}
/* Lanthanide */
.lanthanide {
  background-color: skyblue;
}
.lanthanide:hover {
  background-color: rgb(119, 179, 202);
  transform: scale(2);
}
div p:nth-of-type(9) {
  background-color: skyblue;
}
/* Actinide */
.actinide {
  background-color: rgb(153, 215, 219);
}
.actinide:hover {
  background-color: rgb(113, 169, 173);
  transform: scale(2);
}
div p:nth-of-type(10) {
  background-color: rgb(153, 215, 219);
}