/* Elements */

table, th, td {
  border: 1px solid black;
  border-collapse: collapse;
  text-align: center;
}

th {width: 16em; font-size: 1.125rem;}
td {width: 8em; font-size: 1.125rem;}

li {font-size: 1.125rem;}

/* Backing */

.body {
  color: rgb(0, 0, 0);
  background-image: linear-gradient(30deg, rgb(192, 255, 224), rgb(224, 255, 192));
  background-color: rgb(192, 255, 224); 
  border-radius: 1em; 
  padding: 1em; 
  margin: auto;
}

/* Strings */

@keyframes str1 {
  50%  {transform: scaleX(-1);}
  100% {transform: scaleX(1);}
}

.str1 {
  border-radius: 32px;
  width: 32px;
  height: 32px;
  margin: auto;
  
  border-left-style: solid;
  border-width: 2px;
  
  animation-name: str1;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes str2 {
  25%  {transform: scale(1.5, 0.75);}
  75%  {transform: scale(0.75, 1.5);}
}

.str2 {
  border-radius: 32px;
  width: 32px;
  height: 32px;
  margin: auto;
  
  border-style: solid;
  border-width: 2px;
  transform: scale(1.5, 0.75);
  
  animation-name: str2;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

@keyframes str3 {
  0%   {transform: translate(0px, 0px);}
  50%  {transform: translate(12px, 12px);}
  100% {transform: translate(0px, 0px);}
}

.str3 {
  border-radius: 32px;
  width: 32px;
  height: 32px;
  margin: auto;
  
  border-style: solid;
  border-width: 2px;
  transform: translate(-6px, -6px);
  
  animation-name: str3;
  animation-duration: 2s;
  animation-iteration-count: infinite;
}

/* Other */

.sym {
  text-align: center;
  border-radius: 16px;
  width: 32px;
  height: 32px;
  margin: auto;
  line-height: 32px;
}