/* CSS is how you can add style to your website, such as colors, fonts, and positioning of your
   HTML content. To learn how to do something, just try searching Google for questions like
   "how to change link color." */
html {
  --bg1-color: black;
  --bg2-color: black;
  --tx1-color: black;
  --tx2-color: black;
}

@keyframes bgrandom {
  0%,100% { background: var(--bg1-color); }
  50% { background: var(--bg2-color); }
}

@keyframes bgrandom2 {
  0%,100% { background: var(--bg2-color); }
  50% { background: var(--bg1-color); }
}

@keyframes txrandom {
  0%,100% { color: var(--bg2-color); }
  50% { color: var(--bg1-color); }
}

@keyframes txrandom2 {
  0%,100% { color: var(--bg1-color); }
  50% { color: var(--bg2-color); }
}

@keyframes spinning {
  from { transform: rotate(0deg); }
  to { transform: rotate(10deg); }
}

@keyframes shadow {
  0% { text-shadow: 24px 24px #000; }
  100% { text-shadow: 24px 24px #fff; }
}

@font-face {
  font-family: GrobeDeutschmeister;
  src: url('GrobeDeutschmeister.ttf');
}

body {
  background-color: black;
  margin: 0;
  padding: 0;
}

.gedicht1 {
  animation:
    bgrandom 10s ease-in-out infinite,
    txrandom 10s ease-in-out infinite;
  text-shadow: 12px 12px #000;
  width: auto;
  height: 254px;
  float: left;
  margin: 2px;
  padding: 2px;
}
  

.gedicht1:hover {
  animation:
    bgrandom 3s ease-in-out infinite,
    txrandom 3s ease-in-out infinite;
  text-shadow: 24px 24px #000;
  width: auto;
  height: 254px;
  float: left;
  margin: 0px;
  padding: 4px;
}

.gedicht2 {
  animation:
    bgrandom2 10s ease-in-out infinite,
    txrandom2 10s ease-in-out infinite;
  text-shadow: 12px 12px #000;
  width: auto;
  height: 254px;
  float: left;
  margin: 2px;
  padding: 2px;
}

.gedicht2:hover {
  animation:
    bgrandom2 3s ease-in-out infinite,
    txrandom2 3s ease-in-out infinite;
  text-shadow: 24px 24px #000;
  width: auto;
  height: 254px;
  float: left;
  margin: 0px;
  padding: 4px;
}

img {
  width: 254px;
  height: 254px;
  float: left;
  margin: 2px;
  padding: 2px;
}

div {
  font-family: Roboto;
  font-size: 24px;
  /*
  text-shadow: 24px 24px #000;
  animation:
    shadow 3s ease-in-out infinite,
  */
  }

img:hover {
  animation:
    spinning 0.1s;
  transform: rotate(10deg);
}

a {
  font-family: GrobeDeutschmeister;
  font-size: 24px;
  color: white;
}