/* Variables */
*{
    /* Color */
    --kiwi1: #FFAD05;
    --kiwi2: #5995ED;
    --kiwi3: #FE5F55;
    --kiwi4: #0CCE6B;
    --jag1: #AA8ED6;
    --jag2: #FDCB58;
    --jag3: #F4900C;
    --jag4: #C1694F;
    --jag5: #55ACEE;
    --transparent: #ffffff05;
    --fill: #000000;
  }
body {
  background-color: grey;
  color: black;
  font-family: Verdana;
}
/* --------- */
/* boxes */
/* --------- */
.half{
  width:45%;
}
.third{
  width:30%;
}
.black{
  background-color: black;
}
.inline{
  display: inline-block;
}
.min{
  min-width:300px;
}
/* --------- */
/* Soup */
/* --------- */
.soup{
  color: white;
  padding:20px;
  margin:5px;
}
/* --------- */
/* Kiwi */
/* --------- */
.kiwi{
  color: var(--kiwi1);
  padding:20px;
  margin:5px;
}
.kiwi a, .kiwi a:visited:hover {
  color: var(--kiwi2);
}
.kiwi a:hover,.kiwi a:visited{
  color: var(--kiwi3);
}
/* --------- */
/* Jaggie */
/* --------- */
.jag{
  color: var(--jag1);
  padding:20px;
  margin:5px;
}
.jag a, .jag a:visited:hover {
  color: var(--jag2);
}
.jag a:hover,.jag a:visited{
  color: var(--jag3);
}
th,td {
	padding: 0.25rem 0.75rem;
	vertical-align: top;
}
th{
  text-align: left;
  }
table {
  table-layout: fixed; /* Forces columns to be even */
  width: 100%;        /* Must specify a width for 'fixed' to work */
}
.moving-dot {
  width: 20px;
  height: 20px;
  background-color: var(--kiwi4);
  border-radius: 50%;
  position: absolute;
  animation: moveAround 5s linear infinite;
}

@keyframes moveAround {
  0% { top: 0; left: 0; }
  25% { top: 0; left: 100px; }
  50% { top: 100px; left: 100px; }
  75% { top: 100px; left: 0; }
  100% { top: 0; left: 0; }
}