/* 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." */

body {
  color: white;
  text-align: center;
  background-image: url("atom.gif");
  background-repeat: repeat;
  animation: lv 500000s linear infinite;
}

@media (prefers-reduced-motion: reduce) {
  body {
    animation: none;
    background-image: url("atomreduced.gif");
  }
}

p, h1, ul, table {
  border: 2px dashed blue;
  background-color: black;
  padding: 20px;
  margin: 0 auto;
  width: 50%;
}

smallp {
  border: 2px dashed blue;
  background-color: black;
  padding: 20px;
  margin: 0 auto;
  width: 20%;
}

td, th {
  border: 1px solid blue;
  background-color: black;
  padding: 20px;
  margin: 0 auto;
  width: 50%;
}

img { 
    image-rendering: optimizeSpeed;
    image-rendering: -moz-crisp-edges;
    image-rendering: -o-crisp-edges;
    image-rendering: -webkit-optimize-contrast;
    image-rendering: pixelated;
    image-rendering: optimize-contrast;
    -ms-interpolation-mode: nearest-neighbor;
}

@keyframes lv {
  0% {
    background-position: 0 0;
  }
  100% {
    background-position: 40000000px 40000000px;
  }
}

.mycontainer {
  width:60%;
  margin:auto;
}

.mycontainer div {
  width:50%;
  float:left;
}

.periodic {
  border: 2px dashed blue;
  background-color: black;
  padding: 1px;
  margin: 0 auto;
  width: 30px;
}

.periodicelement {
  border: 6px solid blue;
  background-color: black;
  padding: 1px;
  margin: 0 auto;
  width: 30px;
}

.emptyelement {
  border: 0px solid blue;
  background-color: black;
  padding: 1px;
  margin: 0 auto;
  width: 30px;
}

.spoiler {
  color: gray;
  background-color: gray;
}

.spoiler:hover {
  color: white;
  background-color: inherit;
}